/* SGM-320 — Brand re-skin for the Quill 2.x rich-text editor used in
 * paragraph blocks of the email-template editor.
 *
 * Loaded AFTER quill.snow.css so cascade order makes our overrides win
 * without !important pollution. Where !important IS used, it's flagged
 * with a one-line "WHY: ..." comment naming what we're beating.
 *
 * Token map: every value below resolves to a token from public/css/app.css.
 * Zero raw hex outside the brand palette already defined there.
 */

/* ── Wrapper ────────────────────────────────────────────────── */
.rte-wrap {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-input);
  display: flex;
  flex-direction: column;
}
.rte-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

/* ── Toolbar (Quill .ql-toolbar) ───────────────────────────── */
.rte-wrap .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  padding: 4px 6px;
  font-family: var(--font-family-app, 'Montserrat', system-ui, sans-serif);
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

/* Quill groups buttons inside .ql-formats spans with margin-right.
 * Replace its margin-based separator with a border-right divider. */
.rte-wrap .ql-toolbar.ql-snow .ql-formats {
  margin-right: 0;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  border-right: 1px solid var(--border);
}
.rte-wrap .ql-toolbar.ql-snow .ql-formats:last-child { border-right: none; }
.rte-wrap .ql-toolbar.ql-snow .ql-formats:first-child { padding-left: 0; }

/* ── Toolbar buttons (B / I / U / S / lists / clean / mergetag) ── */
.rte-wrap .ql-toolbar.ql-snow button {
  width: 26px;
  height: 24px;
  padding: 3px 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition, 0.15s ease), color var(--transition, 0.15s ease);
}
.rte-wrap .ql-toolbar.ql-snow button:hover {
  background: var(--primary-bg);
  color: var(--primary);
}
.rte-wrap .ql-toolbar.ql-snow button.ql-active {
  background: var(--primary);
  color: var(--text-inverse);
}
/* Quill SVG icons inherit currentColor when stroke="currentColor" — but the
 * default Quill SVGs use stroke="#444". Force stroke to currentColor so
 * hover/active color tokens apply. WHY: Quill ships fixed-color SVGs. */
.rte-wrap .ql-toolbar.ql-snow button .ql-stroke,
.rte-wrap .ql-toolbar.ql-snow button .ql-stroke-miter {
  stroke: currentColor !important;
}
.rte-wrap .ql-toolbar.ql-snow button .ql-fill,
.rte-wrap .ql-toolbar.ql-snow button .ql-even {
  fill: currentColor !important;
}

/* ── Dropdowns: font + size + color ────────────────────────── */
.rte-wrap .ql-toolbar.ql-snow .ql-picker {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  height: 24px;
}
.rte-wrap .ql-toolbar.ql-snow .ql-picker-label {
  border: none;
  padding: 0 18px 0 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  height: 24px;
}
.rte-wrap .ql-toolbar.ql-snow .ql-picker-label:hover {
  background: var(--primary-bg);
  color: var(--primary);
}
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  background: var(--primary-bg);
  color: var(--primary);
  border: none;
}
/* The chevron caret on the right of the picker label */
.rte-wrap .ql-toolbar.ql-snow .ql-picker-label::before {
  font-size: 11px;
}
.rte-wrap .ql-toolbar.ql-snow .ql-picker-label svg .ql-stroke {
  stroke: currentColor !important;
}

/* Picker dropdown menu */
.rte-wrap .ql-toolbar.ql-snow .ql-picker-options {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
  margin-top: 4px;
  font-size: 12px;
}
.rte-wrap .ql-toolbar.ql-snow .ql-picker-item {
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text);
}
.rte-wrap .ql-toolbar.ql-snow .ql-picker-item:hover,
.rte-wrap .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
  background: var(--primary-bg);
  color: var(--primary);
}

/* ── Font dropdown — width only ──────────────────────────── */
/* Per-font labels live in the email-safe font block lower in this file
   (lines for arial / comic-sans / courier-new / georgia / helvetica /
   lucida / tahoma / times-new-roman / trebuchet / verdana). The legacy
   generic Sans-Serif/Serif/Monospace rules were removed because their
   higher specificity (the `.rte-wrap` prefix) was shadowing the per-font
   labels — making every dropdown option literally read "Sans Serif". */
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-font { width: 140px; }

/* Size dropdown — labels match the user reference (Image #2: "Normal") */
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: "Small"; }
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before { content: "Normal"; }
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: "Large"; }
.rte-wrap .ql-toolbar.ql-snow .ql-picker.ql-size { width: 78px; }

/* ── Color picker swatches ─────────────────────────────────── */
.rte-wrap .ql-toolbar.ql-snow .ql-color-picker .ql-picker-options {
  width: 152px;
  padding: 6px;
}
.rte-wrap .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 2px;
  padding: 0;
  border: 1.5px solid var(--border);
}
.rte-wrap .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--primary-bg);
}

