/*
 * CookieConsent — engine chrome (Plan.io #2295 T9 / #2295 footer fix).
 *
 * Styles for the JS-created pieces of the blocking engine that are NOT part of
 * the overridable banner/settings partial: the persistent "Cookie-Einstellungen"
 * re-open trigger that the engine mounts on every page so consent can be changed
 * or withdrawn at any time. Shipped to both the frontend and backend CSS folders
 * and merged into the auto-loaded plugin.css bundles.
 *
 * The trigger is injected INLINE into the page footer's copyright line (next to
 * the © text, preceded by a "·" separator) as a PLAIN TEXT LINK — no pill, no
 * button chrome, no separate block. It therefore never disrupts the footer's
 * Bootstrap row/flex layout (the backend-footer regression, #2295). When no
 * footer is detectable it degrades to an in-flow centered bar appended at the
 * end of the document; either way it never overlays page elements.
 *
 * It uses the surrounding Bootstrap link color (--bs-link-color, theme-aware for
 * light/dark) with the banner's --cc-accent token taking precedence when in
 * scope, so it stays legible on the light backend footer AND a dark frontend
 * footer and reads as a normal text link.
 */

/* The re-open trigger, styled as a bare inline text link (the engine injects a
   <button> so the action stays accessible; every button chrome bit is stripped). */
.cc-manage {
    appearance: none;
    -webkit-appearance: none;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    color: var(--cc-accent, var(--bs-link-color, currentColor));
    text-decoration: none;
    cursor: pointer;
}

.cc-manage:hover {
    color: var(--cc-accent-hover, var(--bs-link-hover-color, currentColor));
    text-decoration: underline;
}

.cc-manage:focus-visible {
    outline: 2px solid var(--cc-accent, var(--bs-link-color, currentColor));
    outline-offset: 2px;
    text-decoration: underline;
}

/* Decorative " · " separator placed before the inline link in the footer line. */
.cc-manage-sep {
    margin: 0 0.4em;
    opacity: 0.65;
}

/* In-flow centered fallback bar — used ONLY when no footer element is found, so
   the trigger always has a non-overlapping home even on a footer-less theme. */
.cc-manage-slot--fallback {
    box-sizing: border-box;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--cc-border, rgba(128, 128, 128, 0.25));
    text-align: center;
}

/*
 * CookieConsent — banner + settings-modal presentation (Plan.io #2295 T8).
 *
 * Shipped to BOTH asset folders (src/assets/css for the backend, R5; and
 * src/assets/frontend/css for the frontend) so the visitor banner looks identical
 * and good out-of-the-box in either context. Self-contained: every colour comes
 * from a `--cc-*` custom property with a sensible default, so it renders well even
 * with no theme. Vanilla Bootstrap-5 utility classes (the frontend ships BS 5.3 +
 * FA) are reused where helpful (the per-category `.form-switch` toggles); the
 * structural/positioning styling below is plugin-owned.
 *
 * Dark mode: honours an explicit `[data-bs-theme="dark"]` ancestor (the backend +
 * BS 5.3 frontend convention) AND the OS `prefers-color-scheme: dark` when no
 * explicit theme is set.
 *
 * The mount/show/hide behaviour is T9; this file is presentation only.
 */

.cc-consent {
    --cc-bg: #ffffff;
    --cc-fg: #1f2933;
    --cc-muted: #52606d;
    --cc-border: #e4e7eb;
    --cc-shadow: 0 -2px 24px rgba(15, 23, 42, 0.18);
    --cc-accent: #2563eb;
    --cc-accent-fg: #ffffff;
    --cc-accent-hover: #1d4ed8;
    --cc-neutral: #e4e7eb;
    --cc-neutral-fg: #1f2933;
    --cc-neutral-hover: #d2d6dc;
    --cc-badge-bg: #e6f0ff;
    --cc-badge-fg: #1d4ed8;
    --cc-radius: 0.75rem;
    --cc-btn-radius: 0.5rem;
    --cc-z: 2147483000;

    color: var(--cc-fg);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- Banner --- */

.cc-banner {
    position: fixed;
    z-index: var(--cc-z);
    background: var(--cc-bg);
    color: var(--cc-fg);
    box-shadow: var(--cc-shadow);
    border: 1px solid var(--cc-border);
}

/* Full-width bars (top / bottom). */
.cc-banner--bottom,
.cc-banner--top {
    left: 0;
    right: 0;
    border-left: 0;
    border-right: 0;
}

.cc-banner--bottom {
    bottom: 0;
    border-bottom: 0;
}

.cc-banner--top {
    top: 0;
    border-top: 0;
}

/* Corner cards (bottom-left / bottom-right). */
.cc-banner--bottom_left,
.cc-banner--bottom_right {
    bottom: 1.25rem;
    width: min(440px, calc(100vw - 2.5rem));
    border-radius: var(--cc-radius);
}

.cc-banner--bottom_left {
    left: 1.25rem;
}

.cc-banner--bottom_right {
    right: 1.25rem;
}

.cc-banner__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.cc-banner--bottom_left .cc-banner__inner,
.cc-banner--bottom_right .cc-banner__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem;
}

