/* ==========================================================================
   Email.aspx — Compose Email re-skin
   Figma: file oM4wJDLxiHlaKMCy6GvTXs, node 247:37447 (Compose Email, 833x767).
   Scoped to body.page-email-compose (set by Default.master.cs on /Email.aspx).

   Live page renders DesktopModules/Q88/Email.ascx inside <uc:ModuleTemplate>
   (cpEmail). Tokens follow Figma vars: bg #fff, border var(--border-default), primary
   teal var(--brand-primary), muted var(--surface-muted), foreground var(--text-primary), muted-fg var(--text-muted).

   Re-uses the UltimateEditor toolbar pattern from offlineQuestionnaireBulkEmail.css
   but matches by the Email control's editor instance id (UltimateEditor1).
   ========================================================================== */

/* --- Page-level: kill DNN/ContentPane caps so the card centers --------- */
body.page-email-compose .ContentPane,
body.page-email-compose .ContentPaneBody,
body.page-email-compose #ctl00_cphMiddle,
body.page-email-compose #cphMiddle_ctl00_divWrap,
body.page-email-compose .MainTableContent {
    background: transparent !important;
    background-color: transparent !important;
}

body.page-email-compose .q88-content {
    position: relative;
    isolation: isolate;
}

/* --- Card chrome (modContainerStd) ------------------------------------- */

body.page-email-compose [id$="cpEmail_divMod"].modContainerStd {
    background: var(--surface-raised);
    border: 0;
    border-radius: 12px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.10),
        0 1px 2px -1px rgba(0, 0, 0, 0.10);
    margin: 24px auto;
    max-width: 833px;
    width: calc(100% - 96px) !important;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden; /* clip rounded corners */
}

body.page-email-compose [id$="cpEmail_divMod"].modContainerStd > tbody > tr > td {
    padding: 0 !important;
    vertical-align: top;
    border: 0;
}

body.page-email-compose [id$="cpEmail_divMod"] .modInnerContainer {
    padding: 0;
    background: transparent;
    border: 0;
}

body.page-email-compose [id$="cpEmail_divMod"] .modMain {
    padding: 0;
    background: transparent;
    border: 0;
}

/* --- Header (modTitle = "Compose Email") ------------------------------- */

body.page-email-compose [id$="cpEmail_divMod"] .modTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Header internal pad 24/24/12/24 + outer gap-6 (24) between Compose
       Email's 4 sections per Figma 247:37447 (flex-col gap-6 root). Sum
       in padding-bottom: 12 + 24 = 36. */
    padding: 24px 24px 36px 24px;
    border: 0;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-height: 16px;
}

body.page-email-compose [id$="cpEmail_divMod"] .modTLeft {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    padding: 0;
    background: transparent;
    border: 0;
    flex: 0 0 auto;
    /* Strip the legacy ImageManager icon wrapping that prefixes the title */
}

/* Hide the legacy ImageIcon="Email" envelope image rendered before the
   title text. Figma shows only the words "Compose Email" at the top. */
body.page-email-compose [id$="cpEmail_divMod"] .modTLeft img {
    display: none !important;
}

body.page-email-compose [id$="cpEmail_divMod"] .modTRight {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    flex: 0 0 auto;
}

/* --- Form table (#Table1: To/Cc/Bcc/Subject) inside modMain ------------ */
/* The form lives in a specific table id="Table1". Scope rules tightly to
   that ID so we don't bleed into the trDocs/tblAttachments table OR the
   UltimateEditor's nested EditorContainer/EditorToolbar tables. */

body.page-email-compose [id$="cpEmail_divMod"] .modMain > table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

