.email-settings { display: grid; gap: .85rem; min-width: 0; }
.email-settings > h3 { margin: 0; }
.email-settings > .muted { margin: 0; max-width: 1050px; }
.email-subtab-nav { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--border); padding-bottom: .75rem; }
.email-subtab-btn { appearance: none; border: 1px solid var(--border); border-radius: .5rem; padding: .55rem .8rem; color: var(--text); background: transparent; font: inherit; cursor: pointer; }
.email-subtab-btn.active { color: #fff; background: var(--accent, #194185); border-color: var(--accent, #194185); }
.email-subsection { display: grid; gap: .8rem; min-width: 0; padding-top: .25rem; }
.email-subsection[hidden], .email-preview[hidden] { display: none !important; }
.email-subsection > .book-btn, .email-subsection > .ghost-btn { justify-self: start; }
.email-info-box { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .65rem; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(219, 234, 254, .35); line-height: 1.4; }
.email-info-box strong { color: var(--accent); }
.email-connection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.email-connection-item { min-width: 0; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(219, 234, 254, .22); display: grid; gap: .25rem; }
.email-connection-item span { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .035em; }
.email-connection-item strong { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.email-connection-error { margin: 0; padding: .65rem .75rem; border: 1px solid #c94b4b; border-radius: 8px; overflow-wrap: anywhere; }
.email-connection-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; }
.email-template-test-card { display: grid; gap: .7rem; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.email-template-test-card p { margin: 0; }
.email-template-test-controls { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.3fr) auto; gap: .7rem; align-items: end; }
.email-template-test-controls .book-btn { white-space: nowrap; }
#emailTemplateTestResult { margin: 0; overflow-wrap: anywhere; }

#emailConnectionResult { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.email-settings label { display: grid; gap: .4rem; }
.email-settings label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .65rem; }
.email-settings input:not([type="checkbox"]), .email-settings textarea, .email-settings select { width: 100%; box-sizing: border-box; min-width: 0; font: inherit; }
.email-settings input[type="checkbox"] { width: auto; }
.email-settings fieldset { min-width: 0; margin: 1rem 0; padding: 1rem; border: 1px solid currentColor; border-radius: .5rem; display: grid; gap: .8rem; }
.email-format-bar { display: flex; gap: .5rem; margin-top: -.25rem; }
.email-format-bar .ghost-btn { padding: .4rem .65rem; min-height: 0; }
.email-preview { overflow-wrap: anywhere; font: inherit; border: 1px solid var(--border); border-radius: 10px; padding: .85rem; background: rgba(255,255,255,.55); }
.email-preview > :first-child { margin-top: 0; }
.email-preview > :last-child { margin-bottom: 0; }
.email-preview-frame { display: block; width: 100%; height: 390px; border: 0; border-radius: 9px; background: #f5f7fb; }
.email-message-shell { max-width: 640px; margin: 0 auto; overflow: hidden; border: 1px solid #dbe2ef; border-radius: 14px; background: #fff; color: #172033; font-family: "Segoe UI", Arial, sans-serif; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.email-message-subject { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 14px 24px; border-bottom: 1px solid #e5eaf2; background: #f8fafc; color: #172033; }
.email-message-subject-label { color: #60708a; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.email-message-subject-value { min-width: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.email-message-body { padding: 24px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.email-message-footer { padding: 14px 24px; border-top: 1px solid #e5eaf2; color: #60708a; font-size: 12px; }
#emailStatus, #emailResult { overflow-wrap: anywhere; margin: 0; }
/* Shared collapsible treatment for Template variables, Send Template Test, and Edit Template. */
.email-collapsible { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: rgba(219, 234, 254, .18); overflow: hidden; }
.email-collapsible > summary { cursor: pointer; list-style: none; padding: .72rem .85rem; font-weight: 700; color: var(--text); user-select: none; display: flex; align-items: center; gap: .45rem; }
.email-collapsible > summary::-webkit-details-marker { display: none; }
.email-collapsible > summary::before { content: "▸"; flex: 0 0 auto; font-size: 12px; transition: transform .15s ease; }
.email-collapsible[open] > summary::before { transform: rotate(90deg); }
.email-collapsible[open] > summary { border-bottom: 1px solid var(--border); }
.email-collapsible-body { min-width: 0; padding: .85rem; }
.email-placeholder-cheatsheet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem .9rem; padding: .72rem .85rem; font-size: 13px; }
.email-placeholder-cheatsheet section { min-width: 0; }
.email-placeholder-cheatsheet h4 { margin: 0 0 .3rem; font-size: 12px; color: var(--text); }
.email-placeholder-cheatsheet section > div { display: block; padding: .12rem 0; min-width: 0; }
.email-placeholder-cheatsheet code { color: var(--accent); font-weight: 700; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.email-placeholder-note { margin: 0; padding: 0 .85rem .7rem; font-size: 12px; }
.email-preview-logo { display: inline-block; vertical-align: middle; max-width: 220px; max-height: 90px; width: auto; height: auto; margin: 2px 12px 2px 0; }
.email-subsection .modal-actions { margin-top: .25rem; }
@media (max-width: 1500px) {
  .email-placeholder-cheatsheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .email-placeholder-cheatsheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .email-connection-grid { grid-template-columns: 1fr; }
  .email-template-test-controls { grid-template-columns: 1fr; }
  .email-template-test-controls .book-btn { width: 100%; }
  .email-subtab-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .email-subtab-btn { width: 100%; min-width: 0; padding: .55rem .35rem; font-size: 14px; }
  .email-settings fieldset { margin: .7rem 0; padding: .75rem; gap: .7rem; }
  .email-settings textarea { min-height: 210px; }
  .email-subsection .modal-actions { position: static; bottom: auto; z-index: auto; margin: .25rem 0 0; padding: 0; background: transparent; border-top: 0; grid-template-columns: minmax(0, 1fr); }
  .email-preview { padding: .6rem; }
  .email-message-subject { grid-template-columns: 1fr; gap: 3px; padding: 12px 16px; }
  .email-message-subject-value { font-size: 14px; }
  .email-message-body { padding: 18px 16px; font-size: 14px; }
  .email-message-footer { padding: 12px 16px; }
  .preferences-modal { width: min(460px, calc(100vw - 12px)); }
}
@media (max-width: 600px) {
  .email-placeholder-cheatsheet { grid-template-columns: 1fr; gap: .7rem; padding: .65rem .7rem; font-size: 12.5px; }
  .email-placeholder-cheatsheet code { font-size: 11.5px; }
  .email-placeholder-note { padding: 0 .7rem .65rem; font-size: 11.5px; }
}
.preferences-modal { width: min(460px, calc(100vw - 28px)); padding: 18px; }
.preferences-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.preferences-header h2 { margin: 0 0 4px; font-size: 22px; }
.preferences-header p { margin: 0; }
.dialog-close-btn { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 27px; line-height: 1; }
.dialog-close-btn:hover { background: var(--accent-soft); color: var(--accent); }
.preferences-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.preferences-section h3 { margin: 0 0 6px; font-size: 15px; }
.preferences-section p { margin: 0 0 12px; }
.preferences-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preferences-theme-grid .theme-choice { width: auto; }
.preferences-theme-grid .theme-choice-wide { grid-column: 1 / -1; }
/* v27: keep the phone layout override after the default two-column definition. */
@media (max-width: 380px) {
  .email-subtab-btn { padding-left: .2rem; padding-right: .2rem; font-size: 13px; }
  .preferences-theme-grid { grid-template-columns: 1fr; }
  .preferences-theme-grid .theme-choice-wide { grid-column: auto; }
}
.preferences-toggle { display: flex; align-items: center; gap: 9px; font-weight: 600; cursor: pointer; }
.preferences-toggle input { width: 18px; height: 18px; }
.user-menu-dropdown .user-menu-item.danger { margin-top: 5px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }

/* Outlook-style rich text template editor. Formatting is visual in the browser;
   only a small safe subset (bold + the dynamic app link) is serialized. */
.email-rich-editor-label { display: grid; gap: .4rem; }
.email-rich-editor {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 220px;
  max-height: 520px;
  overflow: auto;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.email-rich-editor:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(25, 65, 133, .12);
}
.email-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.email-rich-editor > div { min-height: 1.5em; }
.email-rich-editor a,
.email-preview-line a {
  color: #194185;
  font-weight: 700;
  text-decoration: underline;
}
.email-rich-editor a { cursor: text; }
.email-format-bar { align-items: center; flex-wrap: wrap; }
.email-format-button { user-select: none; }
.email-preview-line { min-height: 1.55em; }
.email-preview-spacer { height: 12px; min-height: 12px; line-height: 12px; }

html[data-theme="aura"] .email-rich-editor {
  color: var(--text);
  background: rgba(3, 17, 27, .62);
  border-color: rgba(148, 211, 226, .26);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="aura"] .email-rich-editor:focus {
  border-color: rgba(80, 214, 225, .72);
  box-shadow: 0 0 0 3px rgba(46,190,211,.13), inset 0 1px 4px rgba(0,0,0,.2);
}
html[data-theme="aura"] .email-rich-editor a { color: #7ceeff; }

html[data-theme="cyberpunk"] .email-rich-editor {
  color: #f5f3ff;
  border-color: rgba(33,230,255,.32);
  border-radius: 4px;
  background: rgba(3,7,17,.88);
  box-shadow: inset 0 0 8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,31,142,.04);
}
html[data-theme="cyberpunk"] .email-rich-editor:focus {
  border-color: #21e6ff;
  box-shadow: 0 0 0 2px rgba(33,230,255,.18), 0 0 14px rgba(33,230,255,.17), inset 0 0 8px rgba(0,0,0,.55);
}
html[data-theme="cyberpunk"] .email-rich-editor a { color: #21e6ff; }

html[data-theme="arctic"] .email-rich-editor {
  color: var(--text);
  border-color: #8da9ba;
  background: linear-gradient(180deg, #fff, #f4f9fc);
  box-shadow: inset 0 1px 3px rgba(26,63,86,.14), 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="arctic"] .email-rich-editor:focus {
  border-color: #3b91c9;
  box-shadow: 0 0 0 3px rgba(67,157,216,.20), inset 0 1px 3px rgba(26,63,86,.12);
}

html[data-theme="luna"] .email-rich-editor {
  color: var(--text);
  border-color: #7f9db9;
  background: #fff;
  box-shadow: inset 1px 1px 2px rgba(45,78,112,.17), 0 1px 0 #fff;
}
html[data-theme="luna"] .email-rich-editor:focus {
  border-color: #316ac5;
  box-shadow: 0 0 0 2px rgba(49,106,197,.20), inset 1px 1px 2px rgba(45,78,112,.14);
}

@media (max-width: 720px) {
  .email-rich-editor { min-height: 210px; max-height: 430px; }
  .email-format-bar { gap: .4rem; }
  .email-format-bar .ghost-btn { width: auto; min-width: 88px; }
}

html[data-theme="aura"] .email-collapsible { background: rgba(3,17,27,.50); border-color: rgba(148,211,226,.24); }
html[data-theme="cyberpunk"] .email-collapsible { background: rgba(3,7,17,.78); border-color: rgba(33,230,255,.28); }

/* One-at-a-time template editor. Cards stay in the DOM so unsaved edits survive switching. */
.email-settings fieldset[data-email-type][hidden] { display: none !important; }
.email-template-editor-body { padding: .85rem; }
.email-template-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  min-width: 0;
}
.email-template-editor-column,
.email-template-preview-column,
#emailTemplates { min-width: 0; }
.email-template-editor-column > #emailTemplates > fieldset[data-email-type] { margin: 0; }
.email-template-preview-column {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 100%;
}
.email-template-preview-fieldset {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}
.email-template-preview-column .email-preview {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}
.email-template-preview-column .email-preview > p {
  margin: 0;
}
.email-template-preview-column .email-message-shell {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
}
.email-template-preview-column .email-message-body {
  flex: 1 1 auto;
}

.email-template-editor-picker {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  gap: .55rem .75rem;
  margin: 0 0 .8rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(219, 234, 254, .18);
}
.email-template-editor-picker > .small-text { grid-column: 1 / -1; }
.email-template-editor-picker select { width: 100%; }
.email-template-test-controls.email-template-test-controls-current { grid-template-columns: minmax(240px, 1fr) auto; }
.email-template-editor-actions.modal-actions {
  position: static;
  bottom: auto;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
  margin: .25rem 0 0;
  padding: 0;
  background: transparent;
  border-top: 0;
  box-shadow: none;
}
.email-template-editor-actions.modal-actions button { width: auto; min-width: 0; }
#emailTemplatePreview[aria-busy="true"] { cursor: progress; }
html[data-theme="aura"] .email-template-editor-picker {
  background: rgba(3,17,27,.50);
  border-color: rgba(148,211,226,.24);
}
html[data-theme="cyberpunk"] .email-template-editor-picker {
  background: rgba(3,7,17,.78);
  border-color: rgba(33,230,255,.28);
}
@media (max-width: 1100px) {
  .email-template-workspace { grid-template-columns: minmax(0, 1fr); }

  /* Once the editor/preview stack, let the preview return to natural content height.
     The desktop equal-height flex rules otherwise collapse the message shell on
     mobile/desktop-mode phone viewports because there is no definite row height. */
  .email-template-preview-column {
    min-height: 0;
  }
  .email-template-preview-fieldset {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
  }
  .email-template-preview-column .email-preview {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
  }
  .email-template-preview-column .email-message-shell {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
  }
  .email-template-preview-column .email-message-body {
    flex: 0 0 auto;
  }
}
@media (max-width: 760px) {
  .email-template-editor-picker { grid-template-columns: 1fr; }
  .email-template-editor-picker > .small-text { grid-column: auto; }
  .email-template-test-controls.email-template-test-controls-current { grid-template-columns: 1fr; }
  .email-template-test-controls.email-template-test-controls-current .book-btn { width: 100%; }
}
@media (max-width: 720px) {
  .email-template-editor-actions.modal-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .email-template-editor-actions.modal-actions button { width: 100%; }
}

/* Hidden variable groups must not inherit any theme's grid display rule. */
.email-placeholder-cheatsheet [data-email-variables][hidden] { display: none !important; }

/* Organization-managed automatic alerts: local to Email/Preference, all themes. */
.email-policy-option { display: grid; gap: .35rem; min-width: 0; }
.email-policy-toggle { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.email-policy-toggle input { flex: 0 0 auto; width: 18px; height: 18px; margin: .1em 0 0; }
.email-policy-toggle span { min-width: 0; overflow-wrap: anywhere; }
.email-policy-option p { margin: 0; line-height: 1.45; }
.email-policy-option.is-disabled .email-policy-toggle { color: var(--muted); cursor: not-allowed; }
#preferencesEmailPolicyNote { margin: .75rem 0 0; line-height: 1.45; }
#preferencesEmailPolicyNote[hidden], #preferencesEmailSection[hidden] { display: none !important; }

/* Template colors are a vetted palette: CSS classes keep CSP style-src 'self' intact.
   The email sender uses the matching explicit color in the generated HTML. */
.email-format-color-picker { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:13px; }
.email-format-color-picker select { min-height:34px; padding: .3rem .55rem; min-width:125px; max-width:175px; }
.email-rich-editor .email-color-red, .email-preview-line .email-color-red { color:#b42318; }
.email-rich-editor .email-color-orange, .email-preview-line .email-color-orange { color:#9a4b00; }
.email-rich-editor .email-color-green, .email-preview-line .email-color-green { color:#127047; }
.email-rich-editor .email-color-blue, .email-preview-line .email-color-blue { color:#195bb5; }
.email-rich-editor .email-color-purple, .email-preview-line .email-color-purple { color:#7034a0; }
.email-rich-editor .email-color-gray, .email-preview-line .email-color-gray { color:#586374; }

/* Dark editor themes require lighter accessible swatches; the email preview
   stays white to match recipients' actual message backgrounds. */
html[data-theme="aura"] .email-rich-editor .email-color-red,
html[data-theme="cyberpunk"] .email-rich-editor .email-color-red {color:#ff9292;}
html[data-theme="aura"] .email-rich-editor .email-color-orange,
html[data-theme="cyberpunk"] .email-rich-editor .email-color-orange {color:#ffbe78;}
html[data-theme="aura"] .email-rich-editor .email-color-green,
html[data-theme="cyberpunk"] .email-rich-editor .email-color-green {color:#89e6b3;}
html[data-theme="aura"] .email-rich-editor .email-color-blue,
html[data-theme="cyberpunk"] .email-rich-editor .email-color-blue {color:#8dbdff;}
html[data-theme="aura"] .email-rich-editor .email-color-purple,
html[data-theme="cyberpunk"] .email-rich-editor .email-color-purple {color:#d7a4ff;}
html[data-theme="aura"] .email-rich-editor .email-color-gray,
html[data-theme="cyberpunk"] .email-rich-editor .email-color-gray {color:#c7d1d8;}