/* ── Email client: two-pane layout + left rail (global so the recursive folder
   tree component shares these classes across CSS-isolation boundaries). ── */

.mail-shell {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 120px);
    min-height: 420px;
}

/* ── The inbox hosted inside a TritiumWindow (MailWindowButton) ──────────────
   Same symbiosis as the tab strips: the window body becomes a plain non-scrolling frame and the shell
   fills it, so the viewport-based `calc(100vh - 120px)` (correct for the page) doesn't overflow the
   window. min-height is dropped too — a small window must be allowed to shrink below 420px. */
.tt-win__body:has(> .mail-shell) { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.tt-win__body > .mail-shell {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
}

.mail-panel {
    flex: 0 0 25%;
    min-width: 200px;
    max-width: 640px;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.mail-splitter {
    flex: 0 0 10px;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
    background: transparent;
    touch-action: none;   /* iPad: don't let the browser hijack the drag as a scroll/pan gesture */
}

.mail-splitter::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);   /* centered line — stays centered as the handle widens on touch */
    background: var(--mud-palette-lines-default);
    opacity: .5;
    transition: background .12s, width .12s;
}

.mail-splitter:hover::before,
.mail-splitter.dragging::before {
    background: var(--mud-palette-primary);
    opacity: 1;
    width: 3px;
}

/* Horizontal (row) variant — a draggable divider between stacked sections (e.g. the
   dashboard's Today·Unread / Today·Read split). Reuses the .mail-splitter JS + drag. */
.mail-splitter.mail-splitter-h {
    flex: 0 0 8px;
    align-self: stretch;   /* full width of the column */
    cursor: row-resize;
}
.mail-splitter.mail-splitter-h::before {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: translateY(-50%);   /* centered line — stays centered as the handle grows on touch */
}
.mail-splitter.mail-splitter-h:hover::before,
.mail-splitter.mail-splitter-h.dragging::before {
    width: auto;
    height: 3px;
}

/* Touch devices (iPad): fatten the handles so a fingertip can grab them (Apple's ~44px guidance).
   The visible line stays thin (it's centered), only the grab zone grows. */
@media (pointer: coarse) {
    .mail-splitter                     { flex-basis: 24px; }
    .mail-splitter.mail-splitter-h     { flex-basis: 24px; }
}

.mail-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.mail-main-paper {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Reading (preview) pane — a right-docked, resizable sibling of the grid area ── */
.mail-reading {
    flex: 0 0 42%;
    min-width: 360px;
    max-width: 70%;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
}

/* The reader (header + body). Hosted both by the reading pane (a plain div, OUTSIDE a MudPaper) and by
   the reader dialog (inside a MudPaper). Set the primary text color explicitly so the sender name —
   Typo.subtitle1, which only inherits its color — stays readable in dark mode in the pane too, instead of
   falling back to near-black on the dark surface. (Same fix as .mail-nav above.) */
.mail-msgview {
    color: var(--mud-palette-text-primary);
}

/* ── Left rail items (used by MailNavPanel AND the recursive MailFolderTreeItem) ── */
.mail-nav {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 1px;
    /* Explicit theme text color — the rail is outside a MudPaper so it wouldn't
       otherwise inherit the palette (was unreadable in dark mode). */
    color: var(--mud-palette-text-primary);
}

.mail-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    user-select: none;
    touch-action: manipulation;   /* tap fires immediately (no 300ms delay / double-tap zoom) */
}

/* Hover feedback only on devices that actually hover (mouse/trackpad). On touch (iPad) a hover
   rule makes the FIRST tap a "hover" and swallows the click — so leave it off there. */
@media (hover: hover) {
    .mail-nav-item:hover {
        background: var(--mud-palette-action-default-hover);
    }
}

.mail-nav-item.sel {
    background: var(--mud-palette-primary-hover);
    font-weight: 600;
}

.mail-nav-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.mail-nav-count {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    border-radius: 10px;
    padding: 0 7px;
    line-height: 1.5;
}

/* Lock badge on a password-protected folder row. */
.mail-nav-lock {
    flex-shrink: 0;
    margin-left: 2px;
    opacity: 0.9;
}

/* ── Contact "Communication" tab: card + toolbar + scrolling list ─────────────── */
.mail-corr-panel {
    width: 100%;
}