.cc-banner__text {
    flex: 1 1 320px;
    min-width: 0;
}

.cc-banner__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.cc-banner__intro {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.9rem;
}

.cc-banner__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0;
}

.cc-banner__chip {
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--cc-neutral);
    color: var(--cc-neutral-fg);
}

.cc-banner__chip--essential {
    background: var(--cc-badge-bg);
    color: var(--cc-badge-fg);
}

.cc-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.cc-banner--bottom_left .cc-banner__actions,
.cc-banner--bottom_right .cc-banner__actions {
    justify-content: stretch;
}

/* ---------------------------------------------------------------- Buttons -- */

.cc-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--cc-btn-radius);
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    background: var(--cc-neutral);
    color: var(--cc-neutral-fg);
}

.cc-btn:hover {
    background: var(--cc-neutral-hover);
}

.cc-btn:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

/*
 * EDPB equal prominence: accept + reject share `--decision` → IDENTICAL size and
 * weight. Only the colour differs; reject is a full, solid button (never a ghost
 * or a tiny link).
 */
.cc-btn--decision {
    min-width: 9.5rem;
    text-align: center;
}

.cc-btn--accept,
.cc-btn--save {
    background: var(--cc-accent);
    color: var(--cc-accent-fg);
    border-color: var(--cc-accent);
}

.cc-btn--accept:hover,
.cc-btn--save:hover {
    background: var(--cc-accent-hover);
    border-color: var(--cc-accent-hover);
}

.cc-btn--reject {
    background: var(--cc-neutral);
    color: var(--cc-neutral-fg);
    border-color: var(--cc-border);
}

.cc-btn--reject:hover {
    background: var(--cc-neutral-hover);
}

.cc-btn--settings {
    background: transparent;
    color: var(--cc-accent);
    border-color: transparent;
    text-decoration: underline;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.cc-btn--settings:hover {
    background: transparent;
    color: var(--cc-accent-hover);
}

/*
 * CCPA "Do Not Sell or Share My Personal Information" control. Must be clear and
 * conspicuous (CCPA): a full-width, outlined, underlined control that stands on
 * its own row rather than being buried among the decision buttons.
 */
.cc-banner__ccpa {
    flex: 1 1 100%;
    margin-top: 0.25rem;
}

.cc-settings__ccpa {
    padding: 0 1.4rem 0.25rem;
}

.cc-btn--do-not-sell {
    display: inline-block;
    width: 100%;
    background: transparent;
    color: var(--cc-accent);
    border-color: var(--cc-accent);
    text-decoration: underline;
    text-align: center;
}

.cc-btn--do-not-sell:hover {
    background: var(--cc-badge-bg);
    color: var(--cc-accent-hover);
    border-color: var(--cc-accent-hover);
}

/* ---------------------------------------------------- Confirmation notice -- *
 * The JS-created status strip that visibly confirms a privacy action (the GPC
 * signal was honored, or the "Do Not Sell or Share" opt-out was applied — a CCPA
 * requirement). Fixed at the bottom, above the page, never modal. */

.cc-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--cc-z) + 2);
    background: var(--cc-bg);
    color: var(--cc-fg);
    border-top: 3px solid var(--cc-accent);
    box-shadow: var(--cc-shadow);
}

.cc-notice__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cc-notice__text {
    font-size: 0.88rem;
    line-height: 1.45;
}

.cc-notice__close {
    appearance: none;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--cc-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.cc-notice__close:hover {
    color: var(--cc-fg);
}

.cc-notice__close:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------- Settings modal -- */

.cc-settings {
    position: fixed;
    inset: 0;
    z-index: calc(var(--cc-z) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cc-settings[hidden] {
    display: none;
}

.cc-settings__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.cc-settings__dialog {
    position: relative;
    background: var(--cc-bg);
    color: var(--cc-fg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: 0 12px 48px rgba(15, 23, 42, 0.35);
    width: min(560px, 100%);
    max-height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cc-settings__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--cc-border);
}

.cc-settings__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.cc-settings__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--cc-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.cc-settings__close:hover {
    color: var(--cc-fg);
}

.cc-settings__body {
    padding: 1.1rem 1.4rem;
    overflow-y: auto;
}

.cc-settings__intro {
    margin: 0 0 1rem;
    color: var(--cc-muted);
    font-size: 0.88rem;
}

.cc-settings__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-settings__item {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--cc-border);
}

.cc-settings__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cc-settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cc-settings__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin: 0;
}

.cc-settings__badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--cc-badge-bg);
    color: var(--cc-badge-fg);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cc-settings__switch {
    margin: 0;
    min-height: auto;
    padding-left: 2.5em;
}