/* The wrapper TD that holds #Table1 — give the 24px horizontal inset there */
body.page-email-compose [id$="cpEmail_divMod"] .modMain > table > tbody > tr:first-child > td {
    padding: 0 24px !important;
    background: transparent;
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody {
    display: contents;
}

/* Field rows: each <tr> becomes a flex row, label left + input right */
body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr > td {
    display: block;
    padding: 0 !important;
    border: 0;
    vertical-align: top;
    background: transparent;
    height: auto;
    width: auto;
}

/* Label cell (To / Cc / Bcc / Subject) — strip the legacy colon by
   collapsing the cell's text node (font-size:0) and inject a clean label
   via ::before. Restore font-size on children (validators) so they render
   when shown. */
body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr > td:first-child {
    flex: 0 0 61px;
    width: 61px !important;
    padding: 8px 0 0 0 !important;
    text-align: left;
    background: transparent;
    box-sizing: border-box;
    font-size: 0 !important; /* collapse the "To:" text node */
    line-height: 0;
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr > td:first-child > * {
    font-size: 14px;
    line-height: 20px;
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr > td:first-child::before {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-primary);
    vertical-align: top;
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr:has([id$="_txtTo"]) > td:first-child::before {
    content: 'To';
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr:has([id$="_txtCC"]) > td:first-child::before {
    content: 'Cc';
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr:has([id$="_txtBCC"]) > td:first-child::before {
    content: 'Bcc';
}

body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr:has([id$="_txtSubject"]) > td:first-child::before {
    content: 'Subject';
}

/* Strip the legacy Required validator inline display (validators are
   `Display="Dynamic"` — they go visible on validation; restore visibility
   at that point. Keep them on a new line below the label. */
body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr > td:first-child .q88-text-error {
    display: block;
    font-size: 12px;
    line-height: 16px;
    margin-top: 4px;
    color: var(--red-600);
}

/* The autocomplete dropdown lives inside the label TD as well. Hide its
   default display:none style; when it shows (display:block via JS), it
   becomes a popup positioned absolutely. We don't need to style it here. */

/* Control cell — grows */
body.page-email-compose [id$="cpEmail_divMod"] #Table1 > tbody > tr > td:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* --- Textarea + input chrome (To/Cc/Bcc/Subject) ----------------------- */

body.page-email-compose [id$="cpEmail_divMod"] textarea.NormalTextBox,
body.page-email-compose [id$="cpEmail_divMod"] input.NormalTextBox[type="text"],
body.page-email-compose [id$="cpEmail_divMod"] input.NormalTextBox:not([type]) {
    flex: 1 1 auto;
    width: 100% !important;
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    padding: 8px 12px;
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-primary) !important;
    overflow: auto;
    resize: none;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.page-email-compose [id$="cpEmail_divMod"] textarea.NormalTextBox:focus,
body.page-email-compose [id$="cpEmail_divMod"] input.NormalTextBox:focus {
    border-color: #64748b !important;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15);
}

body.page-email-compose [id$="cpEmail_divMod"] textarea.NormalTextBox::placeholder,
body.page-email-compose [id$="cpEmail_divMod"] input.NormalTextBox::placeholder {
    color: var(--text-muted);
}

/* --- Address-book icon swap (BookOpen) --------------------------------- */
/* `<input type="image" src="addressbook.gif">` — hide the original raster
   via filter:opacity-trick + paint a Lucide BookOpen via background-image.
   Keep click target (so the AddressBook modal still opens). */

body.page-email-compose [id$="cpEmail_divMod"] input[type="image"][id$="_imgBtnTo"],
body.page-email-compose [id$="cpEmail_divMod"] input[type="image"][id$="_imgBtnCC"] {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
    padding: 0;
    margin: 10px 0 0 0; /* center vertically against 36h input */
    border: 0;
    background: transparent !important;
    background-image: none !important;
    cursor: pointer;
    /* Hide the gif content but keep hitbox; the mask paints the new icon */
    background-color: var(--text-muted) !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7v14'/><path d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7v14'/><path d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/></svg>");
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    /* filter:brightness(0) collapses raster pixels to black, mask clips to icon */
    filter: brightness(0);
}

body.page-email-compose [id$="cpEmail_divMod"] input[type="image"][id$="_imgBtnTo"]:hover,
body.page-email-compose [id$="cpEmail_divMod"] input[type="image"][id$="_imgBtnCC"]:hover {
    background-color: var(--brand-primary) !important;
}

/* --- Subject row: input is single-line, height 32-35 ------------------- */
body.page-email-compose [id$="cpEmail_divMod"] input.NormalTextBox[id$="_txtSubject"] {
    height: 36px;
    min-height: 36px;
}

/* --- Attachments row (trDocs) ------------------------------------------ */
/* Kill the legacy grey strip and the nested table padding. */

body.page-email-compose [id$="cpEmail_divMod"] [id$="_trDocs"] > td {
    background-color: transparent !important;
    background: transparent !important;
    padding: 0 24px !important;
}

body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments {
    width: 100% !important;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
    /* 24px gap to next section (Body / Toolbar) per Figma outer gap-6.
       The 12px intra-section gap-3 ended after the last field row above
       (Attachments is the LAST child of Frame 4), so the gap below it
       jumps from 12 (intra) to 24 (outer). */
    margin: 0 0 24px 0;
}

body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody {
    display: contents;
}

/* The single legacy row becomes a VERTICAL STACK (Figma 616:8114):
     row 1 — "Attachments" label (left) + "ZIP all files" checkbox (right)
     row 2 — file list (full width, one file per line)
     row 3 — "+ File" / "+ Package" secondary buttons
   The three legacy cells are reordered with `order`; the "Attachments" label
   is painted by tr::before so cell0 (which physically holds the label text +
   the two add-links) can drop to row 3 carrying ONLY the buttons. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 12px;
    width: 100%;
}

/* Row 1 (left): the "Attachments" section label */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr::before {
    content: 'Attachments';
    order: 1;
    flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-primary);
}

/* Generic cell reset */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td {
    padding: 0 !important;
    border: 0;
    background: transparent;
    height: auto;
    width: auto !important;
    vertical-align: middle;
}

/* Row 2: the file-list cell, full width on its own line */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) {
    order: 3;
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0;
    display: block;
}

/* Row 3: cell0 physically holds "Attachments:" text + the two add-links.
   Collapse its text node (font-size:0) and lay the two links out as a button
   row beneath the file list. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:first-child {
    order: 4;
    flex: 0 0 100%;
    width: 100% !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap:0 (not 6px) so the FIRST pill sits flush-left, aligned with the
       "Attachments" label / filename / To-Cc-Bcc labels at the card's left
       inset. The collapsed "Attachments:" text node is still a 0-width
       anonymous flex item, so a container `gap` would push File 6px right of
       that edge. The 6px Figma pill spacing (616:10435) lives on the Package
       button's margin-left instead (see below). */
    gap: 0;
    font-size: 0 !important; /* collapse the "Attachments:" + &nbsp; text nodes */
    line-height: 0;
    text-align: left;
}

/* 6px between the File / Package pills (Figma 616:10435), applied here rather
   than as a container gap so it doesn't also indent the first pill.
   !important + the extra compound selectors beat the shared button block's
   `margin: 0 !important` below. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:first-child a[id$="_hlkAttachPackage"] {
    margin-left: 6px !important;
}

/* Hide the legacy hidden hyperlink + redirect + the BR carried in cell0 */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments [id$="_hlkHidden"],
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments [id$="_lnkRedirect"],
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:first-child > br {
    display: none !important;
}

/* Hide the legacy textarea that mirrors attachment names */
body.page-email-compose [id$="cpEmail_divMod"] [id$="_txtAttachments"] {
    display: none !important;
}

/* Legacy attachment-list repeater shouldn't add an empty line */
body.page-email-compose [id$="cpEmail_divMod"] [id$="_rptAttachmentList"]:empty {
    display: none;
}

/* --- File list: one file per line (Figma 616:8112) ----------------------
   Each attachment renders in the file-list cell via the repeater (path B) or
   the legacy label (path A):
     <a>filename</a> (size) <delete> <span.docTypeGroup><select><doc-type img></span> <br>
   Lay each attachment as a flex row — filename (teal, truncates) · size (muted)
   · neutral X delete · doc-type dropdown (full text, inline). The stray
   doc-type file-type icon is hidden. The per-attachment <br> stacks multiple
   files vertically. */

/* Inline-run holders: the legacy label (path A) + the repeater wrapper div
   (path B). Each is a full-width flex row that wraps file-by-file via <br>. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) > [id$="_lblAttachmentFileNames"],
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) > div {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    line-height: normal;
}

/* <br> as a flex line-break: a 100%-basis, 0-height item pushes whatever
   follows onto the next row, so multiple attachments each get their own line. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) > [id$="_lblAttachmentFileNames"] > br,
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) > div > br {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
}

/* Filename: teal link, ellipsis-truncate (the full name stays on hover via the
   legacy title attribute). FIXED max-width (not %) so the ellipsis kicks in. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments a.attachmentLink,
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) > [id$="_lblAttachmentFileNames"] > a {
    flex: 0 1 auto;
    min-width: 0;          /* allow shrink below content so the ellipsis kicks in */
    width: auto !important;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--brand-primary) !important;
    text-decoration: none;
}