/* Fixed toolbar row above the scrolling list. */
.mail-corr-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
    padding: 3px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Fixed-height, scrollable message area (only this scrolls; the toolbar stays put). */
.mail-corr-scroll {
    height: 60vh;
    overflow-y: auto;
    margin-top: 8px;
}

/* Custom divider between the reader header and the body — a thin rule that fades out at both ends
   (a plain MudDivider goes full-height when it's a direct child of a flex column). */
.mail-msgview-rule {
    height: 1px;
    margin: 12px 8px;
    background: linear-gradient(to right,
        transparent,
        var(--mud-palette-lines-default) 12%,
        var(--mud-palette-lines-default) 88%,
        transparent);
}

/* Reader "no stored body" state — a centered rounded panel filling the space below the top-aligned header. */
.mail-msgview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px;
}
.mail-msgview-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    max-width: 440px;
    padding: 28px 34px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.mail-corr-list {
    display: flex;
    flex-direction: column;
}

.mail-corr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mail-corr-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.mail-corr-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.mail-corr-subject {
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.mail-corr-sub {
    font-size: 0.75rem;
}

/* Unread badge (accent) vs. total badge (muted) on rail rows. */
.mail-nav-unread {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: var(--mud-palette-primary);
    border-radius: 10px;
    padding: 0 6px;
    line-height: 1.5;
    flex-shrink: 0;
}

.mail-nav-total {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
    min-width: 1.5em;
    text-align: right;
}

/* The server's true count when it's larger than what we've synced — dim, prefixed with a slash so it
   reads as "synced / on-server". Signals there's more mail to pull without pretending it's local yet. */
.mail-nav-server {
    font-size: 0.62rem;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
    text-align: right;
    opacity: 0.85;
}
.mail-nav-server::before {
    content: "/ ";
    opacity: 0.6;
}

.mail-nav-section {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    padding: 12px 8px 4px;
    font-weight: 600;
}

.mail-nav-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 0;
}

.mail-nav-empty {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 8px 6px;
}

/* My Folders — collapsible header + tiny [ all | unread | any ] filter */
.mail-nav-section-toggle { cursor: pointer; user-select: none; }
.mail-nav-section-caret { opacity: .6; margin-right: 2px; }
.mail-nav-folder-filter {
    display: flex;
    justify-content: flex-end;   /* small chips, aligned to the right */
    gap: 3px;
    padding: 2px 10px 6px;
}
.mail-nav-folder-filter button {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.mail-nav-folder-filter button:hover { background: var(--mud-palette-action-default-hover); }
.mail-nav-folder-filter button.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}
/* Empty state when the filter hides everything — centered with breathing room. */
.mail-nav-empty-filter {
    text-align: center;
    padding: 14px 12px;
}

/* The row's ⋮ menu is revealed ONLY for the selected folder (the .sel class is set by the click
   handler, i.e. JS state — never by :hover). This deliberately avoids a :hover reveal: on iPad,
   Safari defaults to "Request Desktop Website" and reports `hover: hover`, so a hover-driven reveal
   makes the FIRST tap resolve as a hover (flipping the ⋮ visible) and swallows the click — the folder
   then needs a second tap to select. Driving the reveal off selection keeps the first tap a real click.
   pointer-events:none while hidden means the invisible ⋮ can't intercept a tap meant for the row. */
.mail-nav-menu {
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}

.mail-nav-item.sel .mail-nav-menu {
    opacity: 1;
    pointer-events: auto;
}

/* ── Compose recipient field (chips + multi-column type-ahead) ─────────────────── */
.mrf { position: relative; }

.mrf-label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.mrf-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 5px 8px;
    border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default));
    border-radius: 6px;
    background: var(--mud-palette-surface);
    cursor: text;
}
.mrf-box:focus-within { border-color: var(--mud-palette-primary); }

.mrf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 4px 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    background: var(--mud-palette-action-default-hover);
}
.mrf-chip--contact { background: var(--mud-palette-primary-hover); }
.mrf-chip--group   { background: var(--mud-palette-secondary-hover, var(--mud-palette-primary-hover)); font-weight: 600; cursor: pointer; }
.mrf-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrf-chip-x {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
}
.mrf-chip-x:hover { background: rgba(0,0,0,.12); color: var(--mud-palette-text-primary); }

.mrf-input {
    flex: 1 1 120px;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    padding: 3px 2px;
}