.cc-settings__switch .form-check-input {
    cursor: pointer;
    width: 2.4em;
    height: 1.3em;
}

.cc-settings__switch .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.cc-settings__desc {
    margin: 0.45rem 0 0;
    color: var(--cc-muted);
    font-size: 0.84rem;
}

.cc-settings__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--cc-border);
}

/* ------------------------------------------------------------- Responsive -- */

@media (max-width: 575.98px) {
    .cc-banner__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-banner__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-btn--decision {
        min-width: 0;
        width: 100%;
    }

    .cc-settings__footer .cc-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* -------------------------------------------------------------- Dark mode --
 * Explicit `[data-bs-theme]` (specificity 0,1,1) always wins over the OS-preference
 * media query (specificity 0,1,0) regardless of source order — so a page that pins
 * a light/dark theme is honoured, and the OS preference only applies when no
 * explicit theme is set (typical frontend case). */

@media (prefers-color-scheme: dark) {
    .cc-consent {
        --cc-bg: #1b1f24;
        --cc-fg: #e7ebef;
        --cc-muted: #9aa5b1;
        --cc-border: #2d343c;
        --cc-shadow: 0 -2px 24px rgba(0, 0, 0, 0.55);
        --cc-accent: #3b82f6;
        --cc-accent-fg: #ffffff;
        --cc-accent-hover: #60a5fa;
        --cc-neutral: #2d343c;
        --cc-neutral-fg: #e7ebef;
        --cc-neutral-hover: #3a424c;
        --cc-badge-bg: #1e3a5f;
        --cc-badge-fg: #93c5fd;
    }
}

[data-bs-theme="light"] .cc-consent {
    --cc-bg: #ffffff;
    --cc-fg: #1f2933;
    --cc-muted: #52606d;
    --cc-border: #e4e7eb;
    --cc-shadow: 0 -2px 24px rgba(15, 23, 42, 0.18);
    --cc-accent: #2563eb;
    --cc-accent-fg: #ffffff;
    --cc-accent-hover: #1d4ed8;
    --cc-neutral: #e4e7eb;
    --cc-neutral-fg: #1f2933;
    --cc-neutral-hover: #d2d6dc;
    --cc-badge-bg: #e6f0ff;
    --cc-badge-fg: #1d4ed8;
}

[data-bs-theme="dark"] .cc-consent {
    --cc-bg: #1b1f24;
    --cc-fg: #e7ebef;
    --cc-muted: #9aa5b1;
    --cc-border: #2d343c;
    --cc-shadow: 0 -2px 24px rgba(0, 0, 0, 0.55);
    --cc-accent: #3b82f6;
    --cc-accent-fg: #ffffff;
    --cc-accent-hover: #60a5fa;
    --cc-neutral: #2d343c;
    --cc-neutral-fg: #e7ebef;
    --cc-neutral-hover: #3a424c;
    --cc-badge-bg: #1e3a5f;
    --cc-badge-fg: #93c5fd;
}

/**
 * Grid Editor Styles
 *
 * Styles für den visuellen Grid-Editor (Forms, Pages, etc.)
 * Verwendet CSS Custom Properties für einfache Anpassbarkeit.
 */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
    /* Farben für Verschachtelungstiefe */
    --grid-depth-0-bg: #f8f9fa;
    --grid-depth-0-border: #dee2e6;
    --grid-depth-1-bg: #e3f2fd;
    --grid-depth-1-border: #90caf9;
    --grid-depth-2-bg: #e8f5e9;
    --grid-depth-2-border: #a5d6a7;
    --grid-depth-3-bg: #fff3e0;
    --grid-depth-3-border: #ffcc80;
    --grid-depth-4-bg: #fce4ec;
    --grid-depth-4-border: #f48fb1;

    /* Allgemeine Farben */
    --grid-handle-color: #6c757d;
    --grid-handle-hover: #495057;
    --grid-inactive-opacity: 0.5;
    --grid-field-bg: #ffffff;
    --grid-field-border: #e9ecef;
    --grid-column-min-height: 80px;

    /* Drag & Drop */
    --grid-ghost-opacity: 0.4;
    --grid-ghost-bg: #007bff;
    --grid-chosen-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}


/* ========================================
   Editor Container
   ======================================== */

.grid-editor-container {
    min-height: 400px;
}

.grid-editor-container .card {
    border-radius: 0.5rem;
}

.grid-editor-container .card-body {
    padding: 1rem;
}


/* ========================================
   Grid Rows
   ======================================== */

.grid-rows-container {
    min-height: 60px;
}

