/* Edit Email Allowlist — a ModalWindow subclass, see email_allow_list_modal.js */

.email-allow-list-modal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #1a1a1a;
}

/* ── Forwarding address ──────────────────────────────────────────────────────────────────────── */

/* Tinted and bar-anchored rather than another grey box: it's the one value on this screen the user
   came here to read or copy, so it shouldn't be the same weight as the chrome around it. */
.email-allow-list-modal__forwarding {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: #edf6f6;
    border: 1px solid #cbe4e4;
    border-radius: 8px;
}

.email-allow-list-modal__forwarding-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4f7c7c;
    flex: 0 0 auto;
}

.email-allow-list-modal__address {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #12595a;
    word-break: break-all;
}

/* The organisation address sits directly under the personal one. Same card, dimmer border, so the
   pair reads as one block rather than two competing announcements. */
.email-allow-list-modal__forwarding--org {
    margin-top: 8px;
    background: #f4f9f9;
    border-style: dashed;
}

.email-allow-list-modal__copy-btn,
.email-allow-list-modal__copy-org-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 14px;
    color: #1a7f7f;
    /* Solid rather than a bare icon: on the tinted card a transparent button reads as decoration,
       and this is the control most people open this modal to use. */
    background: #ffffff;
    border: 1px solid #bcdcdc;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.email-allow-list-modal__copy-btn:hover,
.email-allow-list-modal__copy-org-btn:hover {
    background: #1a7f7f;
    border-color: #1a7f7f;
    color: #ffffff;
}

.email-allow-list-modal__copy-btn:active,
.email-allow-list-modal__copy-org-btn:active {
    transform: scale(0.92);
}

/* ── List (table + the add row fused to the bottom of it) ────────────────────────────────────── */

/* One bordered box around both, so the add row reads as the last row of the table rather than as a
   separate control that happens to sit underneath it. */
.email-allow-list-modal__list {
    margin-top: 18px;
    border: 1px solid #d3dade;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 34, 40, 0.07);
}

.email-allow-list-modal__add-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    padding: 10px;
    background: #eef2f4;
    border-top: 1px solid #d3dade;
}

.email-allow-list-modal__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 13px;
    font-size: 14px;
    border: 1px solid #c6d0d6;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    background: #ffffff;
    color: #1a1a1a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.email-allow-list-modal__input:focus {
    border-color: #1a7f7f;
    box-shadow: 0 0 0 3px rgba(26, 127, 127, 0.12);
}

/* Only rendered for an org admin or above — everyone else can add to their own list only, and a
   dropdown with one option in it is worse than no dropdown. */
.email-allow-list-modal__scope-select {
    flex: 0 0 auto;
    max-width: 220px;
    padding: 9px 11px;
    font-size: 14px;
    border: 1px solid #c6d0d6;
    border-radius: 6px;
    background: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
}

.email-allow-list-modal__scope-select:focus {
    outline: none;
    border-color: #1a7f7f;
    box-shadow: 0 0 0 3px rgba(26, 127, 127, 0.12);
}

/* A labelled button rather than a bare glyph: it's the one thing in this row that commits an action,
   and a lone "+" the size of a text character reads as a decoration sitting next to the dropdown. */
.email-allow-list-modal__add-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: #1a7f7f;
    border: 1px solid #1a7f7f;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 34, 40, 0.14);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.email-allow-list-modal__add-btn i {
    font-size: 12px;
}

.email-allow-list-modal__add-btn:hover {
    background: #15706f;
    border-color: #15706f;
    box-shadow: 0 2px 5px rgba(16, 34, 40, 0.18);
}

.email-allow-list-modal__add-btn:active,
.email-allow-list-modal__add-btn--pressed {
    transform: scale(0.96);
    background: #15706f;
    border-color: #15706f;
    box-shadow: 0 1px 1px rgba(16, 34, 40, 0.2);
}

/* A tinted strip rather than loose red text under the box — it has to read as a reply to what was
   just typed, not as a stray line of prose floating between the list and the Save button. */
.email-allow-list-modal__error {
    font-size: 13px;
    color: #b42318;
    background: #fdf1f0;
    border: 1px solid #f6d4d1;
    border-radius: 6px;
    padding: 9px 12px;
    margin: 10px 0 0 0;
}

/* ── Table ───────────────────────────────────────────────────────────────────────────────────── */

/* The scroller. The border and radius live on .email-allow-list-modal__list so the add row sits
   inside them.
   The min-height is what stops the modal jumping: without it the first add grows the whole window
   under the user's cursor, and the Save button they were about to press moves. It's set to roughly
   header + two and a half rows, so the common case (a default row and one or two of their own) has
   somewhere to grow into. */