/* The MudPopover is only a transparent positioning shell (lives in the app-root popover layer, so it's
   never clipped by an overflow ancestor like the dashboard's quick-compose panel). Keeping it transparent
   means nudging the card left (margin) doesn't reveal any shell background behind it. */
.mrf-popover {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
/* The visible type-ahead card — a fixed 800px; MeasurePopShiftAsync nudges it left when it would overflow. */
.mrf-pop {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    max-height: 300px;
    width: 800px;
    max-width: calc(100vw - 16px);   /* only ever capped by the viewport itself */
    background: var(--mud-palette-surface);
    /* Explicit theme text colour — Paper="false" means there's no MudPaper to inherit it from, so the
       item names would render black (unreadable in dark mode), same as the nav rail / dashboard title. */
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.mrf-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px;
    overflow-y: auto;
    border-right: 1px solid var(--mud-palette-lines-default);
}
.mrf-col:last-child { border-right: none; }

.mrf-col-h {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    padding: 2px 6px 6px;
}
/* Second stacked section (Users under Employees) — a small separator. */
.mrf-col-h--2 {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mrf-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
}
.mrf-item:hover { background: var(--mud-palette-action-default-hover); }
.mrf-item-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrf-item-sub {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 55%;
}
.mrf-empty { font-size: 0.75rem; color: var(--mud-palette-text-secondary); font-style: italic; padding: 6px; }

/* ── Card (Outlook-style) list view — the flexible alternative to the grid ─────── */
/* ── Mail Dashboard ─────────────────────────────────────────────────────────── */
.mail-dash {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 12px 14px;
    gap: 12px;
    /* Explicit theme text color — the dashboard sits directly under .mail-main
       (outside a MudPaper), so it wouldn't otherwise inherit the palette and the
       h6 title rendered black / unreadable in dark mode (same as .mail-nav). */
    color: var(--mud-palette-text-primary);
}
.mail-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
/* Chip switches in the header (same look as the My-folders filter). */
.mail-dash-filter {
    display: flex;
    gap: 3px;
}
.mail-dash-filter-divider {
    width: 1px;
    height: 18px;
    background: var(--mud-palette-lines-default);
    flex-shrink: 0;
}
/* Show/hide-panels menu (checkbox list). */
.mail-dash-panels { padding: 6px 12px 8px; min-width: 180px; display: flex; flex-direction: column; gap: 1px; }
.mail-dash-panels-title {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0 5px;
}
.mail-dash-filter button {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.mail-dash-filter button:hover { background: var(--mud-palette-action-default-hover); }
.mail-dash-filter button.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}
/* Today column | (col-1 splitter) | right area — flex row so the splitter engine can resize it. */
.mail-dash-grid {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.mail-dash-col {
    flex: 0 0 34%;      /* Today column — resizable via the col-1 splitter (overrides this width) */
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;   /* keep a dragged-oversize section from spilling past the column */
}
/* Focusable Today column (keyboard nav) — no focus ring. */
.mail-dash-col-key:focus { outline: none; }

/* Right area — an inverted-T: a top ROW (compose | charts) over one merged bottom panel, with a
   horizontal splitter between them and a vertical "stem" splitter inside the top row. */
.mail-dash-right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.mail-dash-right-top {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;        /* top row and the merged panel split the height (splitter overrides) */
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.mail-dash-rpane { flex: 1 1 0; min-width: 0; min-height: 0; }   /* compose + charts share the row width */
.mail-dash-bottom { flex: 1 1 0; min-height: 0; }               /* the merged full-width panel */
.mail-dash-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;   /* the two Today sections split the column height */
}
.mail-dash-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 2px 6px;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}
.mail-dash-count {
    margin-left: auto;
    background: var(--mud-palette-action-default-hover);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 0.7rem;
}
.mail-dash-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 160px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}
@media (max-width: 1100px) {
    .mail-dash { overflow-y: auto; }
    /* Stack Today above the right area; drop the col-1 splitter and clear any dragged width. */
    .mail-dash-grid { flex-direction: column; }
    .mail-dash-grid > .mail-splitter { display: none; }
    .mail-dash-col { flex: 1 1 auto; width: auto !important; min-height: 260px; }
    /* Stack compose above charts and drop the vertical stem; clear any dragged widths. */
    .mail-dash-right-top { flex-direction: column; }
    .mail-dash-right-top > .mail-splitter { display: none; }
    .mail-dash-rpane { width: auto !important; flex: 1 1 auto; min-height: 240px; }
}