/* File size "(364 KB)" — muted, follows the filename. Reset the legacy
   relative-position nudge (top:-3px); the flex row centers it. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) [id$="_lblFileSize"] {
    flex: 0 0 auto;
    position: static !important;
    top: auto !important;
    white-space: nowrap;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-muted);
}

/* Delete: swap the red delete.gif for a neutral Lucide X (Figma 616:7848).
   Same recipe as the address-book swap above — a solid bg-colour clipped to the
   X shape by the --icon-x mask, neutralised with filter:brightness(0) and
   softened toward slate with opacity. Hover reveals the native red as a delete
   affordance. */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) input[type="image"][id$="_btnDelete"] {
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    padding: 0;
    margin: 0;
    border: 0;
    position: static !important;
    top: auto !important;
    cursor: pointer;
    background-color: var(--text-muted) !important;
    -webkit-mask: var(--icon-x) no-repeat center / 16px 16px;
            mask: var(--icon-x) no-repeat center / 16px 16px;
    filter: brightness(0);
    opacity: 0.6;
}

body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) input[type="image"][id$="_btnDelete"]:hover {
    background-color: transparent !important;
    filter: none;
    opacity: 1;
}

/* Per-file doc-type / extension dropdown REMOVED (user request 2026-06-23):
   the Word/Excel/XML/PDF picker isn't used, and Figma file rows (616:8112)
   show only filename · size · X. Hidden via CSS so the <select> stays in the
   DOM and still posts its default value — no code-behind/build change needed.
   Also kills the stray doc-type file-type icon (pdf.gif / word.gif …). */
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments .docTypeGroup,
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments .emailFileList,
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) .documentType,
body.page-email-compose [id$="cpEmail_divMod"] #tblAttachments > tbody > tr > td:nth-child(2) .documentTypeMainLnk {
    display: none !important;
}

