/* =========================================================================
   SatoriEditor — a zero-dependency, Astra-themed rich text editor.
   Replaces Summernote across the app. No iframe: the editing surface is a
   plain contenteditable, so theming (light/dark) is trivial and instant.

   Consumes ONLY Astra semantic tokens (tokens.css) so it auto-flips with the
   app theme. Served raw from public/ via vasset() — no Vite build needed.
   ========================================================================= */

.se {
    --se-radius: var(--radius-md, 10px);
    --se-gap: 4px;

    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-medium);
    border-radius: var(--se-radius);
    background: var(--surface-1);
    color: var(--color-text);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    /* overflow stays visible so dropdown menus can escape a tight modal;
       corners are rounded on the children instead. */
    overflow: visible;
    transition: border-color .18s var(--ease-standard, ease),
                box-shadow .18s var(--ease-standard, ease);
}

.se.se-focused {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.se.se-invalid {
    border-color: var(--color-error, #EF4444);
}

/* ---- Toolbar --------------------------------------------------------- */
.se-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--se-gap);
    padding: 6px 8px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    border-top-left-radius: calc(var(--se-radius) - 1px);
    border-top-right-radius: calc(var(--se-radius) - 1px);
    position: sticky;
    top: 0;
    z-index: 3;
}

.se-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 7px);
    background: transparent;
    color: var(--color-text-soft);
    font: inherit;
    font-size: var(--font-size-sm, 13px);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background .14s var(--ease-standard, ease),
                color .14s var(--ease-standard, ease),
                border-color .14s var(--ease-standard, ease);
}

.se-btn:hover {
    background: var(--surface-3);
    color: var(--color-text);
}

.se-btn:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px var(--color-brand-soft);
}

.se-btn.se-active {
    background: var(--color-brand-soft);
    color: var(--color-brand);
    border-color: var(--color-brand-medium);
}

.se-btn i { pointer-events: none; }

.se-sep {
    width: 1px;
    align-self: stretch;
    margin: 4px 2px;
    background: var(--border-soft);
}

.se-spacer { flex: 1 1 auto; }

/* ---- Dropdown menus (align / color / table) -------------------------- */
.se-menu-wrap { position: relative; }

.se-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: none;
    min-width: 44px;
    padding: 6px;
    background: var(--surface-1);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.se-menu.se-open { display: block; }
.se-menu-wrap.se-align-menu-right .se-menu { left: auto; right: 0; }

.se-menu-row { display: flex; gap: 4px; }
.se-menu-row + .se-menu-row { margin-top: 4px; }

/* color swatches */
.se-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    cursor: pointer;
    padding: 0;
    transition: transform .1s var(--ease-standard, ease);
}
.se-swatch:hover { transform: scale(1.12); }
.se-swatch.se-swatch-auto {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--color-text-soft);
    font-size: 11px; width: auto; padding: 0 8px; gap: 4px;
}
.se-color-custom {
    width: 100%;
    height: 28px;
    margin-top: 6px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--surface-2);
    cursor: pointer;
}

/* table size picker */
.se-grid {
    display: grid;
    grid-template-columns: repeat(8, 18px);
    grid-auto-rows: 18px;
    gap: 2px;
}
.se-grid-cell {
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    background: var(--surface-2);
    cursor: pointer;
}
.se-grid-cell.se-on {
    background: var(--color-brand-soft);
    border-color: var(--color-brand);
}
.se-grid-label {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ---- Admin config gear + panel --------------------------------------- */
.se-cog { color: var(--color-text-muted); }
.se-cog:hover { color: var(--color-brand); }

.se-config { min-width: 230px; padding: 8px; }
.se-config-head {
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 4px 8px;
}
.se-config-list { display: flex; flex-direction: column; gap: 1px; }
.se-config-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 6px 6px;
    border-radius: var(--radius-sm, 7px);
    cursor: pointer;
    font-size: var(--font-size-sm, 13px);
    color: var(--color-text);
    transition: background .12s var(--ease-standard, ease);
}
.se-config-row:hover { background: var(--surface-2); }
.se-config-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--color-brand); cursor: pointer; }
.se-config-label { display: inline-flex; align-items: center; gap: 7px; }
.se-config-label i { width: 15px; text-align: center; color: var(--color-text-soft); }
.se-config-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.se-config-hint { font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; }
.se-config-save {
    width: 100%;
    height: 34px;
    border: none;
    border-radius: var(--radius-sm, 7px);
    background: var(--cta-gradient, var(--color-brand));
    color: #fff;
    font: inherit;
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: filter .14s var(--ease-standard, ease);
}
.se-config-save:hover { filter: brightness(1.06); }
.se-config-save:disabled { opacity: .6; cursor: default; }

/* ---- Editing surface (the "document") -------------------------------- */
/* Word-metric defaults: mirrors what the export pipeline emits so what you
   type on screen approximates the final .docx / email render. */
.se-content {
    flex: 1 1 auto;
    min-height: 160px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--surface-1);
    color: var(--color-text);
    font-size: 15px;          /* ~11pt visual */
    line-height: 1.5;
    outline: none;
    word-break: break-word;
    position: relative;   /* anchor the placeholder overlay */
    border-bottom-left-radius: calc(var(--se-radius) - 1px);
    border-bottom-right-radius: calc(var(--se-radius) - 1px);
}

/* Placeholder overlays the first line (absolute) so it never pushes the caret
   onto a second line. */
.se-content.se-placeholder-shown::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Word-like block rhythm inside the document.
   --se-para-gap controls the on-screen space between paragraphs (cosmetic only;
   the exported .docx/email uses its own paragraph spacing). Tune per surface. */
