/*
 * Demo-Visualisierung für T3Bootstrap-Demo-Seiten.
 * Aktiviert per CSS-Klasse `t3bs-demo-outline` auf t3bs_container / t3bs_fluidrow / t3bs_column.
 */

.t3bs-demo-outline > [class*="container"],
.t3bs-demo-outline.container,
.t3bs-demo-outline.container-sm,
.t3bs-demo-outline.container-md,
.t3bs-demo-outline.container-lg,
.t3bs-demo-outline.container-xl,
.t3bs-demo-outline.container-fluid {
    background: rgba(13, 110, 253, 0.04);
    outline: 1px dashed rgba(13, 110, 253, 0.45);
    outline-offset: -1px;
}

.t3bs-demo-outline .row,
.t3bs-demo-outline.row {
    background: rgba(220, 53, 69, 0.04);
    outline: 1px dashed rgba(220, 53, 69, 0.40);
    outline-offset: -1px;
}

.t3bs-demo-outline [class*="col-"],
.t3bs-demo-outline.col,
.t3bs-demo-outline[class*="col-"] {
    position: relative;
    background: rgba(25, 135, 84, 0.06);
    outline: 1px dashed rgba(25, 135, 84, 0.50);
    outline-offset: -2px;
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
    min-height: 3.5rem;
}

.t3bs-demo-outline [class*="col-"]::before,
.t3bs-demo-outline.col::before,
.t3bs-demo-outline[class*="col-"]::before {
    content: attr(data-grid-label);
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    font: 600 0.7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(25, 135, 84, 0.85);
    letter-spacing: 0.02em;
}

.t3bs-demo-outline-row > .row {
    background: rgba(220, 53, 69, 0.04);
    outline: 1px dashed rgba(220, 53, 69, 0.40);
    outline-offset: -1px;
}

/* Mini-label für Container-Typ */
.t3bs-demo-container-label {
    display: inline-block;
    margin-bottom: 0.25rem;
    padding: 0.1rem 0.5rem;
    font: 600 0.7rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(13, 110, 253, 0.9);
    background: rgba(13, 110, 253, 0.08);
    border-radius: 0.25rem;
}

/* ============================================================================
   Spacing-Demo-Visualisierung
   Outer-Frame: dashed Outline zeigt die volle Element-Bounding-Box (inkl. Padding).
   Inner-Pseudo: solider Hintergrund am Body — was bleibt drumherum ist das Padding.
   ============================================================================ */
.spacing-demo {
    background:
        linear-gradient(rgba(13, 110, 253, 0.06), rgba(13, 110, 253, 0.06));
    outline: 1px dashed rgba(13, 110, 253, 0.45);
    outline-offset: -1px;
    position: relative;
}
.spacing-demo .container {
    background: rgba(25, 135, 84, 0.10);
    outline: 1px dashed rgba(25, 135, 84, 0.55);
    outline-offset: -1px;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
}
.spacing-demo .container > * { margin: 0; }
.spacing-demo .ce-content { padding: 0; }

/* Mini-Label oben rechts, zeigt aktuellen Spacing-Wert */
.spacing-demo::before {
    content: attr(data-spacing-label);
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font: 600 0.7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(13, 110, 253, 0.85);
    background: rgba(255, 255, 255, 0.85);
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    pointer-events: none;
}

/* Margin-Visualisierung — auffälligere Outer-Outline, da Margin außerhalb liegt */
.spacing-demo-margin {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    outline: 1px dashed rgba(220, 53, 69, 0.55);
    background: linear-gradient(rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.05));
}
.spacing-demo-margin::before { color: rgba(220, 53, 69, 0.85); }
.spacing-demo-margin .container {
    background: rgba(255, 255, 255, 0.6);
    outline: 1px dashed rgba(220, 53, 69, 0.40);
}