/* --- "+ File" / "+ Package" secondary buttons (Figma 616:7248/7249) -------
   Light-grey pills with slate text + a slate plus icon — rendered from the two
   legacy add-links inside cell0 (now row 3, below the file list). */
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachDocs"],
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachPackage"],
body.page-email-compose a[id$="cpEmail_hlkAttachDocs"]:link,
body.page-email-compose a[id$="cpEmail_hlkAttachDocs"]:visited,
body.page-email-compose a[id$="cpEmail_hlkAttachPackage"]:link,
body.page-email-compose a[id$="cpEmail_hlkAttachPackage"]:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Figma 616:7248 — 8px between the plus icon and the label */
    box-sizing: border-box;
    height: 32px;
    /* A legacy global rule sets overflow-y:auto on these anchors; the centred
       icon+label is ~2px taller than the 32px pill, so a vertical scrollbar
       (the stray ▲▼) was rendering inside each button. Clip it. */
    overflow: hidden !important;
    padding: 8px 12px;
    background: var(--surface-muted) !important;
    background-color: var(--surface-muted) !important;
    border: 0 !important;
    border-radius: 8px;
    color: #1e293b !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important; /* Figma text/xs; also keeps content within the 32px pill so no overflow scrollbar */
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
}

body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachDocs"]:hover,
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachPackage"]:hover {
    background-color: var(--border-default) !important;
    color: #1e293b !important;
    text-decoration: none !important;
}

/* + Plus icon via ::before. Lucide Plus 16px, slate to match the label. */
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachDocs"]::before,
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachPackage"]::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #1e293b;
    -webkit-mask-image: var(--icon-plus);
            mask-image: var(--icon-plus);
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    flex: 0 0 16px;
}

/* Rename "add file" → "File", "add package" → "Package" via CSS text-replace.
   Hide the legacy text via font-size:0 on the link and inject the new label
   via ::after. The link still preserves its onclick handler. */
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachDocs"],
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachPackage"] {
    font-size: 0 !important;
}

body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachDocs"]::before,
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachPackage"]::before {
    /* Re-assert size since the parent is font-size:0 */
    font-size: 14px;
}

body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachDocs"]::after {
    content: 'File';
    font-family: 'Inter', sans-serif;
    font-size: 12px; /* Figma 616:7248 — text/xs */
    font-weight: 500;
    line-height: 16px;
    color: #1e293b;
}

body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachPackage"]::after {
    content: 'Package';
    font-family: 'Inter', sans-serif;
    font-size: 12px; /* Figma 616:7249 — text/xs */
    font-weight: 500;
    line-height: 16px;
    color: #1e293b;
}

/* Hide the legacy LinkButton <ins>&nbsp;</ins> spacer */
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachDocs"] > ins,
body.page-email-compose [id$="cpEmail_divMod"] a[id$="_hlkAttachPackage"] > ins {
    display: none !important;
}

/* --- "ZIP all files" checkbox (cell2) → pinned top-right on row 1 --------
   Renders as: <span><input type="checkbox"><label><img zip.gif>ZIP</label></span> */
body.page-email-compose [id$="cpEmail_divMod"] td.docTypeSelectContnr {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 !important;
    background: transparent !important;
}

body.page-email-compose [id$="cpEmail_divMod"] [id$="_cblOptions"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Hide the raw input visually but keep accessibility + click target */
body.page-email-compose [id$="cpEmail_divMod"] [id$="_cblOptions"] > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    box-sizing: border-box;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-raised);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    flex: 0 0 16px;
    position: relative;
}

body.page-email-compose [id$="cpEmail_divMod"] [id$="_cblOptions"] > input[type="checkbox"]:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

body.page-email-compose [id$="cpEmail_divMod"] [id$="_cblOptions"] > input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--surface-raised);
    -webkit-mask-image: var(--icon-check);
            mask-image: var(--icon-check);
    -webkit-mask-size: 14px 14px;
            mask-size: 14px 14px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* Collapse the legacy "ZIP" label text; re-label as "ZIP all files" via ::after */
body.page-email-compose [id$="cpEmail_divMod"] [id$="_cblOptions"] > label {
    font-family: 'Inter', sans-serif;
    font-size: 0; /* collapse the legacy "ZIP" text node */
    line-height: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* Hide the legacy zip.gif image inside the label */
body.page-email-compose [id$="cpEmail_divMod"] [id$="_cblOptions"] > label > img {
    display: none !important;
}

body.page-email-compose [id$="cpEmail_divMod"] [id$="_cblOptions"] > label::after {
    content: 'ZIP all files';
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--text-primary);
}

/* --- Editor body row (white surface) ----------------------------------- */
/* The body row is a <tr><td style="background:#FFFFFF"> wrapping the
   UltimateEditor. Strip the inline style; reset padding.
   Padding-bottom: 24 = outer gap-6 between Body and Footer sections.
   NO border-top — Figma 247:37481 Body section has no border (the gap-6
   is the visual separator; toolbar's own border-bottom separates toolbar
   from body content). */
