/* =============================================================================
   DEX Portal - Email Templates

   The templates table, and the builder panel: palette on the left, the email
   itself on the right. The canvas wears the template's own design settings
   inline (background, width, type), so this file styles the furniture around
   the email rather than the email.
   ============================================================================= */

/* ---- The templates table -------------------------------------------------- */

.tpl-table-holder {
    margin-top: 14px;
}

.tpl-table__column--name { width: 26%; }
.tpl-table__column--subject { width: 34%; }
.tpl-table__column--updated { width: 18%; }
.tpl-table__column--author { width: 12%; }
.tpl-table__column--actions { width: 10%; }

.tpl-table__row { cursor: pointer; }

.tpl-table__row:hover td { background: var(--surface-subtle); }

.tpl-table__name {
    font-weight: 600;
    color: var(--text-primary);
}

.tpl-table__subject { color: var(--text-secondary); }

.tpl-table .data-table__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ---- The builder: two columns --------------------------------------------- */

.tpl-builder {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    min-height: 100%;
}

/* ---- Column one: the palette ---------------------------------------------- */

.tpl-palette {
    width: 272px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium, 10px);
    background: var(--surface-panel);
    overflow: hidden;
}

.tpl-palette__head {
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-panel);
}

.tpl-palette__search { width: 100%; }

.tpl-palette__scroll {
    overflow-y: auto;
    padding: 10px;
    flex: 1;
    min-height: 0;
}

.tpl-palette__loading {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 18px 6px;
}

.tpl-module {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    margin-bottom: 8px;
    background: #fff;
}

.tpl-module__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.tpl-module__summary::-webkit-details-marker { display: none; }

.tpl-module__summary .tpl-module__chevron {
    margin-left: auto;
    transition: transform 0.15s ease;
    color: var(--text-muted);
}

.tpl-module[open] > .tpl-module__summary .tpl-module__chevron {
    transform: rotate(90deg);
}

.tpl-module__hint {
    margin: 0;
    padding: 0 10px 6px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

.tpl-group__title {
    margin: 6px 0 4px;
    padding: 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tpl-module .tpl-group__title { margin-top: 10px; }

.tpl-group__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 10px 10px;
}

/* ---- Chips: one look in the palette and in the email ----------------------- */

.tpl-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid #d6dafc;
    border-radius: var(--radius-button);
    background: #eef0ff;
    color: #4650dd;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: grab;
}

.tpl-chip--palette:hover {
    background: #e0e4ff;
    border-color: #b9c0fa;
}

.tpl-chip--palette:active { cursor: grabbing; }

/* A custom field's chip is tinted green, so what came from Fields and Layout
   is tellable at a glance from what the product ships with. */
.tpl-chip--custom {
    background: #e9f8f0;
    border-color: #c4ecd8;
    color: #157a4c;
}

/* Inside the email the chip shrinks to the text around it. */
.tpl-page .tpl-chip {
    font-size: 0.82em;
    cursor: default;
    user-select: none;
    margin: 0 1px;
    vertical-align: baseline;
}

/* ---- Widget cards in the palette ------------------------------------------ */

.tpl-widget-card {
    margin: 0 10px 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: #fafaff;
    cursor: grab;
}

.tpl-widget-card:hover {
    border-color: #b9c0fa;
    background: #f2f3ff;
}

.tpl-widget-card:active { cursor: grabbing; }

.tpl-widget-card__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.tpl-widget-card__label .icon { color: var(--text-muted); }