/* ── Custom merge-tag button — styled as a pill on the right ── */
.rte-wrap .ql-toolbar.ql-snow .ql-mergetag {
  width: auto !important;  /* WHY: beat the 26px fixed width above */
  padding: 0 10px !important;
  margin-left: auto !important;  /* WHY: push to right edge of toolbar */
  background: var(--accent-bg) !important;
  color: var(--accent) !important;
  border-radius: 999px !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-family-mono, monospace);
}
.rte-wrap .ql-toolbar.ql-snow .ql-mergetag:hover {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}
.rte-wrap .ql-toolbar.ql-snow .ql-mergetag .ql-mergetag-label {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

/* SGM-427 hotfix (2026-05-13 21:42 IST): bubble theme mergetag button.
   Quill renders the toolbar item 'mergetag' as <button class="ql-mergetag">
   with no label. In snow theme it's styled as a pill; in bubble theme it
   was invisible (no width / no content). Maddy reported merge-tag insert
   not working — root cause: he couldn't see the button. Give it visible
   content via ::before and a brand-pill style so it's discoverable. */
.ql-bubble .ql-mergetag {
  width: auto !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: var(--primary-bg) !important;
  border-radius: 4px !important;
  height: 22px;
  margin: 0 2px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.ql-bubble .ql-mergetag::before {
  content: "+Tag";
  letter-spacing: 0.02em;
}
.ql-bubble .ql-mergetag:hover {
  background: var(--primary) !important;
  color: white !important;
}

/* ── Content area (.ql-container + .ql-editor) ─────────────── */
.rte-wrap .ql-container.ql-snow {
  border: none;
  font-family: var(--font-family-app, 'Montserrat', system-ui, sans-serif);
  font-size: 13px;
  background: var(--bg-input);
}
.rte-wrap .ql-editor {
  padding: 12px 14px;
  min-height: 120px;
  line-height: 1.6;
  color: var(--text);
}
.rte-wrap .ql-editor p { margin: 0 0 8px; }
.rte-wrap .ql-editor p:last-child { margin-bottom: 0; }
.rte-wrap .ql-editor strong { font-weight: 700; }
.rte-wrap .ql-editor em { font-style: italic; }
.rte-wrap .ql-editor ol,
.rte-wrap .ql-editor ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.rte-wrap .ql-editor li { margin-bottom: 2px; line-height: 1.5; }
/* Placeholder — shown when editor is empty. WHY: Quill's default
 * placeholder color is #aaa; we want our --text-dim token. */
.rte-wrap .ql-editor.ql-blank::before {
  color: var(--text-dim) !important;
  font-style: italic;
  left: 14px;
  right: 14px;
}

/* Tighten when nested inside the email-template edit panel
 * (.et-edit-panel scopes the rule). */
.et-edit-panel .rte-wrap .ql-editor { min-height: 110px; }

/* ── Merge-tag popover (custom — outside Quill) ───────────── */
.rte-merge-popover {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 220px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rte-merge-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  text-align: left;
}
.rte-merge-item:hover {
  background: var(--primary-bg);
  color: var(--primary);
}
.rte-merge-item-label { font-weight: 500; }
.rte-merge-item-token {
  font-family: var(--font-family-mono, monospace);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-code);
  padding: 1px 5px;
  border-radius: 3px;
}
.rte-merge-item:hover .rte-merge-item-token {
  background: var(--bg-card);
  color: var(--primary);
}

/* ── Fallback textarea (Quill failed to load) ─────────────── */
.rte-fallback-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text);
  resize: vertical;
  min-height: 120px;
}
.rte-fallback-textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-bg);
}

/* ─── Text-styling expansion (Mailchimp parity, 2026-05-12) ───
   Font dropdown items render in their own typeface so the user previews
   each font before picking. Literal font-family stacks are intentional —
   token-based abstraction would erase the preview effect.
   Rules apply to BOTH bubble (inline) and snow (toolbar-above) themes,
   so per-font labels show in the popup over the selection too. */