.email-allow-list-modal__table-wrap {
    min-height: 152px;
    max-height: 300px;
    overflow-y: auto;
    /* Three columns don't fit a phone; let the table scroll sideways rather than crushing the
       address column into one character per line. */
    overflow-x: auto;
    background: #fafafa;
}

.email-allow-list-modal__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.email-allow-list-modal__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4a5761;
    background: #dfe6ea;
    border-bottom: 1px solid #cbd4da;
    padding: 10px 14px;
    white-space: nowrap;
}

/* Ruled columns, not just rows — three columns of mixed content read as a grid rather than as
   loose text once the boundaries are drawn. */
.email-allow-list-modal__table th:not(:last-child) {
    border-right: 1px solid #cbd4da;
}

.email-allow-list-modal__table td:not(:last-child) {
    border-right: 1px solid #e7ecef;
}

.email-allow-list-modal__table th:last-child {
    text-align: center;
}

.email-allow-list-modal__cell-actions {
    text-align: center;
}

.email-allow-list-modal__table td {
    padding: 9px 14px;
    background: #ffffff;
    border-bottom: 1px solid #e7ecef;
    vertical-align: middle;
    line-height: 1.3;
    /* Anchors the flash overlay (.email-allow-list-modal__row--flash td::after). */
    position: relative;
}

/* Every control in a cell is centred on the line rather than sat on its baseline. On the baseline
   the cell reserves a descender's worth of space underneath the control as well, so a row holding a
   button ended up visibly taller than one holding only text — and rows have to be the same height
   whatever they happen to contain. */
.email-allow-list-modal__badge,
.email-allow-list-modal__scope-control,
.email-allow-list-modal__remove-btn {
    vertical-align: middle;
}

.email-allow-list-modal__table tr:last-child td {
    border-bottom: none;
}

.email-allow-list-modal__row:hover td {
    background: #f6fafa;
}

/* The address column absorbs all of the table's slack, which leaves the two beside it free to size
   to their contents. Without this the browser shares the width out and squeezes the scope dropdown,
   which clips its longest option rather than wrapping it. */
.email-allow-list-modal__table th:first-child,
.email-allow-list-modal__cell-email {
    width: 100%;
}

.email-allow-list-modal__cell-email {
    word-break: break-all;
    font-weight: 500;
    color: #1a1a1a;
}

.email-allow-list-modal__cell-scope {
    white-space: nowrap;
}

/* Graded by reach: the wider an address is allowed, the louder its badge. "Me" and "Default" are
   both one person, so they stay quiet; the organisation one is the answer that should catch the eye
   when you're scanning for what everyone can send you. */
.email-allow-list-modal__badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.email-allow-list-modal__badge--default {
    background: #eef1f3;
    border-color: #d8dfe4;
    color: #56626c;
}

.email-allow-list-modal__badge--personal {
    background: #e8f4f4;
    border-color: #b9dcdc;
    color: #17696a;
}

.email-allow-list-modal__badge--organisation {
    background: #1a7f7f;
    border-color: #1a7f7f;
    color: #ffffff;
}

/* For anyone allowed to edit the organisation's list the cell is a dropdown, not a label. It wears
   the badge's pill shape and colours so the column still scans as a column of states — the chevron
   and the hover are what say it can be changed. */
.email-allow-list-modal__scope-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* The browser's own arrow can't be recoloured and would stay dark on the filled organisation pill,
   so the select gives its up and a sibling icon takes over. */
