/* ==========================================================================
   Modul Raumpläne — Übersicht (Kartenraster) und Editor.
   ========================================================================== */

/* ── Übersicht ─────────────────────────────────────────────────────────── */

.fp-widget-actions {
    margin-bottom: var(--space-4);
}

.fp-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}

.fp-plan-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    overflow: hidden;
}

.fp-plan-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--border-default);
    background: #fff;
    cursor: pointer;
}

.fp-plan-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.fp-plan-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.fp-plan-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.fp-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* ── Editor ────────────────────────────────────────────────────────────── */

/* Der Editor braucht die volle Breite statt der Lesebreite des Inhalts. */
.content-area:has(.fp-editor) {
    max-width: none;
}

.fp-page-header h1 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fp-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-h) - 170px);
    min-height: 480px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    overflow: hidden;
}

.fp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
}

.fp-tool.active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
    position: relative;
    z-index: 1;
}

.fp-tool-label {
    margin-left: var(--space-1);
}

.fp-wand-options {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fp-wand-options[hidden] {
    display: none;
}

.fp-inline-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-13);
    color: var(--text-secondary);
    white-space: nowrap;
}

.fp-inline-field output {
    min-width: 2.5ch;
    font-variant-numeric: tabular-nums;
}

.fp-prefix {
    width: 7rem;
}

.fp-zoom-value {
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
}

.fp-spacer {
    flex: 1;
}

.fp-toolbar .btn .icon + span {
    margin-left: var(--space-1);
}

.fp-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.fp-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: var(--surface-sunken);
    background-image:
        linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%),
        linear-gradient(-45deg, var(--border-subtle) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border-subtle) 75%),
        linear-gradient(-45deg, transparent 75%, var(--border-subtle) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    touch-action: none;
    user-select: none;
    outline: none;
    cursor: crosshair;
}

.fp-viewport[data-tool="select"] { cursor: default; }
.fp-readonly .fp-viewport { cursor: grab; }
.fp-viewport.is-pan-ready { cursor: grab; }
.fp-viewport.is-panning { cursor: grabbing; }

.fp-stage {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.fp-stage img {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    pointer-events: none;
}

.fp-stage svg {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.fp-shape {
    fill: rgba(22, 56, 105, 0.18);
    stroke: #163869;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.fp-viewport[data-tool="select"] .fp-shape,
.fp-readonly .fp-shape {
    cursor: pointer;
}

.fp-shape:hover {
    fill: rgba(22, 56, 105, 0.28);
}

.fp-shape.is-selected {
    fill: rgba(234, 88, 12, 0.25);
    stroke: #ea580c;
    stroke-width: 2.5;
}

.fp-shape.is-invalid {
    stroke: #dc2626;
    stroke-dasharray: 6 4;
}

.fp-label {
    fill: #0f172a;
    stroke: #fff;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    paint-order: stroke;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.fp-handle,
.fp-handle-mid {
    fill: #fff;
    stroke: #ea580c;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    cursor: move;
}

.fp-handle-mid {
    fill: #ea580c;
    opacity: 0.55;
    cursor: copy;
}

.fp-handle-mid:hover {
    opacity: 1;
}

.fp-handle.is-first {
    fill: #ea580c;
}

.fp-draft {
    fill: rgba(234, 88, 12, 0.12);
    stroke: #ea580c;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.fp-hint {
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-overlay);
    color: #fff;
    font-size: var(--fs-12);
    pointer-events: none;
}

/* ── Seitenleiste ──────────────────────────────────────────────────────── */

.fp-panel {
    display: flex;
    flex-direction: column;
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-default);
    min-height: 0;
}

.fp-props {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.fp-props .form-group {
    margin-bottom: var(--space-3);
}

.fp-props-title {
    font-weight: 600;
    font-size: var(--fs-15);
}

.fp-props-meta {
    margin-bottom: var(--space-3);
}

.fp-props-actions {
    display: flex;
    gap: var(--space-2);
}

.fp-props-actions .btn .icon + span {
    margin-left: var(--space-1);
}

.fp-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.fp-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

.fp-list-item {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    width: 100%;
    padding: var(--space-1) var(--space-4);
    border: none;
    background: none;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-14);
}

.fp-list-item:hover {
    background: var(--surface-sunken);
}

.fp-list-item.is-selected {
    background: var(--brand-soft);
    color: var(--brand);
}

.fp-list-item.is-invalid .fp-list-code {
    color: var(--danger);
}

.fp-list-code {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fp-list-name {
    color: var(--text-muted);
    font-size: var(--fs-13);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-empty {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    color: var(--text-muted);
    font-size: var(--fs-13);
}

.fp-props .fp-empty {
    padding: 0;
}

@media (max-width: 900px) {
    .fp-body {
        flex-direction: column;
    }

    .fp-panel {
        width: auto;
        max-height: 40%;
        border-left: none;
        border-top: 1px solid var(--border-default);
    }

    .fp-tool-label {
        display: none;
    }
}