/* A widget "card" section (quick-compose, chart tabs, favorites) — bordered surface, clips its own scroll.
   Must be a flex column so its single child fills it and inner lists can scroll (min-height:0 chain). */
.mail-dash-pane {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mail-dash-pane > * { flex: 1 1 auto; min-height: 0; }
/* Column 3's fixed (non-draggable) split: charts on top get the larger share. */
.mail-dash-col3-top    { flex: 1.6 1 0; }
.mail-dash-col3-bottom { flex: 1 1 0; }

/* ── Quick compose (column 2, top) ─────────────────────────────────────────── */
.mail-qc { display: flex; flex-direction: column; min-height: 0; }
.mail-qc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}
.mail-qc-title { font-size: 0.8rem; font-weight: 600; }
.mail-qc-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
}
/* Message box fills the space between the fields and the Send button (which stays anchored at the
   bottom), growing/shrinking as the panel is resized. */
.mail-qc-msg { flex: 1 1 auto; min-height: 72px; display: flex; flex-direction: column; gap: 2px; }
.mail-qc-msglabel { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }
.mail-qc-textarea {
    flex: 1 1 auto;
    min-height: 56px;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default));
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    outline: none;
}
.mail-qc-textarea:focus { border-color: var(--mud-palette-primary); }
.mail-qc-textarea::placeholder { color: var(--mud-palette-text-secondary); }
.mail-qc-send { flex-shrink: 0; }

/* MudBlazor fields reserve helper-text space below the input; drop it so fields sit flush. */
.mail-qc-body .mud-input-control-helper-container { display: none; }
.mail-qc-body .mud-input-control { margin-bottom: 0; }
/* Pin EVERY field to its natural height (MudSelect's root is .mud-select, not .mud-input-control, and would
   otherwise flex-grow — the gap under From) and let ONLY the message box absorb the free space. */
.mail-qc-body > * { flex: 0 0 auto; }
.mail-qc-body > .mail-qc-msg { flex: 1 1 auto; }

/* ── Chart tabs (column 3, top) ────────────────────────────────────────────── */
.mail-stats { display: flex; flex-direction: column; min-height: 0; }
.mail-stats-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 6px 5px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}
.mail-stats-tabs button {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.mail-stats-tabs button:hover { background: var(--mud-palette-action-default-hover); }
.mail-stats-tabs button.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}
.mail-stats-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px; }
.mail-stats-cap  { font-size: 0.7rem; color: var(--mud-palette-text-secondary); padding-bottom: 6px; flex-shrink: 0; }
.mail-stats-chart { flex: 1 1 auto; min-height: 0; }

/* Our own minimalist legend (mailbox swatch + name) under the Volume / Mailboxes charts. */
.mail-stats-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 9px;
    padding: 4px 4px 1px;
    flex-shrink: 0;
}
.mail-stats-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.58rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.mail-stats-legend-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.mail-stats-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Top-domains: clickable horizontal bars (proportional fill behind the label). */
.mail-stats-domains { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mail-stats-dom {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    text-align: left;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
}
.mail-stats-dom:hover { background: var(--mud-palette-action-default-hover); }
.mail-stats-dom-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--mud-palette-primary);
    opacity: 0.14;
    border-radius: 6px;
    z-index: 0;
}
.mail-stats-dom-name  { position: relative; z-index: 1; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
.mail-stats-dom-count { position: relative; z-index: 1; font-size: 0.75rem; font-weight: 600; color: var(--mud-palette-text-secondary); }

/* Unread-aging rows: same bar layout as domains but static (no click) and colour-coded by bucket. */
.mail-stats-age { cursor: default; }
.mail-stats-age:hover { background: transparent; }
.mail-stats-age .mail-stats-dom-bar { opacity: 0.22; }
.mail-stats-age--today .mail-stats-dom-bar { background: var(--mud-palette-primary); }
.mail-stats-age--week  .mail-stats-dom-bar { background: var(--mud-palette-warning); }
.mail-stats-age--older .mail-stats-dom-bar { background: var(--mud-palette-text-secondary); }

/* ── Favorites panel (bottom tab: 30/70 master-detail) ─────────────────────── */
.mail-bottom-body { padding: 0; }
.mail-fav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; }
.mail-fav-left {
    flex: 0 0 40%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--mud-palette-lines-default);
}
/* Fixed min-rating filter (5 primary stars) above the scrolling favorites list. min-height matches the
   right-side correspondence header so the two columns' content start on the same line. */