.grid-row {
    background-color: var(--grid-depth-0-bg);
    border: 2px solid var(--grid-depth-0-border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.grid-row:hover {
    border-color: var(--grid-depth-0-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.grid-row.inactive {
    opacity: var(--grid-inactive-opacity);
}

/* Verschachtelungstiefe Farben */
.grid-row.depth-1 {
    background-color: var(--grid-depth-1-bg);
    border-color: var(--grid-depth-1-border);
}

.grid-row.depth-2 {
    background-color: var(--grid-depth-2-bg);
    border-color: var(--grid-depth-2-border);
}

.grid-row.depth-3 {
    background-color: var(--grid-depth-3-bg);
    border-color: var(--grid-depth-3-border);
}

.grid-row.depth-4 {
    background-color: var(--grid-depth-4-bg);
    border-color: var(--grid-depth-4-border);
}

.grid-row-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem 0.5rem 0 0;
}

.grid-row-handle {
    cursor: grab;
    color: var(--grid-handle-color);
    padding: 0.25rem;
    transition: color 0.2s;
}

.grid-row-handle:hover {
    color: var(--grid-handle-hover);
}

.grid-row-handle:active {
    cursor: grabbing;
}

.grid-row-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #212529;
    flex-grow: 1;
}

.grid-row-actions {
    display: flex;
    gap: 0.25rem;
}

.grid-row-columns {
    padding: 0.75rem;
}


/* ========================================
   Grid Columns
   ======================================== */

.grid-columns-container {
    min-height: 60px;
}

.grid-column {
    transition: transform 0.2s;
}

.grid-column.inactive {
    opacity: var(--grid-inactive-opacity);
}

.grid-column-inner {
    background-color: var(--grid-field-bg);
    border: 1px dashed var(--grid-field-border);
    border-radius: 0.375rem;
    min-height: var(--grid-column-min-height);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.grid-column-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--grid-field-border);
    border-radius: 0.375rem 0.375rem 0 0;
    font-size: 0.8rem;
}

.grid-column-handle {
    cursor: grab;
    color: var(--grid-handle-color);
    padding: 0.125rem;
    transition: color 0.2s;
}

.grid-column-handle:hover {
    color: var(--grid-handle-hover);
}

.grid-column-handle:active {
    cursor: grabbing;
}

.grid-column-width {
    background-color: #e9ecef;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.2s;
}

.grid-column-width:hover {
    background-color: #dee2e6;
}

.grid-column-actions {
    margin-left: auto;
    display: flex;
    gap: 0.125rem;
}

.grid-column-content {
    flex-grow: 1;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.grid-column-add-actions {
    display: flex;
    gap: 0.375rem;
    padding-top: 0.375rem;
    margin-top: auto;
}

.grid-column-add-actions .btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}


/* ========================================
   Grid Fields / Items
   ======================================== */

.grid-fields-container {
    min-height: 20px;
}

/* Legacy Field Style (ohne Preview) */
.grid-field:not(.grid-field-preview) {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--grid-field-bg);
    border: 1px solid var(--grid-field-border);
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
}

/* Preview Field Style (mit echten Formular-Elementen) */
.grid-field.grid-field-preview {
    position: relative;
    background-color: var(--grid-field-bg);
    border: 1px solid var(--grid-field-border);
    border-radius: 0.375rem;
    padding: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.grid-field.grid-field-preview:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.grid-field.grid-field-preview.selected {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.grid-field.inactive {
    opacity: var(--grid-inactive-opacity);
    background-color: #f8f9fa;
}

/* Field Toolbar (Handle + Actions) */
.grid-field-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
    background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0));
    border-radius: 0 0.375rem 0 0.375rem;
    z-index: 5;
}

.grid-field.grid-field-preview:hover .grid-field-toolbar {
    opacity: 1;
}

.grid-field-toolbar .grid-field-handle {
    cursor: grab;
    color: var(--grid-handle-color);
    padding: 0.25rem;
    transition: color 0.2s;
}

.grid-field-toolbar .grid-field-handle:hover {
    color: var(--grid-handle-hover);
}

.grid-field-toolbar .grid-field-handle:active {
    cursor: grabbing;
}

.grid-field-toolbar .grid-field-actions {
    display: flex;
    gap: 0.125rem;
}

/* Field Content (Label + Element) */
.grid-field-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.grid-field-content .field-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--form-label-color, #333);
    margin-bottom: 0.125rem;
}

