/*
 * widget_editor_form.css
 *
 * Design tokens + base form styles for the widget editor popup.
 * Mirrors the Kotlin Material 3 form aesthetic (see
 * `kmp/src/commonMain/kotlin/theme/FormFieldStyle.kt` for the Compose
 * source-of-truth values). One stylesheet → restyle every form by
 * tweaking the `--we-*` custom properties at the top.
 *
 * Visual contract:
 *   • Each editor is grouped into a "card" section (`.we-card`)
 *   • Inside a card, each field is a labeled row with a 2-line stack
 *     (label on top, control below) and an optional helper / error
 *     line beneath
 *   • Buttons + state colours follow Material 3 (primary, error,
 *     surface variants)
 *
 * Why a separate CSS file (not inlined): the popup loads a lot of
 * legacy framework CSS (mc-popup, mc-base, ...). Putting the new
 * tokens in their own file keeps them auditable and easy to override
 * later with a theme switch.
 */

:root {
    /* ── Surface + shape ─────────────────────────────────────── */
    --we-surface:               #ffffff;
    --we-surface-variant:       #f5f7fa;
    --we-surface-elevated:      #ffffff;
    --we-card-bg:               #ffffff;
    --we-card-border:           #e3e8ef;
    --we-card-shadow:           0 1px 2px rgba(15, 23, 42, 0.04),
                                0 1px 1px rgba(15, 23, 42, 0.06);
    --we-card-radius:           8px;
    --we-card-padding:          6px 10px;
    --we-card-gap:              6px;
    --we-card-body-gap:         6px;
    --we-card-header-bg:        #e3e9f0;
    --we-card-header-padding:   4px 8px;

    /* ── Field container ─────────────────────────────────────── */
    --we-field-bg:              #ffffff;
    --we-field-border:          #cfd8dc;
    --we-field-border-focus:    #1565c0;
    --we-field-border-error:    #c62828;
    --we-field-border-disabled: rgba(15, 23, 42, 0.18);
    --we-field-radius:          4px;
    --we-field-pad:             8px 12px;
    --we-field-min-h:           36px;

    /* ── Typography ──────────────────────────────────────────── */
    --we-font:                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                                "Helvetica Neue", Arial, sans-serif;
    --we-font-mono:             ui-monospace, "Menlo", "Consolas", monospace;

    --we-text-card-title:       14px;
    --we-text-card-subtitle:    11px;
    --we-text-label:            12px;
    --we-text-value:            13px;
    --we-text-helper:           11px;
    --we-text-badge:            10px;

    --we-color-text:            #1f2328;
    --we-color-text-soft:       #586069;
    --we-color-text-muted:      #8a949e;
    --we-color-label:           #1e293b;
    --we-color-label-error:     #c62828;
    --we-color-helper:          #6b7681;
    --we-color-error:           #c62828;
    --we-color-mandatory:       #c62828;

    /* ── Primary action ──────────────────────────────────────── */
    --we-primary:               #1565c0;
    --we-primary-hover:         #0d47a1;
    --we-primary-text:          #ffffff;

    /* ── Spacing rhythm ──────────────────────────────────────── */
    --we-stack-gap-xs:          4px;
    --we-stack-gap-sm:          8px;
    --we-stack-gap-md:          12px;
    --we-stack-gap-lg:          16px;
}

/* ── Page-level wrappers ───────────────────────────────────────────────── */

#child-data-form {
    font-family: var(--we-font);
    color: var(--we-color-text);
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--we-card-gap);
}

#child-data-form .we-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--we-card-border);
    margin: 0;
    /* Stick just below the popup title bar (≈ 41 px tall). */
    position: sticky;
    top: 41px;
    z-index: 15;
    background: var(--we-surface);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.we-form-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 42px;
    object-fit: contain;
    object-position: center;
    background: #f0f5ff;
    border: 1px solid var(--we-card-border);
    border-radius: 4px;
    padding: 3px;
    box-sizing: border-box;
}

