@import 'quill/dist/quill.core.css';

/* ================================================================
   RICH TEXT EDITOR — the panel skin for Quill 2

   Quill core ships the mechanics only: the contenteditable box, the
   list counters, the placeholder hook. Everything a person can see is
   set here, from the same RedFamosa tokens (--color-*) as the rest of
   the panel, so the editor changes colour with the .dark theme toggle
   instead of staying a white rectangle on a dark page.

   The writing surface (`.rte .ql-editor`) is kept in step with
   `.rf-richtext` — the prose class the public CMS pages already use —
   so what you type looks like what gets printed at /p/{slug}.
   ================================================================ */

.rte {
    --rte-min: 200px;

    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    overflow: hidden;
}

/* The same ring every other field in the product uses. The class comes
   from Alpine because the focus lives in a contenteditable child, and
   :focus-within would also light up while the link popover is open. */
.rte.is-focus {
    border-color: var(--color-primary-500);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.rte.is-readonly { opacity: .75; }

/* ── Toolbar ─────────────────────────────────────────────────────── */

/* Wraps rather than scrolls: a toolbar that runs off the side of a
   phone hides its own last button, and nothing here is optional. */
.rte-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.rte-group { display: flex; align-items: center; gap: 2px; }

.rte-group + .rte-group {
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--color-border);
}

.rte-bar button {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.rte-bar button:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }
.rte-bar button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); }
.rte-bar button:disabled { opacity: .5; cursor: not-allowed; }

/* Quill writes ql-active itself while the caret sits inside a format.
   Matches the panel's own "active on soft" treatment (see .rf-nav-item-active). */
.rte-bar button.ql-active { background: var(--color-primary-soft); color: var(--color-primary-700); }
.dark .rte-bar button.ql-active { color: var(--color-primary-400); }

.rte-bar .ic {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Link popover ────────────────────────────────────────────────── */

/* In the flow, not floating: an absolutely positioned panel has to
   guess where the toolbar ends, and the toolbar wraps to two rows on a
   phone. A row that pushes the canvas down is always in the right place. */
.rte-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.rte-link label { font-size: 12px; font-weight: 650; color: var(--color-text-muted); }
.rte-link .rf-input { height: 34px; flex: 1 1 180px; min-width: 0; }
.rte-link .rte-link-act { display: flex; gap: 6px; margin-left: auto; }

/* ── The writing surface ─────────────────────────────────────────── */

/* Quill core pins the container to height:100%, which collapses to
   nothing inside a form field. */
.rte-canvas.ql-container {
    font-family: inherit;
    font-size: 14px;
    height: auto;
}

.rte .ql-editor {
    min-height: var(--rte-min);
    max-height: 460px;
    padding: 12px 14px;
    color: var(--color-text);
    line-height: 1.65;
    overflow-y: auto;
}

.rte .ql-editor:focus { outline: none; }

/* Quill core paints the placeholder near-black and italic. */
.rte .ql-editor.ql-blank::before {
    left: 14px;
    right: 14px;
    color: var(--color-text-subtle);
    font-style: normal;
}

/* Textarea shown only when the editor chunk fails to load. */
.rte-fallback { border: none; border-radius: 0; background: var(--color-surface-2); }
.rte-fallback:focus { box-shadow: none; }

/* ── Editor typography: kept in step with .rf-richtext ───────────── */

.rte .ql-editor > * + * { margin-top: 10px; }

.rte .ql-editor h2 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.rte .ql-editor h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; }

.rte .ql-editor blockquote {
    border-left: 3px solid var(--color-border-strong);
    padding-left: 12px;
    color: var(--color-text-muted);
}

.rte .ql-editor code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--color-surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
}

.rte .ql-editor a {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .rte-bar { gap: 1px; padding: 5px; }
    .rte-group + .rte-group { margin-left: 4px; padding-left: 4px; }
    .rte-link .rte-link-act { margin-left: 0; width: 100%; justify-content: flex-end; }
}