/*
 * Email Queue Administration Page.
 *
 * Layout only. The table keeps the application's own table-jlp styling; everything here is either
 * the fixed column layout or the truncation that keeps one long value from deciding the shape of
 * the whole grid.
 */

/*
 * Fixed layout is what makes the column widths mean anything. Without it the browser negotiates
 * widths from content, so one row carrying forty recipients or a long template path would set the
 * width of every row.
 */
.table-emailqueue {
    table-layout: fixed;
    width: 100%;
}

/*
 * One line per cell, ellipsis when it does not fit. This is what keeps rows a single line tall:
 * a wrapped recipient list or template path was the only thing making them taller.
 */
.table-emailqueue > tbody > tr > td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.table-emailqueue > thead > tr > th {
    white-space: nowrap;
}

/* The date must never break across lines, whatever the column has been squeezed to. */
.table-emailqueue > tbody > tr > td:nth-child(4) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/*
 * Recipients: the address truncates, the overflow count does not. Flex on the inner span rather
 * than on the cell itself, because a flex table cell stops participating in the fixed layout.
 */
.emailqueue-recipients {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.emailqueue-recipients-first {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Never shrink and never wrap: the count is the affordance that says there is more to see. */
.emailqueue-recipients-more {
    flex: 0 0 auto;
    cursor: help;
}

.emailqueue-filters {
    margin-bottom: 10px;
}

.emailqueue-filters .control-label {
    margin-right: 6px;
}

.emailqueue-filters .js-emailqueue-window-note {
    margin-left: 10px;
}

/* ---- The detail modal ---- */

/*
 * Previous and Next are navigation, not actions on this Item, so they sit at the far end of the
 * footer away from Resend and Close. Bootstrap's .modal-footer already clears its own floats.
 */
.emailqueue-steps {
    margin-right: 10px;
}

.emailqueue-status {
    margin-left: 6px;
    vertical-align: middle;
}

/*
 * Layout is Bootstrap's own rows and columns; only the label column and the spacing live here.
 *
 * The labels are h5 elements, the same element the Body and Attachments headings use, so they get
 * whatever the theme gives an h5 rather than an approximation of it. All that has to come off is
 * the heading margin: these sit in flex rows, and 10px either side would undo the density.
 */
.emailqueue-label {
    margin: 0;
    padding: 0;
    flex: 0 0 60px;
}

.emailqueue-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 3px;
    min-width: 0;
}

.emailqueue-meta,
.emailqueue-people {
    margin-bottom: 4px;
}

.emailqueue-subject {
    margin-bottom: 10px;
}

/*
 * A recipient list has no upper bound - a workshop notice can carry hundreds of blind copies - and
 * an unbounded one grows the modal until its footer leaves the screen. Five addresses show and the
 * rest scroll in place, so the block costs the same height whether it holds two or two hundred.
 */
.emailqueue-addresses {
    max-height: 7.5em;
    overflow-y: auto;
    min-width: 0;
    word-break: break-word;
}

.emailqueue-more {
    color: #777;
    font-size: 12px;
    white-space: nowrap;
}

/*
 * The body gets what the blocks above gave up. Sized against the viewport so a tall window shows
 * more of the message, with a floor so a short one still shows something useful.
 */
.emailqueue-body {
    width: 100%;
    height: 22vh;
    min-height: 150px;
    border: 1px solid #ddd;
    background: #fff;
}

/*
 * Attempt results keep a cap of their own: the field grows by a block of text on every delivery
 * attempt, so an Item retried for weeks would otherwise bury everything above it.
 *
 * Line breaks are kept by the stylesheet rather than by substituting <br> into the value, so the
 * page never builds markup out of stored data.
 */
.emailqueue-attempt-results {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow: auto;
    font-size: 12px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    padding: 8px;
}

.emailqueue-attachments {
    margin-bottom: 0;
}