.we-form-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#child-data-form .we-form-header .we-form-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--we-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#child-data-form .we-form-header .we-form-id {
    font-family: var(--we-font-mono);
    font-size: 10px;
    color: var(--we-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Card section ───────────────────────────────────────────────────────── */

.we-card {
    background: var(--we-card-bg);
    border: 1px solid var(--we-card-border);
    border-radius: var(--we-card-radius);
    box-shadow: var(--we-card-shadow);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.we-card:hover {
    border-color: #cfd8e3;
}

.we-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: var(--we-card-header-padding);
    background: var(--we-card-header-bg);
    border-bottom: 1px solid var(--we-card-border);
    cursor: pointer;
    user-select: none;
}

.we-card-header:hover {
    background: #d8e0e9;
}

.we-card-header .we-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.we-section-chevron {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: #586069;
    flex-shrink: 0;
    transition: transform 150ms ease;
}

.we-card.we-section-collapsed > .we-card-header .we-section-chevron {
    transform: rotate(-90deg);
}

.we-card.we-section-collapsed > .we-card-body {
    display: none;
}

/* Legacy `.component-list-label` header, once moved into a card by
   SectionCollapser. Strip its standalone styling so the surrounding
   `.we-card-header` controls the chrome — keep only the text. */
.we-card-header .we-card-legacy-label {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: var(--we-text-card-title) !important;
    font-weight: 600 !important;
    color: var(--we-color-text) !important;
    width: auto !important;
}

.we-card-title {
    font-size: var(--we-text-card-title);
    font-weight: 600;
    color: var(--we-color-text);
    letter-spacing: 0.1px;
}

.we-card-subtitle {
    font-size: var(--we-text-card-subtitle);
    font-weight: 400;
    color: var(--we-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.we-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--we-card-body-gap);
    padding: var(--we-card-padding);
}

/* Legacy bodies (Views / Attributes wrapped from MCWidgetDesignWidget):
   the inner panels carry their own spacing in `mcw-widgets.css`, so
   layering our card padding on top doubles up. Strip our defaults and
   let the legacy CSS own the interior. The card chrome (header bar,
   border, radius) stays uniform with the ChildDataForm cards. */
.we-card-body.we-card-body--legacy {
    padding: 0;
    gap: 0;
}

/* ── Form-row (label + control + helper) ───────────────────────────────── */

.we-row {
    display: flex;
    flex-direction: column;
    gap: var(--we-stack-gap-xs);
}

.we-row-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--we-text-label);
    font-weight: 500;
    color: var(--we-color-label);
    line-height: 1.3;
}

.we-row-label .we-mandatory {
    color: var(--we-color-mandatory);
    font-weight: 600;
}

.we-row-label .we-type-badge {
    font-family: var(--we-font-mono);
    font-size: var(--we-text-badge);
    color: var(--we-color-text-muted);
    font-weight: 400;
    margin-left: 2px;
}

.we-row-helper {
    font-size: var(--we-text-helper);
    color: var(--we-color-helper);
    line-height: 1.4;
}

.we-row-error {
    font-size: var(--we-text-helper);
    color: var(--we-color-error);
    line-height: 1.4;
}

/* ── Locale-prefix label (default / en / hu) ──────────────────────────── */

.we-locale-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.we-locale-tag {
    flex: 0 0 56px;
    font-size: var(--we-text-badge);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--we-color-text-muted);
    line-height: 1;
}

.we-locale-row > .we-locale-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Active-locale highlight ───────────────────────────────────────────── */

.we-locale-row.is-active-locale {
    background: rgba(21, 101, 192, 0.10);
    border-radius: 4px;
    outline: 2px solid rgba(21, 101, 192, 0.50);
    outline-offset: 2px;
    padding: 2px 4px;
}

.we-locale-row.is-active-locale .we-locale-tag {
    color: var(--we-primary);
    font-weight: 700;
    background: var(--we-primary);
    color: #fff;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 9px;
    letter-spacing: 0.8px;
}

/* ── Generic input look (EDITTEXT, TEXTAREA, picker selects) ──────────── */