.se-content { --se-para-gap: 0.25em; }
.se-content p { margin: 0 0 var(--se-para-gap); }
.se-content p:last-child { margin-bottom: 0; }
/* Restore native bullets/numbers — the app's global CSS resets list-style. */
.se-content ul,
.se-content ol { margin: 0 0 var(--se-para-gap); padding-left: 26px; }
.se-content ul { list-style: disc !important; }
.se-content ol { list-style: decimal !important; }
.se-content li { list-style: inherit !important; margin: 0 0 1px; }
.se-content a { color: var(--color-brand); text-decoration: underline; }
.se-content img { max-width: 100%; height: auto; border-radius: 4px; }

/* Tables render as a Word-style "paper" island (thin gray gridlines, white
   cells, dark text) regardless of the app theme — a true preview of the
   exported .docx/PDF table, not the dark UI chrome.
   !important + explicit display defeat the app-wide `table:not(.table-condensed)`
   rules and any responsive cell-stacking that would otherwise clobber it. */
.se-content table {
    display: table !important;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 4px 0 var(--se-para-gap);
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: none !important;
}
.se-content table thead { display: table-header-group !important; background: transparent !important; box-shadow: none !important; }
.se-content table tbody { display: table-row-group !important; }
.se-content table tr,
.se-content table tbody tr {
    display: table-row !important;
    background: transparent !important;
    transition: none !important;
}
.se-content table td,
.se-content table th {
    display: table-cell !important;
    border: 1px solid #bfbfbf !important;
    padding: 4px 8px !important;
    min-width: 28px;
    vertical-align: top;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 14px !important;
    text-transform: none !important;
}
.se-content table th {
    background: #f2f2f2 !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-bottom: 1px solid #bfbfbf !important;
}

/* Dark mode: the app-wide `html.dark table:not(.table-condensed) …` rules paint a
   dark grid + light text and out-specify the base .se-content rules above, so an
   editor table would preview as dark UI chrome — misleading, since the delivered
   email/exported doc is a neutral white "paper". Re-assert the paper look with
   selectors specific enough (…:not(.table-condensed) tbody tr:nth-child…) to win. */
html.dark .se-content table:not(.table-condensed) tbody tr,
html.dark .se-content table:not(.table-condensed) tbody tr:nth-child(odd),
html.dark .se-content table:not(.table-condensed) tbody tr:nth-child(even),
html.dark .se-content table:not(.table-condensed) tbody tr:hover,
html.dark .se-content table:not(.table-condensed) tbody tr:hover td,
html.dark .se-content table:not(.table-condensed) tbody tr:nth-child(odd) td,
html.dark .se-content table:not(.table-condensed) tbody tr:nth-child(even) td,
html.dark .se-content table:not(.table-condensed) tbody td {
    background-color: #ffffff !important;
    color: #111111 !important;
}
html.dark .se-content table:not(.table-condensed) thead th {
    background-color: #f2f2f2 !important;
    color: #111111 !important;
}

/* ---- Code view (raw HTML) ------------------------------------------- */
.se-code {
    display: none;
    width: 100%;
    min-height: 160px;
    max-height: 60vh;
    padding: 14px 16px;
    border: none;
    outline: none;
    resize: vertical;
    background: var(--surface-1);
    color: var(--color-text);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13px;
    line-height: 1.6;
}
.se.se-codeview .se-content { display: none; }
.se.se-codeview .se-code { display: block; }

/* ---- Fullscreen ------------------------------------------------------ */
.se.se-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 20000;
    border-radius: 0;
    max-height: none;
}
.se.se-fullscreen .se-content,
.se.se-fullscreen .se-code { max-height: none; height: 100%; }

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width: 640px) {
    .se-toolbar { gap: 2px; padding: 5px 6px; }
    .se-btn { min-width: 34px; height: 34px; }   /* larger touch targets */
    .se-content { font-size: 16px; }             /* avoid iOS zoom on focus */
}

@media (prefers-reduced-motion: reduce) {
    .se, .se-btn, .se-swatch { transition: none; }
}

/* ---- Insert-image dialog (Swal) — modern, elegant --------------------- */
.se-img-popup { border-radius: 16px !important; }
.se-img-modal { text-align: left; }
.se-img-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 26px 18px; cursor: pointer; text-align: center;
    border: 2px dashed color-mix(in srgb, var(--color-brand, #4f7cff) 45%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-brand, #4f7cff) 6%, transparent);
    transition: border-color .15s ease, background .15s ease;
}
.se-img-drop:hover {
    border-color: var(--color-brand, #4f7cff);
    background: color-mix(in srgb, var(--color-brand, #4f7cff) 11%, transparent);
}
.se-img-drop i { font-size: 26px; color: var(--color-brand, #4f7cff); }
.se-img-drop-title { font-weight: 600; font-size: 14px; color: var(--color-text, #1f2937); word-break: break-all; }
.se-img-drop-hint { font-size: 12px; color: var(--color-text-soft, #94a3b8); }
.se-img-drop--has { border-style: solid; border-color: var(--color-brand, #4f7cff); }
.se-img-or {
    display: flex; align-items: center; gap: 10px; margin: 16px 0;
    color: var(--color-text-soft, #94a3b8); font-size: 12px;
}
.se-img-or::before, .se-img-or::after {
    content: ""; flex: 1; height: 1px;
    background: color-mix(in srgb, var(--color-text-soft, #94a3b8) 30%, transparent);
}
.se-img-url {
    width: 100%; height: 42px; padding: 0 14px; font-size: 14px; box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--color-text-soft, #94a3b8) 40%, transparent);
    border-radius: 10px; background: transparent; color: var(--color-text, #1f2937); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.se-img-url:focus {
    border-color: var(--color-brand, #4f7cff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #4f7cff) 18%, transparent);
}