/* Form Elements im Grid nutzen CSS Variables */
.grid-field-content .form-control,
.grid-field-content .form-select {
    font-family: var(--form-font-family, inherit);
    font-size: var(--form-font-size, 0.875rem);
    background-color: var(--form-input-background, #fff);
    border-color: var(--form-input-border-color, #ced4da);
    border-width: var(--form-input-border-width, 1px);
    border-radius: var(--form-input-border-radius, 0.375rem);
    padding: 0.375rem 0.5rem;
    cursor: not-allowed;
}

.grid-field-content .form-control:disabled,
.grid-field-content .form-select:disabled {
    background-color: var(--form-input-background, #fff);
    opacity: 0.8;
}

.grid-field-content .form-check {
    margin-bottom: 0.25rem;
}

.grid-field-content .form-check-input:disabled {
    opacity: 0.7;
}

/* Legacy styles for non-preview fields */
.grid-field:not(.grid-field-preview) .grid-field-handle {
    cursor: grab;
    color: var(--grid-handle-color);
    padding: 0.125rem;
    transition: color 0.2s;
}

.grid-field:not(.grid-field-preview) .grid-field-handle:hover {
    color: var(--grid-handle-hover);
}

.grid-field:not(.grid-field-preview) .grid-field-handle:active {
    cursor: grabbing;
}

.grid-field-info {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow: hidden;
}

.grid-field-icon {
    color: #6c757d;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.grid-field-type {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    flex-shrink: 0;
}


/* ========================================
   Nested Rows
   ======================================== */

.grid-nested-rows {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--grid-field-border);
}


/* ========================================
   Button Sizes
   ======================================== */

.btn-xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.7rem;
    line-height: 1.4;
    border-radius: 0.2rem;
}


/* ========================================
   Drag & Drop States (SortableJS)
   ======================================== */

.grid-sortable-ghost {
    opacity: var(--grid-ghost-opacity);
    background-color: var(--grid-ghost-bg) !important;
    border-color: var(--grid-ghost-bg) !important;
}

.grid-sortable-chosen {
    box-shadow: var(--grid-chosen-shadow);
}

.grid-sortable-drag {
    opacity: 1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: rotate(2deg);
}


/* ========================================
   Preview Pane
   ======================================== */

.preview-pane {
    background-color: #ffffff;
    min-height: 300px;
    overflow-y: auto;
}

.preview-pane .cb-form-preview {
    padding: 1rem;
}


/* ========================================
   Loading & Empty States
   ======================================== */

.loading-spinner {
    padding: 2rem;
}

#grid-editor:empty::after {
    content: 'Klicken Sie auf "+ Zeile" um zu beginnen';
    display: block;
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    font-style: italic;
}


/* ========================================
   Unsaved Changes Warning
   ======================================== */

#unsaved-warning {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    max-width: 500px;
    width: calc(100% - 2rem);
}


/* ========================================
   Modal Overrides
   ======================================== */

#addFieldModal .modal-body,
#columnWidthModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

#addFieldModal .btn {
    text-align: left;
    padding: 0.5rem 0.75rem;
}

#addFieldModal .btn i {
    width: 20px;
    text-align: center;
}

#columnWidthModal .btn {
    text-align: center;
    font-weight: 500;
}


/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 991.98px) {
    .grid-editor-container .row > div {
        margin-bottom: 1rem;
    }

    .grid-editor-container .row > div:last-child {
        margin-bottom: 0;
    }

    #unsaved-warning {
        bottom: 0.5rem;
        max-width: none;
        width: calc(100% - 1rem);
    }
}

@media (max-width: 767.98px) {
    .grid-row-header {
        flex-wrap: wrap;
    }

    .grid-row-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }

    .grid-column-add-actions {
        flex-direction: column;
    }

    .grid-field {
        flex-wrap: wrap;
    }

    .grid-field-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }
}


/* ========================================
   Dark Mode Support (deaktiviert)
   Backend verwendet immer Light Mode
   ======================================== */


/* ========================================
   Field Palette (Sidebar)
   ======================================== */

.field-palette-card {
    position: sticky;
    top: 1rem;
}

.field-palette {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.palette-section {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.75rem;
}

.palette-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.375rem;
    cursor: grab;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    user-select: none;
}

.palette-item:last-child {
    margin-bottom: 0;
}

.palette-item:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
}

.palette-item:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.palette-item i {
    width: 18px;
    text-align: center;
    color: #6c757d;
}

.palette-item span {
    color: #495057;
}