input.we-input,
textarea.we-input,
select.we-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--we-field-pad);
    min-height: var(--we-field-min-h);
    font-family: var(--we-font);
    font-size: var(--we-text-value);
    line-height: 1.4;
    color: var(--we-color-text);
    background: var(--we-field-bg);
    border: 1px solid var(--we-field-border);
    border-radius: var(--we-field-radius);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea.we-input {
    min-height: 80px;
    font-family: var(--we-font-mono);
    resize: vertical;
}

input.we-input:focus,
textarea.we-input:focus,
select.we-input:focus {
    outline: none;
    border-color: var(--we-field-border-focus);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.18);
}

input.we-input:disabled,
textarea.we-input:disabled,
select.we-input:disabled {
    color: rgba(31, 35, 40, 0.5);
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--we-field-border-disabled);
    cursor: not-allowed;
}

input.we-input.we-error,
textarea.we-input.we-error,
select.we-input.we-error {
    border-color: var(--we-field-border-error);
}

/* ── Switch (Material 3 toggle clone) ─────────────────────────────────── */

.we-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.we-switch input[type="checkbox"] {
    /* Visually hidden but still focusable for a11y. */
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.we-switch-track {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    background: #e0e3e7;
    border: 2px solid #cfd8dc;
    border-radius: 16px;
    transition: background 160ms ease, border-color 160ms ease;
    flex-shrink: 0;
}

.we-switch-thumb {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 16px;
    height: 16px;
    background: #74797d;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: left 180ms cubic-bezier(0.2, 0, 0, 1),
                background 160ms ease,
                width 180ms ease,
                height 180ms ease;
}

.we-switch input[type="checkbox"]:checked + .we-switch-track {
    background: var(--we-primary);
    border-color: var(--we-primary);
}

.we-switch input[type="checkbox"]:checked + .we-switch-track .we-switch-thumb {
    left: 22px;   /* 48px inner − 22px thumb − 4px right padding = 22 */
    width: 22px;
    height: 22px;
    background: #ffffff;
}

.we-switch input[type="checkbox"]:focus-visible + .we-switch-track {
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25);
}

.we-switch:hover .we-switch-thumb {
    box-shadow: 0 0 0 8px rgba(21, 101, 192, 0.08);
}

.we-switch input[type="checkbox"]:disabled + .we-switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Inline row (label left · control right) ───────────────────────────── */
/* Used for compact editors that set `static get inlineRow() { return true; }`
   (e.g. SwitchFieldEditor). The label column grows; the control stays at
   its natural width, right-aligned. */

.we-row.we-row--inline {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.we-row.we-row--inline .we-row-inline-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--we-stack-gap-xs);
}

.we-row.we-row--inline .we-row-inline-right {
    flex: 0 0 auto;
}

/* ── Boolean Buttons (segmented true / false) ─────────────────────────── */

.we-bool-buttons {
    display: inline-flex;
    border: 1px solid var(--we-field-border);
    border-radius: var(--we-field-radius);
    overflow: hidden;
    background: var(--we-surface-variant);
}

.we-bool-btn {
    flex: 1;
    padding: 6px 18px;
    font-family: var(--we-font);
    font-size: var(--we-text-value);
    font-weight: 500;
    color: var(--we-color-text-soft);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
    line-height: 1.4;
}

.we-bool-btn + .we-bool-btn {
    border-left: 1px solid var(--we-field-border);
}

.we-bool-btn:hover {
    background: rgba(21, 101, 192, 0.07);
    color: var(--we-primary);
}

.we-bool-btn.is-active {
    background: var(--we-primary);
    color: var(--we-primary-text);
}

/* ── AutoSpinner (combobox with text filter) ───────────────────────────── */

.we-spinner {
    position: relative;
    width: 100%;
}

.we-spinner-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--we-field-pad);
    padding-right: 32px;            /* room for chevron */
    min-height: var(--we-field-min-h);
    font-family: var(--we-font);
    font-size: var(--we-text-value);
    color: var(--we-color-text);
    background: var(--we-field-bg);
    border: 1px solid var(--we-field-border);
    border-radius: var(--we-field-radius);
    cursor: text;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.we-spinner-input:focus {
    outline: none;
    border-color: var(--we-field-border-focus);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.18);
}

.we-spinner-chevron {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--we-color-text-muted);
    pointer-events: none;
    transition: transform 160ms ease;
}

