/* ============================================================
   AliothEditor — styles
   ------------------------------------------------------------
   Every color comes from the live --adm-* admin palette, so
   light/dark mode and any future admin re-theming apply
   automatically. No hardcoded colors, no external assets.
   Fallbacks mirror admin.css defaults (same convention as the
   Page Builder / Popup Manager styles).
   ============================================================ */

.ae-editor {
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: var(--adm-radius, 8px);
    background: var(--adm-surface, #fff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ae-editor:focus-within {
    border-color: var(--adm-primary, #4e6b8c);
}

/* ── Tab bar ── */
.ae-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 6px 0;
    border-bottom: 1px solid var(--adm-border, #cbd5e1);
    background: var(--adm-surface-alt, #f1f5f9);
}
.ae-tab {
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--adm-text-muted, #636b78);
    font: inherit;
    font-size: .85rem;
    padding: .4rem .85rem;
    border-radius: var(--adm-radius, 8px) var(--adm-radius, 8px) 0 0;
    cursor: pointer;
}
.ae-tab:hover { color: var(--adm-text, #1e293b); }
.ae-tab.is-active {
    background: var(--adm-surface, #fff);
    color: var(--adm-text, #1e293b);
    border-color: var(--adm-border, #cbd5e1);
    margin-bottom: -1px;
    font-weight: 600;
}
.ae-tabs-spacer { flex: 1; }
.ae-readonly-badge {
    font-size: .78rem;
    color: var(--adm-text-muted, #636b78);
    padding: 0 .5rem;
}

/* ── Toolbar ── */
.ae-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid var(--adm-border, #cbd5e1);
    background: var(--adm-surface, #fff);
}
.ae-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--adm-text, #1e293b);
    cursor: pointer;
    padding: 0;
}
.ae-btn svg { width: 16px; height: 16px; }
.ae-btn:hover { background: var(--adm-surface-alt, #f1f5f9); }
.ae-btn.is-active {
    background: var(--adm-surface-alt, #f1f5f9);
    border-color: var(--adm-primary, #4e6b8c);
    color: var(--adm-primary, #4e6b8c);
}
.ae-sep {
    width: 1px;
    height: 20px;
    background: var(--adm-border, #cbd5e1);
    margin: 0 4px;
}
.ae-block-select {
    font: inherit;
    font-size: .82rem;
    padding: .25rem .4rem;
    border: 1px solid var(--adm-input-border, var(--adm-border, #cbd5e1));
    border-radius: 4px;
    background: var(--adm-surface, #fff);
    color: var(--adm-text, #1e293b);
    max-width: 130px;
}

/* Color palettes (newsletter only, opts.colors) */
.ae-color-wrap { position: relative; display: inline-flex; }
.ae-palette {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    grid-template-columns: repeat(6, 20px);
    gap: 4px;
    padding: 6px;
    background: var(--adm-surface, #fff);
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: var(--adm-radius, 8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.ae-color-wrap:hover .ae-palette,
.ae-color-wrap:focus-within .ae-palette { display: grid; }
.ae-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}
.ae-swatch-none {
    background: var(--adm-surface, #fff);
    color: var(--adm-text-muted, #636b78);
    font-size: 11px;
    line-height: 1;
}

/* ── Panes ── */
.ae-panes { position: relative; }
.ae-pane {
    display: none;
    position: absolute;
    inset: 0;
}
.ae-pane.is-active { display: block; }

.ae-visual {
    height: 100%;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    outline: none;
    color: var(--adm-text, #1e293b);
    font-size: 16px;
    line-height: 1.6;
}
.ae-source {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    padding: 1rem 1.25rem;
    background: var(--adm-surface, #fff);
    color: var(--adm-text, #1e293b);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.55;
    tab-size: 4;
}

/* ── Content styling inside the visual pane ──
   Mirrors the old TinyMCE content_style from base.html, but as
   plain CSS on admin tokens — no iframe, no JS-built styles. */
.ae-content a { color: var(--adm-primary, #4e6b8c); }
.ae-content h1, .ae-content h2, .ae-content h3,
.ae-content h4, .ae-content h5, .ae-content h6 {
    line-height: 1.25;
    margin: 1.2em 0 .5em;
}
.ae-content h1:first-child, .ae-content h2:first-child,
.ae-content p:first-child { margin-top: 0; }
.ae-content code, .ae-content kbd, .ae-content samp {
    background: var(--adm-surface-alt, #f1f5f9);
    color: var(--adm-text, #1e293b);
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: 3px;
    padding: .1rem .3rem;
    font-size: .9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ae-content pre {
    background: var(--adm-surface-alt, #f1f5f9);
    color: var(--adm-text, #1e293b);
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: 6px;
    padding: .75rem 1rem;
    overflow: auto;
}
.ae-content pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
    display: block;
    white-space: pre;
}
.ae-content blockquote {
    border-left: 3px solid var(--adm-border, #cbd5e1);
    margin-left: 0;
    padding-left: 1rem;
    color: var(--adm-text-muted, #636b78);
}
.ae-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.ae-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}
.ae-content th, .ae-content td {
    border: 1px solid var(--adm-border, #cbd5e1);
    padding: .45rem .65rem;
    text-align: left;
    min-width: 3rem;
}
.ae-content th { background: var(--adm-surface-alt, #f1f5f9); }
.ae-content hr {
    border: none;
    border-top: 1px solid var(--adm-border, #cbd5e1);
    margin: 1.5em 0;
}
.ae-content mark {
    background: var(--adm-primary, #4e6b8c);
    color: var(--adm-surface, #fff);
    padding: 0 .15em;
    border-radius: 2px;
}
.ae-content ul, .ae-content ol { padding-left: 1.5em; }

/* Alignment helper classes — these travel WITH the content into
   the DB, so the same rules must exist on the public side (added
   to typography.css). */
.ae-content .ae-align-center, .ae-align-center { text-align: center; }
.ae-content .ae-align-right,  .ae-align-right  { text-align: right; }

/* ── Footer ── */
.ae-footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 10px;
    border-top: 1px solid var(--adm-border, #cbd5e1);
    background: var(--adm-surface-alt, #f1f5f9);
}
.ae-count {
    font-size: .74rem;
    color: var(--adm-text-muted, #636b78);
}

/* ── Fullscreen ── */
.ae-editor.ae-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    border-radius: 0;
}
.ae-editor.ae-fullscreen .ae-panes {
    flex: 1;
    height: auto !important;
}
body.ae-body-lock { overflow: hidden; }

/* ── Readonly (page uses the Builder) ── */
.ae-editor.ae-readonly .ae-visual { cursor: default; }
.ae-editor.ae-readonly .ae-source { opacity: .8; }

/* ============================================================
   Page Builder block preview bridge
   ------------------------------------------------------------
   Builder pages store their RENDERED HTML in page.content, so
   the read-only Visual tab shows the actual blocks. Those
   blocks are styled by page-builder-blocks.css, which uses the
   PUBLIC theme's --ap-* variables — none of which exist inside
   the admin panel. Without this bridge the blocks would fall
   back to browser defaults (unreadable in dark mode — the same
   trap the old TinyMCE content_style comment warned about).

   So: map every --ap-* variable page-builder-blocks.css uses
   onto the LIVE --adm-* palette (colors) or neutral constants
   (spacing/typography). Scoped to .ae-visual only — the public
   site is untouched. page-builder-blocks.css itself is included
   by pages/edit.html & pages/translate.html when use_builder.
   ============================================================ */
.ae-editor .ae-visual {
    /* Colors -> live admin palette (light & dark both work) */
    --ap-color-bg: var(--adm-surface, #fff);
    --ap-color-surface: var(--adm-surface, #fff);
    --ap-color-surface-alt: var(--adm-surface-alt, #f1f5f9);
    --ap-color-text: var(--adm-text, #1e293b);
    --ap-color-text-secondary: var(--adm-text-muted, #636b78);
    --ap-color-text-muted: var(--adm-text-muted, #636b78);
    --ap-color-border: var(--adm-border, #cbd5e1);
    --ap-color-primary: var(--adm-primary, #4e6b8c);
    --ap-color-primary-hover: var(--adm-primary-hover, var(--adm-primary, #3d5573));
    --ap-color-primary-subtle: var(--adm-surface-alt, #f1f5f9);
    --ap-color-text-inverse: #fff;
    --ap-color-accent: var(--adm-primary, #4e6b8c);
    --ap-color-link: var(--adm-primary, #4e6b8c);
    --ap-color-link-hover: var(--adm-primary, #4e6b8c);
    --ap-color-white: #fff;
    --ap-color-black: #000;
    --ap-color-success: #15803d;
    --ap-color-success-subtle: rgba(21, 128, 61, .12);
    --ap-color-error: #b91c1c;
    --ap-color-error-subtle: rgba(185, 28, 28, .12);
    --ap-color-warning: #a16207;
    --ap-color-info: #1d4ed8;
    /* NOTE: --ap-section-bg / --ap-section-bg-dark are deliberately NOT
       bridged. They are per-section values written INLINE by the block
       renderer; defining them here would shadow the stylesheet's
       fallback chain var(--ap-section-bg, var(--ap-footer-bg)) and
       sections without a configured background would lose the theme's
       footer color. --ap-footer-bg below is the safety net instead. */
    --ap-footer-bg: var(--adm-surface-alt, #f1f5f9);
    /* Typography / spacing -> sane neutral constants (a preview
       doesn't need the theme's exact scale, just readability) */
    --ap-font-body: inherit;
    --ap-font-heading: inherit;
    --ap-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ap-font-weight-normal: 400;
    --ap-font-weight-medium: 500;
    --ap-font-weight-semibold: 600;
    --ap-font-weight-bold: 700;
    --ap-text-xs: .75rem;  --ap-text-sm: .875rem; --ap-text-base: 1rem;
    --ap-text-lg: 1.125rem; --ap-text-xl: 1.25rem;
    --ap-text-2xl: 1.5rem;  --ap-text-3xl: 1.875rem;
    --ap-leading-tight: 1.25; --ap-leading-normal: 1.6; --ap-leading-relaxed: 1.75;
    --ap-space-1: .25rem; --ap-space-2: .5rem;  --ap-space-3: .75rem;
    --ap-space-4: 1rem;   --ap-space-5: 1.25rem; --ap-space-6: 1.5rem;
    --ap-space-8: 2rem;   --ap-space-10: 2.5rem; --ap-space-12: 3rem;
    --ap-space-16: 4rem;  --ap-space-20: 5rem;   --ap-space-24: 6rem;
    --ap-radius-sm: 4px; --ap-radius-md: 8px; --ap-radius-lg: 12px;
    --ap-radius-full: 9999px;
    --ap-border-width: 1px;
    --ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .12);
    --ap-transition-fast: .15s ease; --ap-transition-normal: .25s ease;
    --ap-transition-slow: .4s ease;
    --ap-container-max: 100%; --ap-container-narrow: 100%;
    --ap-container-pad: 0px;
    --ap-page-content-width: 100%;
    --ap-img-native: auto;
    --ap-ticker-speed: 30s;
}

/* ── Button blocks inside the preview ──
   The BASE .ap-btn rules live in components.css (the public
   design system), which the admin panel never loads —
   page-builder-blocks.css only carries size/hover overrides on
   top of that base. Without the base, Button / form-submit /
   slideshow CTA blocks collapse into plain underlined links in
   the read-only Visual preview. Mirror the components.css base
   here, scoped to .ae-visual so the admin's own .btn styles and
   the public site stay untouched. */
.ae-editor .ae-visual .ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ap-space-2);
    padding: var(--ap-space-2) var(--ap-space-4);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-sm);
    font-weight: var(--ap-font-weight-medium);
    line-height: var(--ap-leading-tight);
    border-radius: var(--ap-radius-md);
    border: var(--ap-border-width) solid transparent;
    cursor: pointer;
    transition: all var(--ap-transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.ae-editor .ae-visual .ap-btn--sm {
    padding: var(--ap-space-1) var(--ap-space-3);
    font-size: var(--ap-text-sm);
}
.ae-editor .ae-visual .ap-btn--md {
    padding: var(--ap-space-2) var(--ap-space-5);
    font-size: var(--ap-text-base);
}
.ae-editor .ae-visual .ap-btn--lg {
    padding: var(--ap-space-3) var(--ap-space-6);
    font-size: var(--ap-text-lg);
}
.ae-editor .ae-visual .ap-btn--primary {
    background: var(--ap-color-primary);
    color: var(--ap-color-text-inverse);
}
.ae-editor .ae-visual .ap-btn--primary:hover {
    background: var(--ap-color-primary-hover);
    color: var(--ap-color-text-inverse);
}
.ae-editor .ae-visual .ap-btn--outline {
    background: transparent;
    color: var(--ap-color-primary);
    border-color: var(--ap-color-primary);
}
.ae-editor .ae-visual .ap-btn--outline:hover {
    background: var(--ap-color-primary);
    color: var(--ap-color-text-inverse);
}
.ae-editor .ae-visual .ap-btn--ghost {
    background: transparent;
    color: var(--ap-color-text-secondary);
}
.ae-editor .ae-visual .ap-btn--ghost:hover {
    background: var(--ap-color-surface);
    color: var(--ap-color-text);
}

/* ── Light/dark MODE of the section preview ──
   page-builder-blocks.css decides a section's light vs dark styling by
   the presence of .light-theme on <html> — a class only the PUBLIC
   site toggles. Inside the admin, <html> never carries it, so the
   stylesheet's ":root:not(.light-theme)" branch (= dark mode) ALWAYS
   won and the read-only preview showed dark-mode backgrounds and
   overlays even in the light admin — e.g. a near-black dark background
   under dark admin text. Mirror the public LIGHT-mode rules here,
   keyed on the admin's resolved body[data-theme="light"], with
   (0,3,1) specificity to beat the stylesheet's (0,3,0) dark branch.
   Dark admin mode needs no rules: the stylesheet's default branch is
   already the dark one, which is exactly what a dark admin should show.
   Scoped to .ae-visual — the public site and the builder canvas (which
   uses its own .pb-section-zone preview) are untouched. */
body[data-theme="light"] .ae-visual .ap-section {
    background: var(--ap-section-bg, var(--ap-footer-bg));
}
body[data-theme="light"] .ae-visual .ap-section__overlay--dark { display: none; }
body[data-theme="light"] .ae-visual .ap-section__overlay--light { display: block; }
@supports (background-image: image-set(url(x) type("image/avif"))) {
    /* Order matters: when a section has BOTH image sets, the light one
       (declared last, same specificity) must win in light mode. */
    body[data-theme="light"] .ae-visual .ap-section--has-image-bg-dark-set {
        background-image: none;
    }
    body[data-theme="light"] .ae-visual .ap-section--has-image-bg-set {
        background-image: var(--ap-section-bg-set);
    }
}

/* ── Links inside the preview ──
   On the PUBLIC site the base link color comes from core.css's global
   `a { color: var(--ap-color-link) }` — a stylesheet the admin never
   loads. Without this mirror, links that have no more specific rule in
   page-builder-blocks.css (table cells, quotes, galleries — anything
   outside a text block's .ap-prose) fell through to the editor's own
   `.ae-content a { color: var(--adm-primary) }` and showed the ADMIN
   accent instead of the theme's link color. Scoped to .ap-block (every
   rendered builder block is wrapped in it), so links in regular
   non-builder editing keep their admin styling.
   Specificity: (0,2,1) beats .ae-content a (0,1,1); ties with
   .ap-block--text .ap-prose a (0,2,1) resolve to this later-loaded
   rule — same variable, no visual change; loses to the .ap-btn
   mirrors (0,3,0) above and to the section/slideshow --text-* link
   rules (0,5,1) in page-builder-blocks.css, exactly like on the
   public site. */
.ae-visual .ap-block a {
    color: var(--ap-color-link);
    text-decoration: none;
    transition: color var(--ap-transition-fast);
}
.ae-visual .ap-block a:hover {
    color: var(--ap-color-link-hover);
}
/* Mirror of core.css's underline rule for prose and table links —
   needed because the text-decoration:none above would otherwise strip
   the underline that page-builder-blocks.css / core.css give them. */
.ae-visual .ap-block .ap-prose a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit),
.ae-visual .ap-block .ap-table a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

/* ── Full-bleed blocks inside the preview ──
   Section / Slideshow ("full" width) and the Logo Ticker break out
   of any parent container on the PUBLIC site with the classic
   `width: 100vw; left: 50%; translateX(-50%)` trick. Inside the
   editor pane 100vw is the whole BROWSER window, not the pane: the
   block centers on the pane and overflows both sides equally — the
   right side is reachable by scroll, the left side is clipped
   forever (the "cut off on the left" bug on wide/full-width pages,
   invisible in fullscreen where pane ≈ viewport). In the preview
   the pane IS the viewport, so pin these back to 100% of it. */
.ae-editor .ae-visual .ap-section--full,
.ae-editor .ae-visual .ap-slideshow--full,
.ae-editor .ae-visual .ap-ticker {
    width: 100%;
    left: auto;
    transform: none;
}

/* ── Plugin custom toolbar buttons (opts.custom) ── */
.ae-btn--custom {
    width: auto;
    padding: 0 .55rem;
    font-size: .8rem;
    font-family: inherit;
    white-space: nowrap;
}

/* ── RTL (admin panel in Arabic / Hebrew) ──
   Same logical-properties approach as Pop-up Manager 1.3.6:
   LTR rendering stays pixel-identical. */
[dir="rtl"] .ae-content blockquote {
    border-left: none;
    border-right: 3px solid var(--adm-border, #cbd5e1);
    padding-left: 0;
    padding-right: 1rem;
}
[dir="rtl"] .ae-content th,
[dir="rtl"] .ae-content td { text-align: right; }
[dir="rtl"] .ae-content pre,
[dir="rtl"] .ae-content code { direction: ltr; text-align: left; }
[dir="rtl"] .ae-content .ae-align-right { text-align: left; }

/* ── Themed dialog (replaces native browser prompts) ──
   Same tokens and .btn classes as the rest of the admin, so the
   modal is indistinguishable from core admin dialogs in both
   light and dark mode. z-index above .ae-fullscreen (9999). */
.ae-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    padding: 1rem;
}
.ae-modal {
    width: 100%;
    max-width: 420px;
    background: var(--adm-surface, #fff);
    color: var(--adm-text, #1e293b);
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: var(--adm-radius, 8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    padding: 1rem 1.25rem 1.25rem;
}
.ae-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.ae-modal-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--adm-text, #1e293b);
}
.ae-modal-x {
    border: none;
    background: transparent;
    color: var(--adm-text-muted, #636b78);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .3rem;
    border-radius: 4px;
}
.ae-modal-x:hover {
    background: var(--adm-surface-alt, #f1f5f9);
    color: var(--adm-text, #1e293b);
}
.ae-modal-field { margin-bottom: .75rem; }
.ae-modal-field label {
    display: block;
    font-size: .85rem;
    color: var(--adm-text-muted, #636b78);
    margin-bottom: .3rem;
}
.ae-modal-field input {
    width: 100%;
    font: inherit;
    padding: .45rem .65rem;
    background: var(--adm-surface, #fff);
    color: var(--adm-text, #1e293b);
    border: 1px solid var(--adm-input-border, var(--adm-border, #cbd5e1));
    border-radius: var(--adm-radius-sm, 4px);
}
.ae-modal-field input:focus {
    outline: none;
    border-color: var(--adm-primary, #4e6b8c);
    box-shadow: 0 0 0 3px var(--adm-primary-subtle, rgba(78, 107, 140, .18));
}
.ae-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}