body.page-email-compose [id$="cpEmail_divMod"] .modMain > table > tbody > tr:has([id$="_UltimateEditor1c"]) > td {
    padding: 0 0 24px 0 !important;
    background: var(--surface-raised) !important;
}

/* The legacy hidden mirror textarea */
body.page-email-compose [id$="cpEmail_divMod"] textarea[id$="_txtBody"] {
    display: none !important;
}

/* Editor content area (the typing iframe, .EditorTextBox) ships a legacy
   0.8px solid grey border — the "weird border around the email content".
   Figma's Body section (616:8148 Body) has no border; the toolbar's own
   border-bottom is the only separator. Strip it. */
body.page-email-compose [id$="cpEmail_divMod"] iframe.EditorTextBox,
body.page-email-compose [id$="cpEmail_divMod"] iframe[id$="_UltimateEditor1i"] {
    border: 0 !important;
    outline: 0 !important;
}

/* ==========================================================================
   UltimateEditor (Karamasoft) re-skin — same selectors pattern as
   offlineQuestionnaireBulkEmail.css but scoped via body.page-email-compose +
   editor instance "UltimateEditor1" (not ueTemplateText).
   ========================================================================== */

body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Force the EditorContainer's tbody/tr to be full-width blocks so the
   toolbar TD (display:block, width:100%) actually computes to card width.
   With default table-cell display the toolbar TD shrinks to content
   (~822px on 833 card), leaving an 11px white sliver on the right. */