.we-spinner.is-open .we-spinner-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.we-spinner-clear {
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: transparent;
    border: 0;
    color: var(--we-color-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    display: none;
}

.we-spinner.is-filled .we-spinner-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.we-spinner-clear:hover {
    color: var(--we-color-error);
}

.we-spinner-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--we-surface-elevated);
    border: 1px solid var(--we-card-border);
    border-radius: var(--we-card-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 100;
    display: none;
    padding: 4px;
}

.we-spinner.is-open .we-spinner-list {
    display: block;
}

.we-spinner-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 80ms ease;
}

.we-spinner-option:hover,
.we-spinner-option.is-active {
    background: rgba(21, 101, 192, 0.08);
}

.we-spinner-option.is-selected {
    background: rgba(21, 101, 192, 0.16);
}

/* Thumbnail-bearing rows lay out as: [thumb] [text-stack].
   Default rows have no thumb — `.we-spinner-option-text` is just a
   wrapper that doesn't change the visual; only kicks in when
   `has-thumb` triggers the flex layout. */
.we-spinner-option.has-thumb {
    display: flex;
    align-items: center;
    gap: 10px;
}

.we-spinner-option.has-thumb .we-spinner-option-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.we-spinner-option-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 32px;
    border-radius: 4px;
    background: var(--we-surface-variant);
    border: 1px solid var(--we-card-border);
    object-fit: contain;
    object-position: center;
    padding: 2px;
    box-sizing: border-box;
}

.we-spinner-option .we-spinner-option-label {
    font-size: var(--we-text-value);
    color: var(--we-color-text);
    line-height: 1.3;
}

.we-spinner-option .we-spinner-option-sub {
    font-size: var(--we-text-helper);
    color: var(--we-color-text-muted);
    line-height: 1.3;
}

.we-spinner-empty {
    padding: 12px;
    text-align: center;
    font-size: var(--we-text-helper);
    color: var(--we-color-text-muted);
}

/* ── Field-bindings editor ─────────────────────────────────────────────── */

.we-field-bindings {
    display: flex;
    flex-direction: column;
    gap: var(--we-stack-gap-sm);
}

.we-field-bindings-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.we-binding-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--we-surface-variant);
    border: 1px solid var(--we-card-border);
    border-radius: 6px;
}

.we-binding-row-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 8px;
}

.we-binding-row-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--we-text-label);
    color: var(--we-color-text);
}

.we-binding-row-slot {
    font-weight: 600;
}

.we-binding-row-slot-id {
    font-family: var(--we-font-mono);
    font-size: var(--we-text-badge);
    color: var(--we-color-text-muted);
}

.we-binding-drop-notice {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: var(--we-text-helper);
    color: #6d4c1c;
}

.we-binding-drop-notice code {
    font-family: var(--we-font-mono);
    font-size: var(--we-text-badge);
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
    border-radius: 2px;
    margin: 0 2px;
}

/* ── Relation link (open in admin) ─────────────────────────────────────── */

.we-relation-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--we-text-value);
    color: var(--we-primary);
    background: rgba(21, 101, 192, 0.06);
    border: 1px solid rgba(21, 101, 192, 0.25);
    border-radius: 999px;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.we-relation-link:hover {
    background: rgba(21, 101, 192, 0.15);
    border-color: rgba(21, 101, 192, 0.5);
    color: var(--we-primary-hover);
}

.we-relation-link-icon {
    font-size: 12px;
    line-height: 1;
}

.we-relation-link-value {
    font-family: var(--we-font-mono);
    font-size: var(--we-text-helper);
    color: var(--we-color-text-muted);
    margin-left: auto;
}

.we-relation-link-empty {
    font-size: var(--we-text-helper);
    color: var(--we-color-text-muted);
    font-style: italic;
}

/* ── Listitem gallery picker ───────────────────────────────────────────── */
/* Chip-style display of the currently-selected listitem template +
   a "Change template…" button that opens the centered gallery modal.
   Used INSTEAD of the AutoSpinner dropdown to avoid the dropdown
   being clipped at the bottom of long forms. */