.tpl-widget-card__description {
    margin: 3px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ---- Column two: the editor ------------------------------------------------ */

.tpl-editor {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpl-editor__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpl-editor__name { font-weight: 600; }

/* ---- The toolbar ----------------------------------------------------------- */

.tpl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    position: sticky;
    top: 0;
    z-index: 5;
}

.tpl-toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border: none;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.tpl-toolbar__button:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.tpl-toolbar__select {
    height: 29px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: #fff;
    color: var(--text-primary);
    font-size: 12.5px;
    padding: 0 4px;
    max-width: 118px;
}

.tpl-toolbar__select--block { max-width: 104px; }
.tpl-toolbar__select--size { max-width: 84px; }

.tpl-toolbar__divider {
    width: 1px;
    height: 20px;
    background: var(--border-subtle);
    margin: 0 5px;
}

/* The colour wells hide a native colour input under an icon. */
.tpl-toolbar__color input[type='color'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* ---- The design bar -------------------------------------------------------- */

.tpl-design {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
}

.tpl-design__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.tpl-design__summary::-webkit-details-marker { display: none; }

.tpl-design__summary .tpl-module__chevron {
    margin-left: auto;
    transition: transform 0.15s ease;
    color: var(--text-muted);
}

.tpl-design[open] > .tpl-design__summary .tpl-module__chevron {
    transform: rotate(90deg);
}

.tpl-design__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 14px;
    padding: 4px 12px 14px;
}

.tpl-design__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.tpl-design__field--wide { grid-column: span 2; }

.tpl-design__color {
    width: 100%;
    height: 30px;
    padding: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: #fff;
    cursor: pointer;
}

.tpl-design__number {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tpl-design__number .form-field__control { flex: 1; }

.tpl-design__unit {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ---- The canvas ------------------------------------------------------------ */

.tpl-canvas {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium, 10px);
    padding: 30px 18px;
    display: flex;
    justify-content: center;
    transition: background-color 0.15s ease;
    min-height: 360px;
}

.tpl-canvas--dropping {
    outline: 2px dashed #4650dd;
    outline-offset: -6px;
}

.tpl-page {
    max-width: 100%;
    min-height: 320px;
    /* A thin grey edge, not a drop shadow: the canvas already frames the
       page, and a floating shadow read as a card lifting off the screen. */
    border: 1px solid var(--border-subtle, #e9ecf3);
    outline: none;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.tpl-page:focus { outline: none; }

.tpl-page hr {
    border: none;
    border-top: 1px solid #e0e2ee;
    margin: 18px 0;
}

.tpl-page img { max-width: 100%; height: auto; }

.tpl-page blockquote {
    margin: 12px 0;
    padding: 6px 16px;
    border-left: 3px solid #d6dafc;
    color: inherit;
    opacity: 0.85;
}

/* ---- Widgets in the canvas ------------------------------------------------- */

.tpl-widget {
    position: relative;
    margin: 12px 0;
    border: 1.5px dashed transparent;
    border-radius: var(--radius-button);
    transition: border-color 0.12s ease;
}

.tpl-widget:hover { border-color: #8f97f2; }

.tpl-widget__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5a61d8;
    background: #eef0ff;
    border-radius: 5px 5px 0 0;
    opacity: 0;
    transition: opacity 0.12s ease;
    font-family: 'Inter', sans-serif;
}

.tpl-widget:hover .tpl-widget__bar { opacity: 1; }

.tpl-widget__tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tpl-widget__move,
.tpl-widget__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #5a61d8;
    line-height: 1;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 5px;
}

.tpl-widget__move:hover { background: #dfe2ff; }

.tpl-widget__remove { font-size: 15px; }

.tpl-widget__remove:hover { color: #d33; }

.tpl-widget__preview { pointer-events: none; }

/* ---- Preview ---------------------------------------------------------------- */

.tpl-preview-frame {
    width: 100%;
    min-height: 560px;
    border: none;
    flex: 1;
    background: transparent;
}

.slide-over__header-action--active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ---- Compose: the template picker and preview ------------------------------- */

/* The rendered template is EDITABLE - a live document dressed in the
   template's own design, not a picture of one. It reflows to the pane, so a
   mobile-width template reads at its true size beside a project. */
.mail-compose__edit-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--border-default);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: var(--surface-panel);
}

.mail-compose__edit-holder {
    border: 1px solid var(--border-default);
    border-radius: 0 0 5px 5px;
    background: #f4f5f8;
    padding: 18px 12px;
    max-height: 58vh;
    overflow-y: auto;
}

.mail-compose__edit {
    margin: 0 auto;
    min-height: 220px;
    outline: none;
    line-height: 1.6;
    overflow-wrap: break-word;
    /* Flat: a thin grey edge, no shadow, no rounded corner - the message is
       a document, not a floating card. */
    border: 1px solid var(--border-subtle, #e9ecf3);
    border-radius: 0;
}

/* One press of Enter is one paragraph, with one gap under it. The browser
   makes a new block per press and gives it no margin, so people press twice
   and end up with a blank block; a template's own <p> brings 1em top AND
   bottom. Both are settled here, and again on send, so what is typed is what
   arrives. Shift+Enter still gives a plain line break. */
.mail-compose__edit > p,
.mail-compose__edit > div {
    margin: 0 0 14px;
}

.mail-compose__edit > p:last-child,
.mail-compose__edit > div:last-child {
    margin-bottom: 0;
}

.mail-compose__edit img { max-width: 100%; height: auto; }

.mail-compose__edit table { max-width: 100%; }

.mail-compose__template-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Small screens ---------------------------------------------------------- */

@media (max-width: 940px) {
    .tpl-builder { flex-direction: column; }

    .tpl-palette {
        width: 100%;
        position: static;
        max-height: 300px;
    }
}

/* ---- The signature editor (beside Connected Apps) --------------------------- */

.signature-editor__tabs {
    margin-bottom: 10px;
}

.signature-editor__toolbar {
    border-radius: 5px 5px 0 0;
    border-bottom: none;
}

.signature-editor__surface {
    border: 1px solid var(--border-default);
    border-radius: 0 0 5px 5px;
    background: #fff;
    padding: 14px;
    min-height: 180px;
}

.signature-editor__editable {
    min-height: 150px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #1f2430;
    line-height: 1.6;
}

.signature-editor__editable img { max-width: 100%; height: auto; }

.signature-editor__html {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 12.5px;
}

/* ---- The verify tick and cross on a mailbox row ----------------------------- */

.mailbox-verify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
}

.mailbox-verify--ok {
    background: rgba(15, 157, 88, 0.14);
    color: #0f7a45;
}

.mailbox-verify--fail {
    background: rgba(211, 51, 51, 0.12);
    color: #c22;
}


/* Buttons are 5px product-wide now (--radius-button); the select sitting
   between them in the toolbar is not a button and has to be told. */
.tpl-toolbar__select {
    border-radius: var(--radius-button);
}