body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer > tbody {
    display: block !important;
    width: 100% !important;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer > tbody > tr {
    display: block !important;
    width: 100% !important;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent;
    padding: 0 !important;
    /* Karamasoft wraps the toolbar in an intermediate <table> (no id/class)
       whose table-layout:auto shrinks to content (~822px on 833 card),
       leaving an 11px white sliver beside the toolbar strip. Force every
       nested table to 100% width so the toolbar bg reaches card.right. */
    width: 100% !important;
    box-sizing: border-box !important;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer td {
    background: transparent;
    padding: 0;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer tbody,
body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer tr {
    background: transparent;
    margin: 0;
}

/* The TD wrapping the toolbar table — full-width muted strip */
body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer td:has(> .EditorToolbar) {
    display: block;
    width: 100%;
    background: var(--surface-muted) !important;
    background-color: var(--surface-muted) !important;
    border-bottom: 1px solid var(--border-default);
    padding: 10px 12px !important;
    box-sizing: border-box;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorContainer tr:has(> td > .EditorToolbar) {
    display: block;
    width: 100%;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    width: 100%;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar > tbody,
body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar > tbody > tr {
    background: transparent !important;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar > tbody > tr > td {
    background: transparent !important;
    vertical-align: middle;
}

/* Hide the legacy toolbar gif decorations */
body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbarBottomLine,
body.page-email-compose [id$="cpEmail_divMod"] img[src*="ToolbarLeft.gif"],
body.page-email-compose [id$="cpEmail_divMod"] img[src*="ToolbarRight.gif"],
body.page-email-compose [id$="cpEmail_divMod"] img[src*="ToolbarTopLine"],
body.page-email-compose [id$="cpEmail_divMod"] img[src*="ToolbarBottomLine"] {
    display: none !important;
}

/* Toolbar group dividers — Figma (I616:8148;255:6518 …): a 1px × 20px
   #e2e8f0 vertical line between control groups. The legacy Separator.gif
   raster rendered BLACK (the old `filter:brightness(0)` recolour). Hide the
   raster and paint the divider on the wrapping td so the colour is exactly
   --border-default, never black. */
body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar img[src*="Separator.gif"] {
    visibility: hidden !important;
    width: 1px !important;
    height: 20px !important;
    margin: 0 4px !important;
    border: 0 !important;
    filter: none !important;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar td:has(> img[src*="Separator.gif"]) {
    position: relative;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar td:has(> img[src*="Separator.gif"])::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 20px;
    background-color: var(--border-default);
}

/* Hide a separator TD that's IMMEDIATELY preceded by another separator TD.
   Why: ToolbarLayout.xml has `<Separator/> StrikeThrough Super Sub <Separator/>`,
   but Karamasoft skips rendering the Strike/Super/Sub buttons in this build,
   leaving two adjacent separator TDs with NOTHING between them (visible as
   a stray 9px vertical-line cluster between ForeColor and SpellCheck). One
   of the two contributes nothing and should disappear. */
body.page-email-compose [id$="cpEmail_divMod"] .EditorToolbar td:has(> img[src*="Separator.gif"]) + td:has(> img[src*="Separator.gif"]) {
    display: none !important;
}

/* --- Font / Size / VesselSpecs dropdowns -------------------------------- */

body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownOut,
body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownOver,
body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownDown {
    background: var(--surface-raised) !important;
    background-color: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    height: 28px !important;
    box-sizing: border-box;
    padding: 0 6px 0 8px !important;
    margin-right: 4px;
    cursor: pointer;
    overflow: hidden;
}

body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownOver {
    border-color: var(--border-strong) !important;
}

/* VesselSpecs dropdown — wider, not in Figma but functional */
body.page-email-compose [id$="cpEmail_divMod"] table[id$="_UltimateEditor1ddlVesselSpecs_Table"] {
    width: auto !important;
    min-width: 100px;
}

/* Font name dropdown */
body.page-email-compose [id$="cpEmail_divMod"] table[id$="_UltimateEditor1FontName_Table"] {
    width: 86px !important;
    min-width: 86px;
}

/* Font size dropdown */
body.page-email-compose [id$="cpEmail_divMod"] table[id$="_UltimateEditor1FontSize_Table"] {
    width: 54px !important;
    min-width: 54px;
}

body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownOut > tbody > tr > td {
    vertical-align: middle;
    padding: 0;
    height: 26px;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorDropDownText,
body.page-email-compose [id$="cpEmail_divMod"] .EditorDropDownShortText {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: var(--text-muted) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorDropDownText {
    min-width: 50px;
}

body.page-email-compose [id$="cpEmail_divMod"] .EditorDropDownShortText {
    min-width: 24px;
}

/* Replace DropTriangle.gif with Lucide ChevronDown */
body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownOut img[src*="DropTriangle.gif"],
body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownOver img[src*="DropTriangle.gif"],
body.page-email-compose [id$="cpEmail_divMod"] table.EditorDropDownDown img[src*="DropTriangle.gif"] {
    width: 16px !important;
    height: 16px !important;
    background-color: var(--text-muted) !important;
    -webkit-mask-image: var(--icon-chevron-down) !important;
            mask-image: var(--icon-chevron-down) !important;
    -webkit-mask-size: 16px 16px !important;
            mask-size: 16px 16px !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    filter: brightness(0) !important;
    margin: 0 !important;
}

/* --- Toolbar icon buttons (28x28, Lucide masks via ::after) ------------- */

body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonOut,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonOver,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDown,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDisabled {
    position: relative;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 150ms ease;
}

body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonOver {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDown {
    background-color: rgba(15, 23, 42, 0.10) !important;
}

body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDisabled {
    opacity: 0.4;
    pointer-events: none;
}

body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonOut > img,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonOver > img,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDown > img,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDisabled > img {
    visibility: hidden !important;
    width: 16px !important;
    height: 16px !important;
    border: 0 !important;
}

body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonOut::after,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonOver::after,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDown::after,
body.page-email-compose [id$="cpEmail_divMod"] td.EditorButtonDisabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: transparent;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
    pointer-events: none;
}

/* Paint color for known icons */
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Bold"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Italic"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Underline"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyLeft"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyCenter"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyRight"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyFull"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertOrderedList"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertUnorderedList"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Outdent"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Indent"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1ForeColor"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1ForeColorPicker"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1StrikeThrough"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Superscript"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Subscript"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1UltimateSpell"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1SpellAsYouType"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertDate"]::after,
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertTime"]::after {
    background-color: var(--text-muted);
}

/* Lucide masks per button */
body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Bold"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8H6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8H6'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Italic"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='4' x2='10' y2='4'/><line x1='14' y1='20' x2='5' y2='20'/><line x1='15' y1='4' x2='9' y2='20'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='4' x2='10' y2='4'/><line x1='14' y1='20' x2='5' y2='20'/><line x1='15' y1='4' x2='9' y2='20'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Underline"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4v6a6 6 0 0 0 12 0V4'/><line x1='4' y1='20' x2='20' y2='20'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4v6a6 6 0 0 0 12 0V4'/><line x1='4' y1='20' x2='20' y2='20'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyLeft"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='15' y1='12' x2='3' y2='12'/><line x1='17' y1='18' x2='3' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='15' y1='12' x2='3' y2='12'/><line x1='17' y1='18' x2='3' y2='18'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyCenter"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='17' y1='12' x2='7' y2='12'/><line x1='19' y1='18' x2='5' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='17' y1='12' x2='7' y2='12'/><line x1='19' y1='18' x2='5' y2='18'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyRight"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='9' y2='12'/><line x1='21' y1='18' x2='7' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='9' y2='12'/><line x1='21' y1='18' x2='7' y2='18'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1JustifyFull"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertOrderedList"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='6' x2='21' y2='6'/><line x1='10' y1='12' x2='21' y2='12'/><line x1='10' y1='18' x2='21' y2='18'/><path d='M4 6h1v4'/><path d='M4 10h2'/><path d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='6' x2='21' y2='6'/><line x1='10' y1='12' x2='21' y2='12'/><line x1='10' y1='18' x2='21' y2='18'/><path d='M4 6h1v4'/><path d='M4 10h2'/><path d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertUnorderedList"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Outdent"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 8 3 12 7 16'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='6' x2='11' y2='6'/><line x1='21' y1='18' x2='11' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 8 3 12 7 16'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='6' x2='11' y2='6'/><line x1='21' y1='18' x2='11' y2='18'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1Indent"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 3 16'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='6' x2='11' y2='6'/><line x1='21' y1='18' x2='11' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 3 16'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='6' x2='11' y2='6'/><line x1='21' y1='18' x2='11' y2='18'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1ForeColor"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16'/><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16'/><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1ForeColorPicker"]::after {
    -webkit-mask-image: var(--icon-chevron-down);
            mask-image: var(--icon-chevron-down);
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1StrikeThrough"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4H9a3 3 0 0 0-2.83 4'/><path d='M14 12a4 4 0 0 1 0 8H6'/><line x1='4' y1='12' x2='20' y2='12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4H9a3 3 0 0 0-2.83 4'/><path d='M14 12a4 4 0 0 1 0 8H6'/><line x1='4' y1='12' x2='20' y2='12'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1UltimateSpell"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/><path d='m16 20 2 2 4-4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/><path d='m16 20 2 2 4-4'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1SpellAsYouType"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/><path d='M16 17h6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/><path d='M16 17h6'/></svg>");
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertDate"]::after {
    -webkit-mask-image: var(--icon-calendar);
            mask-image: var(--icon-calendar);
}

body.page-email-compose [id$="cpEmail_divMod"] td[id$="_UltimateEditor1InsertTime"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}

/* --- Footer (Cancel + Send Email) -------------------------------------- */

body.page-email-compose [id$="cpEmail_divMod"] .modFooter2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* No `gap` — there's an &nbsp; text node between Cancel and Send Email
       which becomes an anonymous flex item; with gap:8px the visible gap
       was 16px (Cancel→text + text→Send). Use explicit margin on Send. */
    padding: 12px 24px;
    background: var(--surface-muted) !important;
    border-top: 1px solid var(--border-default);
    box-sizing: border-box;
    width: 100%;
}

/* Cancel button — outline */
body.page-email-compose a[id$="cpEmail_btnCancel"].LinkButton,
body.page-email-compose a[id$="cpEmail_btnCancel"]:link,
body.page-email-compose a[id$="cpEmail_btnCancel"]:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    height: 36px !important;
    min-width: 0;
    padding: 8px 16px !important;
    background: var(--surface-raised) !important;
    background-color: var(--surface-raised) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    text-shadow: none !important;
    margin: 0 !important;
}

body.page-email-compose a[id$="cpEmail_btnCancel"]:hover,
body.page-email-compose a[id$="cpEmail_btnCancel"]:focus,
body.page-email-compose a[id$="cpEmail_btnCancel"]:active {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border-color: var(--border-strong) !important;
}

/* Send Email button — primary */
body.page-email-compose a[id$="cpEmail_btnSendMail"].LinkButton,
body.page-email-compose a[id$="cpEmail_btnSendMail"]:link,
body.page-email-compose a[id$="cpEmail_btnSendMail"]:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    height: 36px !important;
    min-width: 0;
    padding: 8px 16px !important;
    background: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    background-image: none !important;
    color: var(--text-on-brand) !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    border: 0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    text-shadow: none !important;
    /* 8px from Cancel button. Can't use `gap` on .modFooter2 because of
       the &nbsp; text node between buttons (see footer comment above). */
    margin: 0 0 0 8px !important;
}

body.page-email-compose a[id$="cpEmail_btnSendMail"]:hover,
body.page-email-compose a[id$="cpEmail_btnSendMail"]:focus,
body.page-email-compose a[id$="cpEmail_btnSendMail"]:active {
    background-color: var(--brand-primary-hover) !important;
    color: var(--text-on-brand) !important;
    text-decoration: none !important;
}

/* Hide legacy LinkButton spacers / icons (envelope, cancel x) on footer
   buttons — Figma shows text-only buttons. */
body.page-email-compose [id$="cpEmail_divMod"] .modFooter2 a.LinkButton > ins,
body.page-email-compose [id$="cpEmail_divMod"] .modFooter2 a.LinkButton > img {
    display: none !important;
}

/* Strip the inline-rendered `&nbsp;` between Cancel and Send Email (an
   actual non-breaking space text node in markup). The gap:8 on .modFooter2
   handles spacing. */
body.page-email-compose [id$="cpEmail_divMod"] .modFooter2 {
    font-size: 0; /* collapse the &nbsp; text node */
}
body.page-email-compose [id$="cpEmail_divMod"] .modFooter2 a.LinkButton {
    font-size: 14px !important; /* restore on the buttons */
}

/* Hidden inputs in footer (TOemailvalid etc.) — already display:none by
   type=hidden, but defensive */
body.page-email-compose [id$="cpEmail_divMod"] .modFooter2 input[type="hidden"] {
    display: none !important;
}

/* ==========================================================================
   Address Book pickers (pnlAddressBook / pnlAddressBook2) — refresh re-skin
   --------------------------------------------------------------------------
   ModalPopupExtender chrome on the TO + CC "address book" pickers (Email.ascx
   lines 196-245). Each panel ships:
     - Outer asp:Panel with inline `style="border: 1px solid black"` (kill it)
     - Inner `<table border=0>` with class="GridHeader" title row, "GridData"
       address-book body, and "GridData" button rows (Sort A/D + Cancel/OK)
   Same target chrome as Modal.ascx (DESIGN.md §9.10): white card, 1px
   slate-200, 12px radius, soft shadow, 24/28 padding, Inter, Lucide vibe.
   No close X (panel uses ESC + Cancel button to dismiss).
   ========================================================================== */

body.page-email-compose [id$="_pnlAddressBook"],
body.page-email-compose [id$="_pnlAddressBook2"] {
    background: var(--surface-raised, #ffffff) !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 12px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 24px 28px !important;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary, #0f172a);
    width: 360px !important; /* override ascx 300px for 24/28 padding budget */
}

/* Flatten the inner table chain — block flow inside the card. */
body.page-email-compose [id$="_pnlAddressBook"] > table,
body.page-email-compose [id$="_pnlAddressBook2"] > table {
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
}
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody {
    display: block;
}
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody > tr,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody > tr {
    display: block;
    background: transparent !important;
}
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody > tr > td,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody > tr > td {
    display: block;
    padding: 0;
    background: transparent !important;
}

/* Title row (GridHeader): "Address Book" — Inter SemiBold 16, dark.
   Cursor:move stays so the legacy drag handle keeps working. */
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody > tr.GridHeader > td,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody > tr.GridHeader > td {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    padding-bottom: 16px;
    cursor: move;
}

/* Address-book body row — give it a bit of breathing room, plain bg. */
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody > tr.GridData > td,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody > tr.GridData > td {
    padding-bottom: 12px;
}
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody > tr.GridData:last-child > td,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody > tr.GridData:last-child > td {
    padding-bottom: 0;
}

/* Button rows — the two `<div style="text-align: center">` groups. Convert
   each into a flex row with 8px gap so the four 100w buttons cluster cleanly
   instead of inline-block stacking with browser-default whitespace. */
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody > tr.GridData:last-child > td > div,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody > tr.GridData:last-child > td > div {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 8px 0;
}
body.page-email-compose [id$="_pnlAddressBook"] > table > tbody > tr.GridData:last-child > td > div:last-child,
body.page-email-compose [id$="_pnlAddressBook2"] > table > tbody > tr.GridData:last-child > td > div:last-child {
    margin-bottom: 0;
    margin-top: 12px; /* clear separation between Sort row and Cancel/OK row */
}

/* Restyle the four `<asp:Button>` instances (rendered as <input type="submit">)
   into refresh-style pills. Width was 100px inline — let flex center handle it.
   Legacy default chrome (3D border, browser-grey gradient) is killed. */
body.page-email-compose [id$="_pnlAddressBook"] input[type="submit"],
body.page-email-compose [id$="_pnlAddressBook2"] input[type="submit"] {
    height: 36px;
    /* Override ascx inline `Width="100"` — 100px includes padding under
       `box-sizing: border-box` somewhere upstream and truncates "Sort
       Ascending" / "Sort Descending". Let content drive width. */
    width: auto !important;
    min-width: 80px;
    padding: 0 14px;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0));
    border-radius: 8px;
    background: var(--surface-raised, #ffffff);
    color: var(--text-primary, #0f172a);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
body.page-email-compose [id$="_pnlAddressBook"] input[type="submit"]:hover,
body.page-email-compose [id$="_pnlAddressBook2"] input[type="submit"]:hover {
    background: var(--surface-hover, #f1f5f9);
}

/* Promote OK (the last button in the cluster) to primary teal. Match the
   default-rule's type selector (`input[type="submit"]`) so we don't lose on
   specificity (both rules = 0,0,3,1 — order wins, and this rule is later). */
body.page-email-compose [id$="_pnlAddressBook"] input[type="submit"][id$="_btnAddrOK"],
body.page-email-compose [id$="_pnlAddressBook2"] input[type="submit"][id$="_btnAddrOK2"] {
    background: var(--button-primary-bg, var(--brand-primary, #0d9488));
    border-color: var(--button-primary-bg, var(--brand-primary, #0d9488));
    color: var(--button-primary-text, #ffffff);
}
body.page-email-compose [id$="_pnlAddressBook"] input[type="submit"][id$="_btnAddrOK"]:hover,
body.page-email-compose [id$="_pnlAddressBook2"] input[type="submit"][id$="_btnAddrOK2"]:hover {
    background: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e));
    border-color: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e));
    color: var(--button-primary-text, #ffffff);
}