.we-gallery-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--we-surface-variant);
    border: 1px solid var(--we-card-border);
    border-radius: var(--we-field-radius);
}

.we-gallery-picker-current {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.we-gallery-picker-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 36px;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
    border: 1px solid var(--we-card-border);
    border-radius: 4px;
    padding: 3px;
    box-sizing: border-box;
}

.we-gallery-picker-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.we-gallery-picker-label {
    font-size: var(--we-text-value);
    font-weight: 600;
    color: var(--we-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.we-gallery-picker-id {
    font-family: var(--we-font-mono);
    font-size: var(--we-text-badge);
    color: var(--we-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.we-gallery-picker-change {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: var(--we-text-helper);
    font-weight: 600;
    color: var(--we-primary);
    background: #ffffff;
    border: 1px solid var(--we-primary);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

button.we-gallery-picker-change:hover {
    background: var(--we-primary);
    color: var(--we-primary-text);
}

/* ── Model type gallery thumb (icon-based, no SVG preview) ─────────────── */
/* Card chrome is shared with the listitem gallery (`.we-gallery-card`,
   `.we-gallery-card-thumb`, etc.). Only the thumb's contents differ:
   model types render an icon glyph (centered) instead of an SVG image.
   The fallback `folder` glyph keeps every card visually balanced when
   the model type has no icon set. */

.we-model-type-card .we-model-type-thumb {
    font-size: 28px;
    color: #1565c0;
}

.we-model-type-card .we-model-type-thumb > .material-icons,
.we-model-type-card .we-model-type-thumb > .lnr,
.we-model-type-card .we-model-type-thumb > i,
.we-model-type-card .we-model-type-thumb > span {
    font-size: inherit;
    line-height: 1;
}

/* Generic-folder fallback rendered when MCModelType.icon is empty.
   Slightly muted so authors can still tell at a glance which models
   have a custom icon vs. the default. */
.we-model-type-thumb-fallback {
    color: #94a3b8 !important;
}

/* ── Listitem template gallery ─────────────────────────────────────────── */

/* Wrapper around the listitem AutoSpinner — adds the "Browse templates…"
   button beneath the spinner without disrupting its absolute-positioned
   dropdown list. */
.we-listitem-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

button.we-listitem-browse {
    align-self: flex-start;
    padding: 4px 12px;
    font-size: var(--we-text-helper);
    color: var(--we-primary);
    background: transparent;
    border: 1px solid rgba(21, 101, 192, 0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

button.we-listitem-browse:hover {
    background: rgba(21, 101, 192, 0.08);
    border-color: var(--we-primary);
}

/* Modal overlay — anchors to the document viewport, dimmed background.
   z-index 6500 sits above the wizard modal (6000) so the gallery
   floats over the wizard when picking a template inside it. */
.we-gallery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6500;
    padding: 24px;
}

.we-gallery-modal {
    background: var(--we-surface);
    border-radius: var(--we-card-radius);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
    width: min(960px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    font-family: var(--we-font);
    color: var(--we-color-text);
    overflow: hidden;
}

.we-gallery-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--we-card-border);
    background: var(--we-surface-variant);
}

.we-gallery-title {
    font-size: 15px;
    font-weight: 600;
    flex: 0 0 auto;
}

.we-gallery-search {
    flex: 1 1 auto;
    padding: 6px 12px;
    font-size: var(--we-text-value);
    border: 1px solid var(--we-field-border);
    border-radius: var(--we-field-radius);
    background: var(--we-field-bg);
}

.we-gallery-search:focus {
    outline: none;
    border-color: var(--we-field-border-focus);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.18);
}

.we-gallery-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--we-color-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.we-gallery-close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--we-color-text);
}

.we-gallery-tagbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--we-surface);
    border-bottom: 1px solid var(--we-card-border);
}

.we-gallery-tagbar:empty {
    display: none;
}