.mail-fav-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    min-height: 44px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}
.mail-fav-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
.mail-fav-right { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mail-fav-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 12px;
}

/* Left list rows */
.mail-fav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.mail-fav-item:hover  { background: var(--mud-palette-action-default-hover); }
.mail-fav-item.active { background: var(--mud-palette-primary-hover); }
.mail-fav-avatar {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.8rem; font-weight: 700;
}
.mail-fav-info { flex: 1 1 auto; min-width: 0; }
.mail-fav-name { display: flex; align-items: center; gap: 6px; }
.mail-fav-nametext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; font-weight: 600; }
.mail-fav-unread {
    flex-shrink: 0;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 9px;
    font-size: 0.62rem; font-weight: 700;
    padding: 0 6px;
}
.mail-fav-sub { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.mail-fav-stars { color: #F5B301; font-size: 0.90rem; letter-spacing: 1px; }
.mail-fav-time { margin-left: auto; font-size: 0.66rem; color: var(--mud-palette-text-secondary); }

/* Right correspondence */
.mail-fav-corr-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    min-height: 44px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}
.mail-fav-corr-title { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.mail-fav-corr-email { font-size: 0.72rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-fav-corr-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
.mail-fav-corr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}
/* Zebra striping — subtle, theme-aware; hover still wins. */
.mail-fav-corr-row:nth-child(even) { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.mail-fav-corr-row:hover { background: var(--mud-palette-action-default-hover); }
.mail-fav-corr-main { flex: 1 1 auto; min-width: 0; }
.mail-fav-corr-subject { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-fav-corr-row.unread .mail-fav-corr-subject { font-weight: 700; }
.mail-fav-corr-snippet { font-size: 0.72rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-fav-corr-date { flex-shrink: 0; font-size: 0.7rem; color: var(--mud-palette-text-secondary); }

/* Dashboard "Pinned" tab — a full-width scrolling list of pinned emails (rows reuse .mail-fav-corr-*). */
.mail-pinned { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.mail-pinned-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }

/* When-mail-arrives heatmap (weekday × hour). GitHub-contribution style: cell fill = relative volume. */
.mail-heat { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; }
.mail-heat-grid {
    display: grid;
    grid-template-columns: auto repeat(24, minmax(7px, 1fr));
    gap: 2px;
    width: 100%;
    align-items: center;
}
.mail-heat-rowlabel {
    font-size: 0.6rem;
    color: var(--mud-palette-text-secondary);
    padding-right: 6px;
    text-align: right;
    white-space: nowrap;
}
.mail-heat-cell {
    aspect-ratio: 1 / 1;
    min-height: 9px;
    border-radius: 2px;
    background: var(--mud-palette-action-default-hover);   /* empty-hour base */
}
.mail-heat-cell:hover { outline: 1px solid var(--mud-palette-primary); }
.mail-heat-hourlabel {
    font-size: 0.5rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    padding-top: 2px;
}

.mail-cards {
    container-type: inline-size;   /* cards reflow to the LIST width (reacts to the reading pane) */
    flex: 1 1 auto;                /* fill the main area (no fixed height → no bottom gap) */
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.mail-cards-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px;
}

.mail-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    user-select: none;
}

.mail-card:hover { background: var(--mud-palette-action-default-hover); }
.mail-card.sel   { background: var(--mud-palette-primary-hover); }
.mail-card.active {
    background: var(--mud-palette-primary-hover);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);   /* full 1px border, no layout shift */
}

.mail-card-lead {
    display: flex;
    flex-direction: column;   /* checkbox on top, the three-dots menu button below it */
    align-items: center;
    gap: 2px;
    padding-top: 2px;
}

.mail-card-menu {
    color: var(--mud-palette-text-secondary);
}

/* Checkbox is always shown (a hover-only checkbox shifts the card content sideways because it and the
   bullet differ in width). The inbox-color bullet sits next to it. */
.mail-card-check { margin: 0; }

.mail-card-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.mail-card-bullet.sm { width: 8px; height: 8px; }

.mail-card-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mail-card-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mail-card-from {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    color: var(--mud-palette-text-primary);
}
.mail-card.unread .mail-card-from { font-weight: 700; }

/* Favorite-sender ★ badge (gold star + rating) on a card's top line. */
.mail-card-fav {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: #F5B301;
    line-height: 1;
}
.mail-card-fav .mud-icon-root { color: #F5B301; }
/* Center the digit in the same 14px box as the star so they line up vertically (the raw glyph otherwise
   sits high in its line box while the icon is box-centered). */
.mail-card-fav-n { display: inline-flex; align-items: center; height: 14px; line-height: 1; }

.mail-card-date {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.mail-card-subject {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}
.mail-card.unread .mail-card-subject { font-weight: 600; }
.mail-card-subject-text { overflow-wrap: anywhere; }
/* Read (already-seen) subjects are de-emphasized vs. the bold unread ones. */
.mail-card:not(.unread) .mail-card-subject-text {
    opacity: 0.9;
    font-weight: 400;
    font-style: italic;
    font-size: 0.9em;
}

.mail-card-snippet {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mail-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.mail-card-mailbox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* Which mailbox folder the message lives in (Inbox / Spam / …) — sits beside the mailbox label so you know
   where to go look for it. Subtle chip so it reads as metadata, not an action. */
.mail-card-folder {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    border-radius: 8px;
    padding: 0 6px;
    line-height: 1.6;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-card-trail {
    display: flex;
    flex-direction: row;
    align-items: center;     /* labels and pin sit in the same row, pinned to the far right */
    justify-content: flex-end;
    gap: 6px;
}

.mail-card-labels {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 110px;
}

/* Narrow list (reading pane open / small screen): tighten and clamp the snippet to one line. */
@container (max-width: 460px) {
    .mail-card { gap: 8px; padding: 8px 10px; }
    .mail-card-snippet { -webkit-line-clamp: 1; }
    .mail-card-trail { align-self: center; }
}

/* Focusable wrapper for keyboard list nav. It must inherit the flex-child role the grid/card previously had
   as a direct child of .mail-main-paper — the card list scrolls via `flex:1 1 auto; min-height:0` and would
   otherwise have no bounded height (breaking wheel scroll). So the wrapper is itself a filling flex column. */
.mail-list-key {
    outline: none;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Active (previewed / cursor) row highlight — distinct from checkbox multi-selection ── */
.mail-row-active > td {
    background-color: var(--mud-palette-primary-hover) !important;
    /* Top + bottom edge on every cell; the left/right edges are added on the end cells below, so the
       whole row gets a continuous 1px border with no layout shift (box-shadow, not border). */
    box-shadow: inset 0 1px 0 var(--mud-palette-primary), inset 0 -1px 0 var(--mud-palette-primary);
}
.mail-row-active > td:first-child {
    box-shadow: inset 0 1px 0 var(--mud-palette-primary), inset 0 -1px 0 var(--mud-palette-primary), inset 1px 0 0 var(--mud-palette-primary);
}
.mail-row-active > td:last-child {
    box-shadow: inset 0 1px 0 var(--mud-palette-primary), inset 0 -1px 0 var(--mud-palette-primary), inset -1px 0 0 var(--mud-palette-primary);
}

/* ── Custom multi-column right-click context menu (report-designer style) ── */
.mail-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.mail-ctx {
    position: fixed;
    z-index: 1401;
    display: flex;
    align-items: stretch;
    background: var(--mud-palette-surface);
    /* The popover is a fixed element outside any MudPaper, so set the theme text color explicitly —
       otherwise MudBlazor content that inherits it (the "Create rule" MudCheckBox label) falls back to
       near-black and is invisible in dark mode. */
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
    overflow: hidden;
    animation: mail-ctx-in .1s ease-out;
}

@keyframes mail-ctx-in {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.mail-ctx-col {
    display: flex;
    flex-direction: column;
    min-width: 172px;
    max-width: 220px;
    padding: 6px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mail-ctx-col:last-child { border-right: none; }

.mail-ctx-col--muted { background: var(--mud-palette-action-default-hover); opacity: .85; }

.mail-ctx-header {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    padding: 4px 8px 7px;
}

/* The folder list fills whatever height the menu already has, instead of a fixed cap that left dead space
   above the "Create rule" footer (the columns stretch to the tallest one, so that space was already paid for).
   flex-basis 0 is the point: with `auto` the list's own content height would push the column — and the whole
   menu — taller on a mailbox with many folders. At 0 it contributes nothing to the natural height, takes only
   the leftover, and scrolls inside it. The footer then sits on the bottom edge on its own. */
.mail-ctx-scroll {
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
}

.mail-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    user-select: none;
}

.mail-ctx-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-ctx-item:hover { background: var(--mud-palette-action-default-hover); }

.mail-ctx-item--danger:hover { background: rgba(244, 67, 54, .14); }

/* "New folder: <sender>" — visually distinct from the existing-folder rows below it. */
.mail-ctx-item--accent {
    color: var(--mud-palette-primary);
    font-style: italic;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    margin-bottom: 2px;
}

.mail-ctx-empty {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    padding: 8px;
}

/* Thin divider + small sub-heading used to group items within a single context-menu column. */
.mail-ctx-sep {
    height: 1px;
    background: var(--mud-palette-lines-default);
    margin: 4px 6px;
}

/* Favorite-sender row (star rating) in the context menu — like an item but not clickable-to-close. */
.mail-ctx-fav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    user-select: none;
}

.mail-ctx-subhead {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    padding: 2px 8px 4px;
}

.mail-ctx-rulecheck {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 4px;
    padding: 6px 4px 2px;
    font-size: 0.8rem;
}

/* Safety: force the "Create rule" MudCheckBox label to the theme text color inside the popover. */
.mail-ctx .mud-checkbox,
.mail-ctx .mud-checkbox label {
    color: var(--mud-palette-text-primary);
}

/* Expand/collapse caret for nested folders. */
.mail-nav-caret {
    cursor: pointer;
    opacity: .6;
    flex-shrink: 0;
}

@media (hover: hover) {
    .mail-nav-caret:hover { opacity: 1; }
}

@media (hover: none) {
    .mail-nav-caret { opacity: 1; }   /* touch: fully visible + no hover-tap interception */
}

.mail-nav-caret-spacer {
    display: inline-block;
    width: 20px;
    flex-shrink: 0;
}

/* Linked-record chips in the reader: the ✕ is our own (not MudChip's OnClose) so it can stop propagation —
   the chip body opens the record, the ✕ only unlinks. Dim until hovered so it reads as secondary. */
.mail-link-x {
    cursor: pointer;
    opacity: .55;
    border-radius: 50%;
    line-height: 0;
    transition: opacity .12s ease, background-color .12s ease;
}
.mail-link-x:hover {
    opacity: 1;
    background-color: var(--mud-palette-action-default-hover);
}

/* Context menu → BUSINESS zone (bottom of the Rules column).
   Anchored to the bottom (margin-top:auto) so it sits in the same place whatever the rules above render,
   and bled to the column's edges (negative margins cancel .mail-ctx-col's 6px padding) so it reads as a
   band rather than a floating box. The tint is the theme's own hover token — deliberately NOT a hardcoded
   darker colour, which would invert wrongly in dark mode. */
.mail-ctx-biz {
    margin: auto -6px -6px;
    padding: 4px 6px 6px;
    background: var(--mud-palette-action-default-hover);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom-right-radius: inherit;
}

/* Context menu → BUSINESS: chips for what the right-clicked message is already linked to. Wraps inside the
   column's 220px cap (hence number-only labels; the type lives in the tooltip). */
.mail-ctx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 4px 2px;
}

/* ── Linked-record chips (grid Labels column + card bottom-right) ─────────────── */
.mail-grid-links {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
}
.mail-card-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;   /* the user asked for bottom, aligned right */
    gap: 3px;
    margin-top: 4px;
}
.mail-grid-linkchip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 0 6px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    border-radius: 9px;
    cursor: pointer;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    border: 1px solid var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .12s ease;
}
.mail-grid-linkchip:hover { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

/* ── Email Management (admin) ─────────────────────────────────────────────── */
.mailmgmt-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 4px 0;
}
.mailmgmt-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    flex: 1 1 180px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}
.mailmgmt-kpi-body { min-width: 0; }
.mailmgmt-kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.mailmgmt-kpi-label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mailmgmt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ── New-mail banner (auto-refresh, notify mode) ──────────────────────────── */
.mail-newmail-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: filter .12s ease;
}
.mail-newmail-banner:hover { filter: brightness(1.08); }