.ql-picker.ql-font .ql-picker-item[data-value="arial"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="arial"]::before { font-family: Arial, Helvetica, sans-serif; content: "Arial"; }
.ql-picker.ql-font .ql-picker-item[data-value="comic-sans"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="comic-sans"]::before { font-family: 'Comic Sans MS', 'Comic Sans', cursive; content: "Comic Sans"; }
.ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before { font-family: 'Courier New', Courier, monospace; content: "Courier New"; }
.ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before { font-family: Georgia, 'Times New Roman', serif; content: "Georgia"; }
.ql-picker.ql-font .ql-picker-item[data-value="helvetica"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="helvetica"]::before { font-family: Helvetica, Arial, sans-serif; content: "Helvetica"; }
.ql-picker.ql-font .ql-picker-item[data-value="lucida"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="lucida"]::before { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; content: "Lucida"; }
.ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before { font-family: Tahoma, Geneva, sans-serif; content: "Tahoma"; }
.ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before { font-family: 'Times New Roman', Times, serif; content: "Times New Roman"; }
.ql-picker.ql-font .ql-picker-item[data-value="trebuchet"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="trebuchet"]::before { font-family: 'Trebuchet MS', sans-serif; content: "Trebuchet MS"; }
.ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before,
.ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before { font-family: Verdana, Geneva, sans-serif; content: "Verdana"; }
/* Closed-picker label when nothing is selected — show "Font" rather than
   inheriting the default "Sans Serif" from Quill's stylesheet. */
.ql-picker.ql-font .ql-picker-label:not([data-value])::before { content: "Font"; }

/* Size dropdown items render at their actual px size for preview.
   No theme prefix so the rules apply in both snow + bubble toolbars. */
.ql-picker.ql-size .ql-picker-item[data-value="10px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="10px"]::before { content: "10"; }
.ql-picker.ql-size .ql-picker-item[data-value="12px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="12px"]::before { content: "12"; }
.ql-picker.ql-size .ql-picker-item[data-value="14px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="14px"]::before { content: "14"; }
.ql-picker.ql-size .ql-picker-item[data-value="16px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="16px"]::before { content: "16"; }
.ql-picker.ql-size .ql-picker-item[data-value="18px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="18px"]::before { content: "18"; }
.ql-picker.ql-size .ql-picker-item[data-value="20px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="20px"]::before { content: "20"; }
.ql-picker.ql-size .ql-picker-item[data-value="24px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="24px"]::before { content: "24"; }
.ql-picker.ql-size .ql-picker-item[data-value="28px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="28px"]::before { content: "28"; }
.ql-picker.ql-size .ql-picker-item[data-value="32px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="32px"]::before { content: "32"; }
.ql-picker.ql-size .ql-picker-item[data-value="36px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="36px"]::before { content: "36"; }
.ql-picker.ql-size .ql-picker-item[data-value="48px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="48px"]::before { content: "48"; }
.ql-picker.ql-size .ql-picker-item[data-value="60px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="60px"]::before { content: "60"; }
.ql-picker.ql-size .ql-picker-item[data-value="72px"]::before,
.ql-picker.ql-size .ql-picker-label[data-value="72px"]::before { content: "72"; }
.ql-picker.ql-size .ql-picker-label:not([data-value])::before { content: "Size"; }

/* Header levels — apply to both bubble + snow themes. */
.ql-picker.ql-header .ql-picker-item[data-value="1"]::before,
.ql-picker.ql-header .ql-picker-label[data-value="1"]::before { content: "Heading 1"; font-weight: 700; font-size: 16px; }
.ql-picker.ql-header .ql-picker-item[data-value="2"]::before,
.ql-picker.ql-header .ql-picker-label[data-value="2"]::before { content: "Heading 2"; font-weight: 700; font-size: 15px; }
.ql-picker.ql-header .ql-picker-item[data-value="3"]::before,
.ql-picker.ql-header .ql-picker-label[data-value="3"]::before { content: "Heading 3"; font-weight: 700; font-size: 14px; }
.ql-picker.ql-header .ql-picker-item[data-value="4"]::before,
.ql-picker.ql-header .ql-picker-label[data-value="4"]::before { content: "Heading 4"; font-weight: 700; font-size: 13px; }
.ql-picker.ql-header .ql-picker-item:not([data-value])::before,
.ql-picker.ql-header .ql-picker-label:not([data-value])::before { content: "Paragraph"; }

/* Line-height + letter-spacing dropdowns — value attribute IS the label. */
.ql-picker.ql-lineheight .ql-picker-item::before,
.ql-picker.ql-lineheight .ql-picker-label[data-value]::before { content: attr(data-value); }
.ql-picker.ql-letterspacing .ql-picker-item::before,
.ql-picker.ql-letterspacing .ql-picker-label[data-value]::before { content: attr(data-value); }
.ql-picker.ql-lineheight .ql-picker-label:not([data-value])::before { content: "Line"; }
.ql-picker.ql-letterspacing .ql-picker-label:not([data-value])::before { content: "Spacing"; }
.ql-picker.ql-lineheight,
.ql-picker.ql-letterspacing {
  width: 70px;
}

/* Expanded bubble toolbar may overflow horizontally with so many controls;
   allow it to wrap on narrow viewports. */
.ql-bubble .ql-toolbar { flex-wrap: wrap; max-width: 720px; }