/* ══════════════════════════════════════════════════════════════════════════════
   GRUNDRISS-SKIZZEN — Styles (Namespace .fp-). Ruhig, modern, ohne CAD-Optik.
   Regel: nie Text über Kartenränder laufen lassen (min-width:0 + Ellipsis/umbruch).
   ════════════════════════════════════════════════════════════════════════════ */
.fp-page { padding: 4px 2px 40px; }

/* ── Farbtokens (an das Markengrün angelehnt; neutral) ── */
.fp-page, .fp-editor { --fp-green:var(--green-600); --fp-green-d:#0f5f34; --fp-ink:#1c2a22; --fp-muted:#64748b;
  --fp-line:var(--gray-200); --fp-line2:#cbd5e1; --fp-bg:#f8fafc; --fp-card:var(--color-surface); --fp-radius:12px; }

/* ══════════ ÜBERSICHT ══════════ */
.fp-listwrap { max-width: 1320px; margin: 0 auto; }
.fp-list-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.fp-h1 { font-size:1.5rem; font-weight:700; color:var(--fp-ink); margin:0 0 4px; }
.fp-sub { font-size:.9rem; color:var(--fp-muted); margin:0; max-width:640px; overflow-wrap:anywhere; }

.fp-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.fp-input { font:inherit; font-size:.9rem; color:var(--fp-ink); background:var(--color-surface); border:1px solid var(--fp-line2);
  border-radius: var(--radius-md); padding:7px 10px; min-width:0; }
.fp-input:focus { outline:none; border-color:var(--fp-green); box-shadow:0 0 0 3px rgba(20,122,67,.14); }
.fp-search { flex:1 1 240px; min-width:180px; }
.fp-flt-obj { min-width:220px; flex:0 1 280px; }
.fp-check { display:inline-flex; align-items:center; gap:6px; font-size:.88rem; color:var(--fp-ink); white-space:nowrap; cursor:pointer; }

/* ── Zwei benannte Bereiche: abgelegte Pläne · eigene Skizzen ──────────────
   Ein Grundriss wird EINMAL gespeichert. Oben stehen die abgelegten Dokumente
   (dieselben Datensätze wie in der Objektakte), darunter die Skizzen. Bewusst
   eine schlichte Zeilenliste statt Karten: Pläne werden gesucht und geöffnet,
   nicht betrachtet — und eine zweite Kachelwand hätte die Skizzen verdrängt. */
.fp-sect { margin-bottom: var(--space-8); min-width: 0; }
.fp-sect-h { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--fp-ink); }
.fp-sect-s { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--fp-muted); max-width: 70ch; }
.fp-doclist { display: flex; flex-direction: column; border: 1px solid var(--fp-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--fp-card); }
.fp-doclist > .fp-empty { border: 0; }
.fp-docrow {
  display: flex; align-items: baseline; gap: var(--space-3); min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--fp-line);
}
.fp-docrow:first-child { border-top: 0; }
.fp-docrow:hover { background: var(--bg-hover); }
.fp-docrow-n { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.fp-docrow-m { flex: 0 0 auto; font-size: var(--text-xs); color: var(--fp-muted); white-space: nowrap; }
/* ── Karten ── */
.fp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.fp-card { background:var(--fp-card); border:1px solid var(--fp-line); border-radius:var(--fp-radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:box-shadow .15s, transform .15s; }
.fp-card:hover { box-shadow:0 6px 18px rgba(15,23,42,.10); transform:translateY(-1px); }
.fp-thumb { position:relative; aspect-ratio:16/10; background:var(--gray-100) repeating-linear-gradient(45deg,var(--color-info-soft) 0 10px,var(--gray-100) 10px 20px);
  cursor:pointer; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--fp-line); }
.fp-thumb-img { width:100%; height:100%; object-fit:contain; background:var(--color-surface); }
.fp-thumb-ph { color:var(--fp-muted); font-size:.82rem; }
.fp-card-body { padding:11px 12px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.fp-card-title { font-weight:600; color:var(--fp-ink); font-size:.98rem; cursor:pointer; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-card-title:hover { color:var(--fp-green); }
.fp-card-meta { display:flex; gap:8px; align-items:center; font-size:.8rem; color:var(--fp-muted); min-width:0; }
.fp-card-obj { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-card-case { font-size:.8rem; color:var(--fp-green-d); background:#eaf5ee; border-radius: var(--radius-sm); padding:2px 7px; align-self:flex-start;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-card-foot { font-size:.78rem; color:var(--fp-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-card-acts { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.fp-mono { font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:.78rem; }
.fp-muted { color:var(--fp-muted); }

.fp-pill { position:absolute; top:8px; left:8px; font-size:.72rem; font-weight:600; padding:2px 8px; border-radius: var(--radius-pill);
  background:rgba(255,255,255,.92); border:1px solid var(--fp-line2); color:var(--fp-ink); }

/* ── Buttons ── */
.fp-btn { font:inherit; font-size:.88rem; font-weight:500; border:1px solid var(--fp-line2); background:var(--color-surface); color:var(--fp-ink);
  padding:7px 13px; border-radius: var(--radius-md); cursor:pointer; white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
.fp-btn:hover { background:var(--gray-100); }
.fp-btn-primary { background:var(--fp-green); border-color:var(--fp-green); color:var(--color-surface); }
.fp-btn-primary:hover { background:var(--fp-green-d); }
.fp-btn-primary.is-dirty { box-shadow:0 0 0 3px rgba(20,122,67,.20); }
.fp-btn-ghost { background:transparent; border-color:transparent; color:var(--fp-muted); }
.fp-btn-ghost:hover { background:var(--gray-100); color:var(--fp-ink); }
.fp-btn-assign { border-color:#bfe3cd; color:var(--fp-green-d); background:#f2faf5; }
.fp-btn-assign:hover { background:#eaf5ee; }
.fp-btn-icon { padding:6px 9px; min-width:34px; font-size:1rem; }
.fp-btn-icon.is-on { background:var(--fp-green); color:var(--color-surface); border-color:var(--fp-green); }
.fp-btn:disabled { opacity:.55; cursor:default; }

.fp-cbtn { font:inherit; font-size:.8rem; border:1px solid var(--fp-line2); background:var(--color-surface); color:var(--fp-ink);
  padding:4px 9px; border-radius: var(--radius-sm); cursor:pointer; white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
.fp-cbtn:hover { background:var(--gray-100); }
.fp-cbtn-primary { background:var(--fp-green); border-color:var(--fp-green); color:var(--color-surface); }
.fp-cbtn-primary:hover { background:var(--fp-green-d); }
.fp-cbtn-danger { color:#b91c1c; border-color:#f3c7c7; }
.fp-cbtn-danger:hover { background:#fef2f2; }

.fp-empty { grid-column:1/-1; text-align:center; color:var(--fp-muted); padding:48px 16px; background:var(--color-surface);
  border:1px dashed var(--fp-line2); border-radius:var(--fp-radius); }
.fp-empty a { color:var(--fp-green); }
.fp-empty-err { color:#b91c1c; border-color:#f3c7c7; }

/* ══════════ EDITOR ══════════ */
.fp-editor { display:flex; flex-direction:column; height:calc(100vh - 92px); min-height:560px; background:var(--fp-bg);
  border:1px solid var(--fp-line); border-radius:var(--fp-radius); overflow:hidden; }
.fp-topbar { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--color-surface); border-bottom:1px solid var(--fp-line);
  flex-wrap:wrap; }
.fp-title-input { font:inherit; font-size:1rem; font-weight:600; color:var(--fp-ink); border:1px solid transparent; background:transparent;
  border-radius: var(--radius-sm); padding:5px 8px; min-width:140px; flex:1 1 200px; max-width:360px; }
.fp-title-input:hover { border-color:var(--fp-line); }
.fp-title-input:focus { outline:none; border-color:var(--fp-green); background:var(--color-surface); box-shadow:0 0 0 3px rgba(20,122,67,.12); }
.fp-topnum { color:var(--fp-muted); white-space:nowrap; }
.fp-topspacer { flex:1 1 auto; }
.fp-top-tools { display:flex; gap:4px; align-items:center; }
.fp-top-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.fp-chip { font-size:.76rem; padding:2px 9px; border-radius: var(--radius-pill); background:#eaf5ee; color:var(--fp-green-d); border:1px solid #bfe3cd; white-space:nowrap; }

.fp-editor-body { flex:1; display:grid; grid-template-columns:220px 1fr 264px; min-height:0; }
.fp-palette { background:var(--color-surface); border-right:1px solid var(--fp-line); overflow-y:auto; padding:10px; }
.fp-pal-cat { margin-bottom:14px; }
.fp-pal-cat-h { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fp-muted); font-weight:700; margin:0 2px 7px; }
.fp-pal-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fp-pal-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid var(--fp-line);
  border-radius: var(--radius-md); background:var(--color-surface); cursor:pointer; text-align:center; min-width:0; }
.fp-pal-item:hover { border-color:var(--fp-green); background:#f2faf5; }
.fp-pal-item span { font-size:.68rem; color:var(--fp-ink); line-height:1.15; overflow-wrap:anywhere; }
.fp-pal-ico { width:34px; height:30px; display:block; }

.fp-canvas-wrap { position:relative; overflow:hidden; background:var(--color-info-soft)
  radial-gradient(circle, #d9e0ea 1px, transparent 1px); background-size:22px 22px; min-width:0; }
.fp-svg { width:100%; height:100%; display:block; touch-action:none; }
.fp-el.is-sel { }
.fp-handle { pointer-events:all; }

.fp-props { background:var(--color-surface); border-left:1px solid var(--fp-line); overflow-y:auto; padding:12px; }
.fp-props-head { font-size:.95rem; font-weight:700; color:var(--fp-ink); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--fp-line); overflow-wrap:anywhere; }
.fp-meta-hint, .fp-meta-info { font-size:.8rem; color:var(--fp-muted); }
.fp-meta-hint { background:#f8fafc; border:1px solid var(--fp-line); border-radius: var(--radius-md); padding:8px 10px; margin-bottom:12px; overflow-wrap:anywhere; }
.fp-meta-info { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.fp-fld { display:block; margin-bottom:11px; }
.fp-fld-lbl { display:block; font-size:.76rem; font-weight:600; color:var(--fp-muted); margin-bottom:4px; }
.fp-fld .fp-input, .fp-fld textarea.fp-input, .fp-fld select.fp-input { width:100%; }
.fp-prop-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px; }
.fp-prop-grid .fp-fld { margin-bottom:0; }
.fp-rotrow { display:flex; gap:6px; align-items:center; }
.fp-rot-input { flex:1; min-width:0; text-align:center; }
.fp-color { padding:2px; height:34px; width:52px; }
.fp-prop-order, .fp-prop-actions { display:flex; gap:6px; margin-top:10px; }
.fp-prop-order .fp-cbtn, .fp-prop-actions .fp-cbtn { flex:1; text-align:center; }

/* ══════════ ZUORDNEN-DIALOG ══════════ */
.fp-assign { display:flex; flex-direction:column; gap:12px; }
.fp-assign-intro { font-size:.88rem; color:var(--fp-muted); margin:0; overflow-wrap:anywhere; }
.fp-radio-group { display:flex; flex-direction:column; gap:6px; }
.fp-radio { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--fp-ink); cursor:pointer; overflow-wrap:anywhere; }
.fp-assign-pdf { margin-top:2px; }
.fp-assign-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* Skizzen-Öffnen-Button in der Vorgangs-Dokumentenliste */
.doc-act-btn.fp-doc-open:hover { color:var(--fp-green,#147352); }

/* ══════════ RESPONSIVE (Laptop / Tablet) ══════════ */
@media (max-width: 1100px){ .fp-editor-body { grid-template-columns:190px 1fr 234px; } }
@media (max-width: 900px){
  .fp-editor { height:auto; min-height:0; }
  .fp-editor-body { grid-template-columns:1fr; }
  .fp-palette { border-right:none; border-bottom:1px solid var(--fp-line); max-height:150px; }
  .fp-pal-grid { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); }
  .fp-canvas-wrap { height:56vh; min-height:340px; }
  .fp-props { border-left:none; border-top:1px solid var(--fp-line); max-height:320px; }
}