/*
 * Campaign template-builder — syntax-highlighting code editor, insert toolbar, guidance callout,
 * and split live preview (009 / FR-005/006 / US3).
 *
 * Registered as a static Filament CSS asset (see AdminPanelProvider::boot) and published verbatim
 * by `php artisan filament:assets` — NO build step. Filament v5 ships only its own `fi-*` classes
 * (no raw Tailwind utilities, and it does not scan these Blade views), so EVERYTHING the builder
 * renders is styled here with dedicated classes. Colours reuse Filament's theme CSS variables
 * (`--primary-*`, `--gray-*`, resolved per-panel at runtime) with hard fallbacks, and dark mode
 * hangs off Filament's `.dark` class on <html>.
 */

/* =======================================================================================
 * 1. Code editor — "highlight-over-textarea": a colourised <pre> sits exactly behind a
 *    transparent <textarea>. They MUST share identical box metrics or the caret drifts.
 *    The code surface is LTR (email source is code); the rendered PREVIEW is RTL.
 * ===================================================================================== */
.fi-tpl-editor {
    position: relative;
    width: 100%;
    border-radius: 0.625rem;
    border: 1px solid var(--gray-300, #d1d5db);
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.dark .fi-tpl-editor {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-900, #111827);
}

.fi-tpl-editor:focus-within {
    border-color: var(--primary-500, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-500, #6366f1) 35%, transparent);
}

.fi-tpl-editor__pre,
.fi-tpl-editor__ta {
    margin: 0;
    border: 0;
    padding: 0.875rem 1rem;
    width: 100%;
    height: 30rem;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.7;
    tab-size: 2;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: auto;
}

.fi-tpl-editor__pre {
    position: absolute;
    inset: 0;
    z-index: 0;
    color: var(--gray-800, #1f2937);
    pointer-events: none;
    user-select: none;
}

.dark .fi-tpl-editor__pre {
    color: var(--gray-200, #e5e7eb);
}

.fi-tpl-editor__ta {
    position: relative;
    z-index: 1;
    display: block;
    resize: vertical;
    background-color: transparent;
    color: transparent;
    caret-color: var(--gray-900, #111827);
    outline: none;
}

.dark .fi-tpl-editor__ta {
    caret-color: #f3f4f6;
}

.fi-tpl-editor__ta::selection {
    color: transparent;
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 30%, transparent);
}

.fi-tpl-editor__ta::placeholder {
    color: var(--gray-400, #9ca3af);
}

/* Syntax tokens — WCAG-AA on the editor surface, light + dark. */
.tok-comment { color: var(--gray-500, #6b7280); font-style: italic; }
.tok-tag     { color: #be185d; font-weight: 600; }
.tok-attr    { color: #b45309; }
.tok-string  { color: #15803d; }
.tok-punct   { color: var(--gray-500, #6b7280); }

/* Mailjet template-language tags — the headline highlight (must POP). */
.tok-var,
.tok-stmt {
    border-radius: 0.25rem;
    padding: 0 0.15rem;
    font-weight: 600;
}
.tok-var  { color: #4338ca; background-color: rgb(99 102 241 / 0.14); }
.tok-stmt { color: #7e22ce; background-color: rgb(168 85 247 / 0.16); }

.dark .tok-comment { color: var(--gray-400, #9ca3af); }
.dark .tok-tag     { color: #f472b6; }
.dark .tok-attr    { color: #fbbf24; }
.dark .tok-string  { color: #6ee7b7; }
.dark .tok-punct   { color: var(--gray-400, #9ca3af); }
.dark .tok-var     { color: #c7d2fe; background-color: rgb(99 102 241 / 0.25); }
.dark .tok-stmt    { color: #e9d5ff; background-color: rgb(168 85 247 / 0.28); }

/* =======================================================================================
 * 2. Guidance callout
 * ===================================================================================== */
.fi-tpl-guide {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border: 1px solid color-mix(in srgb, var(--primary-500, #6366f1) 24%, transparent);
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 6%, #ffffff);
    border-radius: 0.75rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--gray-700, #374151);
}

.dark .fi-tpl-guide {
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 12%, var(--gray-900, #111827));
    border-color: color-mix(in srgb, var(--primary-500, #6366f1) 35%, transparent);
    color: var(--gray-200, #e5e7eb);
}

.fi-tpl-guide__icon {
    flex: none;
    margin-top: 0.0625rem;
    color: var(--primary-600, #4f46e5);
}
.fi-tpl-guide__icon svg { width: 1.25rem; height: 1.25rem; }
.dark .fi-tpl-guide__icon { color: var(--primary-400, #818cf8); }

.fi-tpl-guide__title {
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--gray-900, #111827);
}
.dark .fi-tpl-guide__title { color: #f9fafb; }

.fi-tpl-guide__list {
    margin: 0;
    padding-inline-start: 1.1rem;
    list-style: disc;
}
.fi-tpl-guide__list li { margin: 0.1rem 0; }

.fi-tpl-guide code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78em;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 16%, transparent);
    color: #4338ca;
    direction: ltr;
    unicode-bidi: isolate;
}
.dark .fi-tpl-guide code { color: #c7d2fe; }

/* =======================================================================================
 * 3. Insert toolbar — grouped chips
 * ===================================================================================== */
/* The toolbar is a "blocks palette" card; groups tile across the available width (auto-fill)
 * so the horizontal space is used instead of one narrow right/left-hugging column. Direction
 * follows the panel (no hard-coded dir) so it reads correctly in both English (LTR) and Arabic. */
.fi-tpl-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.9rem 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--gray-50, #f9fafb);
}
.dark .fi-tpl-toolbar {
    border-color: var(--gray-800, #1f2937);
    background-color: color-mix(in srgb, var(--gray-900, #111827) 55%, transparent);
}

/* The article picker renders as a standalone single-group toolbar — give it the same card chrome. */
.fi-tpl-toolbar--standalone {
    padding: 1rem 1.1rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--gray-50, #f9fafb);
}
.dark .fi-tpl-toolbar--standalone {
    border-color: var(--gray-800, #1f2937);
    background-color: color-mix(in srgb, var(--gray-900, #111827) 55%, transparent);
}

.fi-tpl-toolbar__group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.fi-tpl-toolbar__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500, #6b7280);
}
.dark .fi-tpl-toolbar__label { color: var(--gray-400, #9ca3af); }

.fi-tpl-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fi-tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--gray-300, #d1d5db);
    background-color: #ffffff;
    color: var(--gray-700, #374151);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.04s;
    max-width: 100%;
}
.fi-tpl-chip:hover {
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 9%, #ffffff);
    border-color: color-mix(in srgb, var(--primary-500, #6366f1) 45%, transparent);
    color: var(--primary-700, #4338ca);
}
.fi-tpl-chip:active { transform: translateY(1px); }

.dark .fi-tpl-chip {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-800, #1f2937);
    color: var(--gray-200, #e5e7eb);
    box-shadow: none;
}
.dark .fi-tpl-chip:hover {
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 18%, var(--gray-800, #1f2937));
    border-color: color-mix(in srgb, var(--primary-500, #6366f1) 50%, transparent);
    color: #c7d2fe;
}

/* Ready-made sample templates — slightly more prominent, primary-tinted. */
.fi-tpl-chip--sample {
    border-color: color-mix(in srgb, var(--primary-500, #6366f1) 40%, transparent);
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 8%, #ffffff);
    color: var(--primary-700, #4338ca);
    font-weight: 600;
    padding: 0.45rem 0.85rem;
}
.fi-tpl-chip--sample:hover {
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 16%, #ffffff);
}
.dark .fi-tpl-chip--sample {
    background-color: color-mix(in srgb, var(--primary-500, #6366f1) 18%, var(--gray-900, #111827));
    color: #c7d2fe;
}

.fi-tpl-empty {
    font-size: 0.8125rem;
    color: var(--gray-500, #6b7280);
    font-style: italic;
}
.dark .fi-tpl-empty { color: var(--gray-400, #9ca3af); }

/* =======================================================================================
 * 4. Live preview pane
 * ===================================================================================== */
.fi-tpl-preview { display: flex; flex-direction: column; gap: 0.5rem; }

/* Top heading that mirrors the code editor's field label, so the editor and preview panes line
 * up at the top when shown side by side. */
.fi-tpl-preview__heading {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--gray-950, #030712);
}
.dark .fi-tpl-preview__heading { color: #f3f4f6; }

.fi-tpl-preview__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.fi-tpl-preview__label {
    margin-inline-end: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500, #6b7280);
}
.dark .fi-tpl-preview__label { color: var(--gray-400, #9ca3af); }

.fi-tpl-preview__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--gray-300, #d1d5db);
    background-color: #ffffff;
    color: var(--gray-700, #374151);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.fi-tpl-preview__btn svg { width: 0.9rem; height: 0.9rem; }
.fi-tpl-preview__btn:hover { background-color: var(--gray-50, #f9fafb); }
.fi-tpl-preview__btn.is-active {
    background-color: var(--primary-600, #4f46e5);
    border-color: var(--primary-600, #4f46e5);
    color: #ffffff;
}

.dark .fi-tpl-preview__btn {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-800, #1f2937);
    color: var(--gray-200, #e5e7eb);
}
.dark .fi-tpl-preview__btn:hover { background-color: var(--gray-700, #374151); }
.dark .fi-tpl-preview__btn.is-active {
    background-color: var(--primary-500, #6366f1);
    border-color: var(--primary-500, #6366f1);
    color: #ffffff;
}

.fi-tpl-preview__stage {
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.625rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    background-color: var(--gray-100, #f3f4f6);
    padding: 0.875rem;
}
.dark .fi-tpl-preview__stage {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-950, #030712);
}

.fi-tpl-preview-frame {
    width: 100%;
    max-width: 100%;
    height: 30rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 0.5rem;
    background-color: #ffffff;
}
.dark .fi-tpl-preview-frame { border-color: var(--gray-600, #4b5563); }
.fi-tpl-preview-frame--tall { height: 40rem; }