.email-allow-list-modal__scope-picker {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 30px 5px 12px;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.email-allow-list-modal__scope-picker:focus {
    outline: 2px solid rgba(26, 127, 127, 0.45);
    outline-offset: 1px;
}

/* The option list is drawn by the OS, which won't inherit a transparent colour. */
.email-allow-list-modal__scope-picker option {
    color: #1a1a1a;
    background: #ffffff;
}

.email-allow-list-modal__scope-control i {
    position: absolute;
    right: 10px;
    font-size: 9px;
    opacity: 0.65;
    /* The select underneath owns the click. */
    pointer-events: none;
}

.email-allow-list-modal__scope-control:hover i {
    opacity: 1;
}

.email-allow-list-modal__scope-control--default {
    background: #eef1f3;
    border-color: #d8dfe4;
    color: #56626c;
}

.email-allow-list-modal__scope-control--default:hover {
    background: #e1e6ea;
    border-color: #c2ccd3;
}

.email-allow-list-modal__scope-control--personal {
    background: #e8f4f4;
    border-color: #b9dcdc;
    color: #17696a;
}

.email-allow-list-modal__scope-control--personal:hover {
    background: #d7eded;
    border-color: #97cbcb;
}

.email-allow-list-modal__scope-control--organisation {
    background: #1a7f7f;
    border-color: #1a7f7f;
    color: #ffffff;
}

.email-allow-list-modal__scope-control--organisation:hover {
    background: #15706f;
    border-color: #15706f;
}

/* Added or changed but not yet stored. Back to normal once it saves — the diff empties, so the row
   simply re-renders without this.
   The :hover rule is here because .email-allow-list-modal__row:hover td above outranks a plain class
   selector, and without it hovering a staged row would wash the tint away. */
.email-allow-list-modal__row--added td {
    background: #eaf6f6;
}

.email-allow-list-modal__row--added:hover td {
    background: #e0f0f0;
}


.email-allow-list-modal__empty td {
    text-align: center;
    color: #888888;
    font-size: 13px;
    padding: 22px 10px;
    font-style: italic;
}

.email-allow-list-modal__remove-btn {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #5c6770;
    background: #f4f6f8;
    border: 1px solid #d3dade;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.email-allow-list-modal__remove-btn:hover {
    background: #fdecec;
    border-color: #eda9a4;
    color: #b42318;
}

.email-allow-list-modal__remove-btn:active {
    transform: scale(0.95);
}

/* A row that was just added. The cells open out from flat rather than the row snapping into
   existence: padding carries the height, opacity and the small lift carry the arrival. Nothing here
   needs a wrapper element or a measured height, so it can't clip a wrapped address.
   The class is never taken off again, and doesn't need to be — the animation fills forwards to
   values identical to the base ones, so a row that has finished arriving is indistinguishable from
   one that was always there. */
.email-allow-list-modal__row--entering td {
    animation: emailAllowListRowEnter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes emailAllowListRowEnter {
    from {
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        /* Must track the padding on .email-allow-list-modal__table td — the animation fills forwards,
           so a mismatch leaves the row it played on a different height to every other row. */
        padding-top: 9px;
        padding-bottom: 9px;
        transform: translateY(0);
    }
}

/* A row a scripted add just created (or pointed at) — see EmailAllowListModal.scriptedAdd. It has to
   read as "this just happened", so it glows rather than merely appearing.
   The glow rides on an overlay rather than on the cell itself, so it settles back into whatever the
   row normally looks like (unsaved, plain) with nothing left to snap back — and, more importantly,
   so it isn't competing with the entry animation above for the cell's single `animation` property.
   A scripted add plays both at once, and one rule would otherwise silently win.
   Delayed by the length of the entry animation so a brand new row finishes arriving before it
   glows; a row that was already there has nothing to wait for, but a fifth of a second of stillness
   costs it nothing. */
.email-allow-list-modal__row--flash td::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Sits over the cell contents to tint them, so it must not swallow the Remove button. */
    pointer-events: none;
    animation: emailAllowListRowFlash 2.2s ease 0.24s both;
}

@keyframes emailAllowListRowFlash {
    0% {
        background: rgba(26, 127, 127, 0.22);
    }
    30% {
        background: rgba(26, 127, 127, 0.2);
    }
    60% {
        background: rgba(26, 127, 127, 0.12);
    }
    100% {
        background: rgba(26, 127, 127, 0);
    }
}

/* ── Save ────────────────────────────────────────────────────────────────────────────────────── */

.email-allow-list-modal__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* On show from the moment the modal opens — greyed out until there's something to save, so the modal
   doesn't change height the first time a row is added or removed, and it's clear up front how a
   change gets committed. */
.email-allow-list-modal__save-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* After a scripted add the change is staged, not stored — the Save button says so itself. */
.email-allow-list-modal__save-btn--attention {
    animation: emailAllowListSavePulse 1.6s ease-in-out 3;
}

@keyframes emailAllowListSavePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 127, 127, 0);
    }
    45% {
        box-shadow: 0 0 0 5px rgba(26, 127, 127, 0.22);
    }
}

@media (max-width: 600px) {
    .email-allow-list-modal__table-wrap {
        max-height: 240px;
    }

    /* The add row runs out of width long before the table does: give the input its own line and let
       the scope picker and the Add button share the one below it. */
    .email-allow-list-modal__add-row {
        flex-wrap: wrap;
    }

    .email-allow-list-modal__input {
        flex: 1 1 100%;
    }

    .email-allow-list-modal__scope-select {
        flex: 1 1 auto;
        max-width: none;
    }
}