/* Drag state for palette items */
.palette-item.sortable-ghost {
    opacity: 0.4;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.palette-item.sortable-ghost * {
    color: #ffffff !important;
}

.palette-item.sortable-chosen {
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.palette-item.sortable-drag {
    opacity: 1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Drop zone highlight for columns */
.grid-fields-container.drop-highlight {
    background-color: #e3f2fd;
    border: 2px dashed #2196f3;
    border-radius: 0.375rem;
    min-height: 60px;
}

/* Empty column placeholder */
.grid-fields-container:empty::before {
    content: 'Feld hierher ziehen';
    display: block;
    text-align: center;
    padding: 1rem;
    color: #adb5bd;
    font-size: 0.8rem;
    font-style: italic;
}


/* ========================================
   Print Styles
   ======================================== */

@media print {
    .grid-editor-container,
    .grid-row-handle,
    .grid-column-handle,
    .grid-field-handle,
    .grid-row-actions,
    .grid-column-actions,
    .grid-field-actions,
    .grid-column-add-actions,
    .field-palette-card,
    #unsaved-warning {
        display: none !important;
    }
}

/*
 * layout-editor.css — Plan.io #2082 C2
 *
 * Erganzendes Styling fuer den Layout-Editor (Slot-Tabs analog
 * PageEditor B5). Der Basis-Stack (Palette / Canvas / Sidebar / Block /
 * Sortable-Ghost) kommt aus page-editor.css und wird hier nur um die
 * Slot-spezifischen Elemente erweitert.
 */

/* --- Slot-Tabs (Card-Header) ------------------------------------------- */

.cb-canvas-card .nav-tabs .nav-link {
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.cb-canvas-card .nav-tabs .nav-link i {
    margin-right: 0.35rem;
    color: var(--bs-secondary, #6c757d);
}

.cb-canvas-card .nav-tabs .nav-link.active i {
    color: var(--bs-primary, #0d6efd);
}

/* --- Slot-Pane Wrapper ------------------------------------------------- */

.cb-slot-pane {
    /* Tabs werden via d-none/d-block geschaltet — keine eigene Animation
       noetig, damit der Sortable-State stabil bleibt. */
}

.cb-slot-header {
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    padding-bottom: 0.5rem;
}

/* --- Slot-spezifische Hinweise ----------------------------------------- */

.cb-slot-canvas[data-slot="sidebar_left"],
.cb-slot-canvas[data-slot="sidebar_right"] {
    /* Sidebar-Slots werden im Frontend schmaler dargestellt — Hinweis im
       Editor durch leicht reduziertes Innen-Padding. */
    padding: 0.25rem;
}

.cb-slot-canvas[data-slot="sidebar_left"] .cb-block,
.cb-slot-canvas[data-slot="sidebar_right"] .cb-block {
    font-size: 0.875rem;
}

/* --- Tab-active Indikator (zusaetzlich zum Bootstrap-Default) ---------- */

.cb-canvas-card .nav-tabs .nav-link.active {
    border-bottom-color: transparent;
    background: var(--bs-body-bg, #fff);
    font-weight: 500;
}

/* --- Drag-Ghost Spezialfall fuer leere Slot-Canvas --------------------- */

.cb-slot-canvas .sortable-ghost {
    opacity: 0.4;
}

.cb-slot-canvas.sortable-drag-over {
    background: rgba(13, 110, 253, 0.05);
    border-radius: 0.375rem;
}

/*
 * page-editor.css — Plan.io #2082 B5
 *
 * Styling for the Gutenberg-style page editor. Layered on top of
 * Bootstrap 5 — no own design tokens beyond the CB-prefixed classes,
 * so theme variables propagate cleanly.
 */

/* --- Fullscreen workspace (#2232-B1-T1) --------------------------------- */

/*
 * The editor templates override the base `page_content` block and mount
 * <main class="cb-editor-workspace"> directly into the AppStack `.main`
 * flex column (display:flex / flex-direction:column / min-height:100vh).
 * Pinning `.main` to the viewport height on editor pages lets the workspace
 * flex-fill the space between navbar and footer without hardcoding the
 * navbar height — switch-bar/footer heights are absorbed automatically by
 * the flex column.
 */
body.cb-editor-fullscreen .main {
    height: 100vh;
}

.cb-editor-workspace {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* Topbar — palette toggle, back link, title, status badge + actions. */
.cb-editor-topbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cb-editor-topbar-title {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cb-editor-topbar-title .cb-editor-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-editor-topbar-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

/* Workspace body — palette | canvas | sidebar, each pane scrolls on its
   own. No sticky constructs anymore. */
.cb-editor-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Cards fill their pane vertically; the pane (not the card) scrolls. */
.cb-editor-palette .cb-palette-card,
.cb-editor-sidebar .cb-sidebar-card,
.cb-editor-canvas-pane .cb-canvas-card {
    flex: 1 0 auto;
}

/* --- Palette (left, collapsible) ---------------------------------------- */

.cb-editor-palette {
    display: flex;
    flex: 0 0 260px;
    flex-direction: column;
    width: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    transition: flex-basis 0.2s ease, width 0.2s ease, padding 0.2s ease;
}

/* Collapsed palette — class toggled by cb-editor-workspace.js
   (localStorage: cb_editor_palette_collapsed). */
.cb-editor-workspace.cb-palette-collapsed .cb-editor-palette {
    flex-basis: 0;
    width: 0;
    min-width: 0;
    padding: 0;
    border-right-width: 0;
    overflow: hidden;
}

[data-cb-palette-toggle] i {
    transition: transform 0.2s ease;
}

.cb-editor-workspace.cb-palette-collapsed [data-cb-palette-toggle] i {
    transform: rotate(180deg);
}

.cb-palette-section + .cb-palette-section {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.5rem;
}

.cb-palette-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    cursor: grab;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cb-palette-item:hover {
    background: var(--bs-secondary-bg, #e9ecef);
    border-color: var(--bs-primary, #0d6efd);
}

.cb-palette-item:active {
    cursor: grabbing;
}

.cb-palette-item i {
    width: 1.25rem;
    text-align: center;
    color: var(--bs-secondary, #6c757d);
}

/* --- Canvas (center) ---------------------------------------------------- */

.cb-editor-canvas-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Canvas card capped at the xxl container width (1320px) and centred —
   keeps the block cards readable on ultra-wide screens and matches the
   frontend container width for the upcoming WYSIWYG parity (T2). */
.cb-editor-canvas-pane .cb-canvas-card {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.cb-canvas {
    min-height: 400px;
    padding: 0.5rem;
}

.cb-canvas-empty {
    border: 2px dashed var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 3rem 1rem;
}

.cb-block {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bs-body-bg, #fff);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cb-block:hover {
    border-color: var(--bs-primary, #0d6efd);
}

.cb-block.cb-block-active {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}

.cb-block-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    cursor: grab;
    font-size: 0.875rem;
}

.cb-block-toolbar:active {
    cursor: grabbing;
}

.cb-block-label {
    color: var(--bs-secondary, #6c757d);
    font-weight: 500;
}

.cb-block-label i {
    margin-right: 0.25rem;
}

.cb-block-actions .btn {
    padding: 0.125rem 0.375rem;
}

.cb-block-preview {
    padding: 0.75rem;
    color: var(--bs-body-color, #212529);
    word-break: break-word;
    min-height: 1.75rem;
}

/* #2232-B1-T2b — WYSIWYG canvas block previews (scale-to-fit).
 *
 * The preview cell renders the block in real frontend optics (own CSS bundle,
 * no Admin-AppStack leak). While the server render is in flight the cell shows
 * the escaped text snippet (cb-block-preview-pending); once mounted it carries
 * cb-block-preview-shadow.
 *
 * Scale-to-fit (Shopify/thumbnail technique): the inner .cb-block-preview-host
 * is laid out at the fixed canvasDesignWidth (desktop), so Bootstrap @media
 * queries match a real desktop viewport instead of the narrow card — no
 * mid-word breaks, correct col-lg split. The host is then shrunk with
 * transform: scale() to fit the card; .cb-block-preview is the VIEWPORT that
 * clips the scaled overflow. JS sets the viewport height to the scaled host
 * height (so no blank gap / overlap) and the host width + transform inline. */
.cb-block-preview.cb-block-preview-shadow {
    padding: 0;
    min-height: 2.5rem;
    /* Viewport: clip the scaled host, never spawn a second scrollbar. */
    overflow: hidden;
    position: relative;
}

/* Shadow host — laid out at the design width and scaled down by JS
 * (width + transform are set inline). transform-origin top-left keeps the
 * scaled box anchored so the viewport height math is exact. */
.cb-block-preview-host {
    transform-origin: top left;
    /* No scrollbars on the host itself; the viewport owns clipping. */
    overflow: visible;
}

.cb-block-preview.cb-block-preview-pending {
    color: var(--bs-secondary, #6c757d);
    font-size: 0.8125rem;
    font-style: italic;
    /* Dezent loading hint — the snippet stays readable until the shadow render
       arrives (typically a single round-trip). */
    opacity: 0.85;
}

/* --- Row band hint (#2232-B1-T2b, Stufe 1) ----------------------------- */

/*
 * The frontend renders the row band (bg/overlay/padding/full-width) on the row
 * wrapper. The editor canvas keeps the row in the Light DOM (Sortable +
 * toolbars), so we only paint a dezent approximation: applyRowBandStyling()
 * sets the background inline and toggles these padding/marker classes. Full
 * row fidelity is Stufe 2. */
.cb-row.cb-rowband {
    background-clip: padding-box;
}

.cb-row.cb-rowband-image .cb-bs-row {
    /* Slightly lift the columns off a busy background image so the editor
       cells stay legible. */
    background: var(--bs-body-bg, #fff);
    border-radius: 0.375rem;
    opacity: 0.97;
}

.cb-row.cb-rowband-pad-sm .cb-bs-row { padding: 0.75rem; }
.cb-row.cb-rowband-pad-md .cb-bs-row { padding: 1.25rem; }
.cb-row.cb-rowband-pad-lg .cb-bs-row { padding: 2rem; }
.cb-row.cb-rowband-pad-xl .cb-bs-row { padding: 3rem; }

.cb-rowband-badges .badge {
    font-weight: 500;
    font-size: 0.7rem;
}

/* --- Grid: rows & columns (#2210) -------------------------------------- */

.cb-row {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.cb-row-toolbar {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    font-size: 0.8rem;
}

.cb-row-handle {
    cursor: grab;
}

.cb-row-handle:active {
    cursor: grabbing;
}

.cb-row-actions .btn {
    padding: 0.125rem 0.375rem;
}

.cb-bs-row {
    padding: 0.5rem;
    /* Bootstrap .row negative margins are kept — editor cells use .col-* */
}

.cb-col {
    /* Width comes from the Bootstrap col-* classes added by the editor. */
}

.cb-col-toolbar {
    margin-bottom: 0.25rem;
}

.cb-col-toolbar .cb-col-width {
    font-size: 0.75rem;
}

.cb-col-blocks {
    min-height: 4rem;
    border: 1px dashed var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
    padding: 0.4rem;
    background: var(--bs-body-bg, #fff);
}

.cb-col-blocks:empty,
.cb-col-empty {
    color: var(--bs-secondary, #6c757d);
}

.cb-col-empty {
    pointer-events: none;
}

.cb-add-row .btn-group {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cb-row-settings-panel {
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

/* --- Sidebar (right) ---------------------------------------------------- */

.cb-editor-sidebar {
    display: flex;
    flex: 0 0 340px;
    flex-direction: column;
    width: 340px;
    overflow-y: auto;
    padding: 0.75rem;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}

/* Small screens: fall back to stacked panes with normal page scrolling. */
@media (max-width: 991.98px) {
    body.cb-editor-fullscreen .main {
        height: auto;
    }

    .cb-editor-body {
        flex-direction: column;
        overflow: visible;
    }

    .cb-editor-palette,
    .cb-editor-sidebar {
        flex: 0 0 auto;
        width: auto;
        max-height: 40vh;
        border-left: 0;
        border-right: 0;
    }
}

#page-editor-sidebar .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

/* --- Section picker (#2213 S4) ----------------------------------------- */

.cb-section-nav .nav-link {
    color: var(--bs-body-color, #212529);
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
}

.cb-section-nav .nav-link.active {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.cb-section-cards-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

.cb-section-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.cb-section-card:hover {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Thumbnail wrapper — fixed viewport into the scaled preview iframe. The
   iframe renders at full width and is shrunk via transform:scale so the
   whole section is visible as a thumbnail. */
.cb-section-preview-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cb-section-preview {
    position: absolute;
    top: 0;
    left: 0;
    /* Render at 2x width, then scale to 0.5 → the thumbnail shows the section
       at the same proportions a 100%-width frontend render would. */
    width: 200%;
    height: 320px;
    border: 0;
    transform: scale(0.5);
    transform-origin: top left;
    pointer-events: none;
}

/* --- Device / breakpoint preview (#2232-B7) --------------------------- */

/* The preview iframe loads the REAL frontend bundle, so its CSS @media queries
   react to the iframe width. The device switcher in the modal header only sets
   the WRAPPER width (no reload) — the iframe stays 100% of the wrapper, so the
   responsive layout reflows for the chosen device. The wrapper scrolls and
   centres the device frame; a soft transition makes the resize feel smooth. */
.cb-preview-wrap {
    /* Fill the modal body; the iframe keeps a sensible height even at narrow
       device widths (mobile/tablet) so the frame is not a thin strip. */
    height: 75vh;
    max-height: 75vh;
    margin: 0 auto;
    overflow: auto;
    background: var(--bs-tertiary-bg, #f1f3f5);
    transition: width 0.25s ease;
}

/* Desktop = full width, no device frame chrome. */
.cb-preview-wrap.cb-preview-desktop {
    width: 100%;
    background: var(--bs-body-bg, #fff);
}

/* Fixed device width → centre the frame and give it a subtle "device" look
   (border + shadow + rounded corners) so the breakpoint boundary is obvious. */
.cb-preview-wrap.cb-preview-device {
    padding: 1rem 0;
    background: var(--bs-tertiary-bg, #f1f3f5);
}

.cb-preview-wrap.cb-preview-device .cb-preview-iframe {
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    background: var(--bs-body-bg, #fff);
}

/* The iframe always fills the wrapper width and the full preview height so a
   narrow device frame stays tall (no thin strip). */
.cb-preview-iframe {
    display: block;
    width: 100%;
    height: 75vh;
    min-height: 70vh;
}

/* Active device button — visually marked via Bootstrap's .active on the
   outline button (handled by BS variables, Dark/Light-safe). The switcher sits
   in the header between title and close button. */
.cb-preview-devices .btn.active {
    background-color: var(--bs-secondary, #6c757d);
    border-color: var(--bs-secondary, #6c757d);
    color: var(--bs-white, #fff);
}

/* --- Drag-ghost (SortableJS) ------------------------------------------- */

.sortable-ghost {
    opacity: 0.4;
}

.sortable-drag .cb-palette-item,
.sortable-drag .cb-block {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Inline rich-text widget (#2232-B5a) ------------------------------ */
/* The contenteditable replaces the textarea for the paragraph block. Bootstrap
   .form-control supplies the Dark/Light-safe border/background; we only add a
   sensible editing height and list spacing. */
.cb-rt-editable {
    min-height: 6rem;
    height: auto;
    overflow-y: auto;
    cursor: text;
}

.cb-rt-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--bs-secondary-color, #6c757d);
}

.cb-rt-editable ul,
.cb-rt-editable ol {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.cb-rt-toolbar .btn i {
    pointer-events: none;
}