.we-gallery-tag-label {
    font-size: var(--we-text-helper);
    color: var(--we-color-text-muted);
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.we-gallery-tag {
    padding: 3px 10px;
    font-size: var(--we-text-helper);
    color: var(--we-color-text-soft);
    background: transparent;
    border: 1px solid var(--we-card-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.we-gallery-tag:hover {
    background: rgba(21, 101, 192, 0.08);
    border-color: rgba(21, 101, 192, 0.3);
}

.we-gallery-tag.is-active {
    background: var(--we-primary);
    color: var(--we-primary-text);
    border-color: var(--we-primary);
}

/* Horizontal cards stacked one per row — each card is preview-left,
   info-right (thumb · meta · action). Easier to scan than a vertical
   grid, plus the live HTML preview gets enough horizontal room to
   actually look like a row in real use. */
.we-gallery-grid {
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.we-gallery-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--we-color-text-muted);
    font-size: var(--we-text-helper);
}

.we-gallery-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--we-surface);
    border: 1px solid var(--we-card-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--we-card-shadow);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    min-height: 80px;
}

.we-gallery-card:hover {
    transform: translateY(-1px);
    border-color: rgba(21, 101, 192, 0.5);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

/* Left column 1: schematic SVG thumbnail. Hidden via `onerror` when
   no `preview.svg` is authored. Fixed width so cards align across
   different templates. */
.we-gallery-card-thumb {
    flex: 0 0 120px;
    padding: 10px;
    background: #f8fbff;
    border-right: 1px solid var(--we-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.we-gallery-card-thumb > img {
    width: 100%;
    height: 60px;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Left column 2 (optional): live server-rendered HTML preview. Sits
   between the schematic thumb and the meta block so authors see both
   the layout shape AND a real-world render at a glance. */
.we-gallery-card-preview {
    flex: 0 0 240px;
    padding: 10px;
    background: #fafbfc;
    border-right: 1px solid var(--we-card-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: stretch;
    overflow: hidden;
}

/* Scope the preview's own widget HTML — most templates self-style. */
.we-gallery-card-preview > * {
    flex: 1 1 auto;
    min-width: 0;
}

.we-gallery-card-loading {
    margin: auto;
    color: var(--we-color-text-muted);
    font-size: var(--we-text-helper);
    font-style: italic;
}

/* Right column: title + id + tags + action button. */
.we-gallery-card-meta {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.we-gallery-card-title {
    font-size: var(--we-text-value);
    font-weight: 600;
    color: var(--we-color-text);
}

.we-gallery-card-id {
    font-family: var(--we-font-mono);
    font-size: var(--we-text-badge);
    color: var(--we-color-text-muted);
}

.we-gallery-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.we-gallery-card-tag {
    font-size: var(--we-text-badge);
    background: var(--we-surface-variant);
    color: var(--we-color-text-soft);
    padding: 1px 6px;
    border-radius: 999px;
}

/* Action button anchored to the right edge of the card. */
.we-gallery-card-action {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 14px;
    padding: 6px 14px;
    font-size: var(--we-text-helper);
    font-weight: 600;
    color: var(--we-primary-text);
    background: var(--we-primary);
    border: 0;
    border-radius: var(--we-field-radius);
    cursor: pointer;
    transition: background 120ms ease;
}

.we-gallery-card-action:hover {
    background: var(--we-primary-hover);
}

/* ── Save bar ──────────────────────────────────────────────────────────── */

.we-save-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px solid var(--we-card-border);
    margin-top: 4px;
    position: sticky;
    bottom: 0;
    background: var(--we-surface);
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
    transition: bottom 150ms ease;
}

/* Keep the save bar above the fixed-position DebugLogPanel at viewport
   bottom. The log panel toggles these body classes (24px collapsed,
   140px expanded) — match its height so the save bar floats just above. */
body.dlp-body-padded      .we-save-bar { bottom: 24px; }
body.dlp-body-padded-open .we-save-bar { bottom: 140px; }

.we-save-bar button[type="submit"] {
    padding: 8px 18px;
    font-family: var(--we-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--we-primary-text);
    background: var(--we-primary);
    border: 1px solid var(--we-primary);
    border-radius: var(--we-field-radius);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.we-save-bar button[type="submit"]:hover {
    background: var(--we-primary-hover);
    border-color: var(--we-primary-hover);
}

#child-data-status {
    font-size: var(--we-text-helper);
    color: var(--we-color-text-muted);
}