/* FAI-P07-06 — Venue editor surface (global by design): the editor spans several components
   (VenueEditor root + canvas + sidebar + properties), and Blazor scoped CSS only matches one
   component's elements, so the .fpe-* design system lives here. The admin.css full-bleed rule
   (.shell .shell-content:has(.fpe)) keys off the .fpe root rendered by VenueEditor.
   Surfaces use the tokens that exist in tokens.css (--fai-surface / -2 / -3 / --fai-canvas):
   earlier revisions referenced undefined --fai-surface-0/-1, which rendered transparent. */

.fpe { display:flex; flex-direction:column; gap:12px; min-height:calc(100vh - 120px); }
.fpe-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; background:var(--fai-surface); border:1px solid var(--fai-border); border-radius:10px; }
.fpe-toolbar label, .fpe-tools label, .fpe-properties label { font-size:var(--fai-text-sm); font-weight:600; color:var(--fai-ink-2); }
.fpe-toolbar select, .fpe-tools input, .fpe-properties input, .fpe-properties select { border:1px solid var(--fai-border); border-radius:6px; padding:6px 8px; background:var(--fai-surface-2); }
.fpe-check { display:flex; gap:5px; align-items:center; }
.fpe-status { margin-left:auto; color:var(--fai-ink-3); font-family:var(--fai-font-mono); font-size:var(--fai-text-xs); }
.fpe-layout { display:grid; grid-template-columns:190px minmax(0,1fr) 240px; gap:12px; min-height:0; flex:1; }
.fpe-tools, .fpe-properties { display:flex; flex-direction:column; gap:8px; min-height:0; overflow-y:auto; padding:14px; background:var(--fai-surface); border:1px solid var(--fai-border); border-radius:10px; }
.fpe-mode { display:flex; flex-direction:column; gap:4px; }
.fpe-mode strong { font-size:var(--fai-text-sm); }
.fpe-tools button { text-align:left; border:0; border-radius:6px; padding:7px 9px; background:transparent; color:var(--fai-ink-2); cursor:pointer; }
.fpe-tools button:hover, .fpe-tools button.active { background:var(--fai-accent-soft); color:var(--fai-accent); font-weight:600; }
.fpe-tools button.add { margin-top:4px; background:var(--fai-accent); color:white; text-align:center; }
.fpe-tools hr { width:100%; border:0; border-top:1px solid var(--fai-border); }
.fpe-help { font-size:var(--fai-text-xs); line-height:1.45; color:var(--fai-ink-3); }
.fpe-metrics { padding:8px; background:var(--fai-surface-2); border-radius:6px; font-size:var(--fai-text-xs); line-height:1.7; color:var(--fai-ink-3); }
.fpe-canvas-wrap { min-width:0; padding:12px; background:#f7f9fa; border:1px solid var(--fai-border); border-radius:10px; }
.fpe-canvas { display:block; width:100%; height:calc(100vh - 270px); min-height:520px; background:white; border:1px solid #ccd5db; cursor:crosshair; touch-action:none; }
.fpe-drawing-preview { fill:#1f77d033; stroke:#1f77d0; stroke-width:2; stroke-dasharray:6 4; pointer-events:none; }
.fpe-drawing-line { fill:none; stroke-width:4; }
/* FAI-P07-06 — Marquee multi-select drag, Ctrl+drag split-cut line, unsaved-changes chip. */
.fpe-marquee { fill:#1f77d01a; stroke:#1f77d0; stroke-width:1.5; stroke-dasharray:4 3; pointer-events:none; }
.fpe-cut-line { stroke:#c94c4c; stroke-width:3; stroke-dasharray:8 5; pointer-events:none; }
.fpe-dirty { color:#a83232; font-weight:600; }
.fpe-reference rect { stroke:#6b7d8c; stroke-dasharray:6 4; }
.fpe-reference text { fill:#3d4c58; font-size:14px; }
.fpe-reference { pointer-events:none; }
.fpe-route-preview { fill:none; stroke:#1f77d0; stroke-width:4; stroke-dasharray:10 6; pointer-events:none; }
.fpe-boundary { fill:none; stroke:#84919a; stroke-width:2; }
.fpe-feature polygon, .fpe-feature circle { fill:#5b7c99aa; stroke:#34546c; stroke-width:1.5; }
.fpe-feature polyline { fill:none; stroke:#34546c; stroke-width:3; }
.fpe-feature text { fill:#24323b; font-size:12px; pointer-events:none; }
.fpe-feature.selected polygon, .fpe-feature.selected circle { fill:#f4b94299; stroke:#b77700; stroke-width:3; }
.fpe-feature.selected polyline { stroke:#b77700; stroke-width:5; }
.fpe-legend { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:8px; padding-top:8px; color:var(--fai-ink-3); font-size:var(--fai-text-xs); }
.fpe-legend span { white-space:nowrap; }
.fpe-properties label { display:flex; flex-direction:column; gap:4px; }
.fpe-properties .danger { margin-top:auto; border:1px solid #c94c4c; color:#a83232; background:transparent; border-radius:6px; padding:8px; cursor:pointer; }
.fpe-validation { margin-top:10px; padding:8px; border-radius:6px; font-size:var(--fai-text-xs); }
.fpe-validation.ok { background:#e3f4e8; color:#216b35; }
.fpe-validation.bad { background:#fde9e7; color:#9b3028; }
@media (max-width: 900px) { .fpe-layout { grid-template-columns:1fr; } .fpe-tools { order:1; flex-direction:row; flex-wrap:wrap; }.fpe-properties { order:3; }.fpe-canvas-wrap { order:2; } }

/* FAI-P07-06 — Pan/zoom controls, vertex handles, alignment guides, resize handles. Each
   affordance telegraphs its gesture: per-direction resize cursors on the handles, grab
   cursors on vertices and the rotation handle. */
.fpe-view-controls { display:flex; gap:4px; margin-bottom:8px; }
.fpe-view-controls button { width:34px; height:28px; border:1px solid var(--fai-border); background:var(--fai-surface); border-radius:6px; cursor:pointer; font-weight:700; }
.fpe-view-sep { width:1px; align-self:stretch; background:var(--fai-border); }
.fpe-view-controls button.wide { width:auto; min-width:34px; padding:0 10px; font-weight:600; }
.fpe-vertex { fill:#ffffff; stroke:#1f77d0; stroke-width:2.5; cursor:grab; }
.fpe-vertex.dragging { fill:#1f77d0; cursor:grabbing; }
.fpe-guide { stroke:#f08c1a; stroke-width:1; stroke-dasharray:4 4; pointer-events:none; }
.fpe-handle { fill:#ffffff; stroke:#1f77d0; stroke-width:2; }
.fpe-handle.nwse { cursor:nwse-resize; }
.fpe-handle.nesw { cursor:nesw-resize; }
.fpe-handle.ns { cursor:ns-resize; }
.fpe-handle.ew { cursor:ew-resize; }
.fpe-handle.dragging { fill:#1f77d0; }
.fpe-rotate-stem { stroke:#1f77d0; stroke-width:1.5; stroke-dasharray:3 3; pointer-events:none; }
.fpe-rotate-handle { fill:#ffffff; stroke:#1f77d0; stroke-width:2; cursor:grab; }
.fpe-rotate-handle.dragging { fill:#1f77d0; cursor:grabbing; }

/* Keyboard hint chips (sidebar tools + cheat sheet). */
.fpe-kbd { display:inline-block; min-width:1.4em; padding:1px 5px; margin-inline-start:4px; border:1px solid var(--fai-border); border-radius:4px; background:var(--fai-surface-2); font-family:var(--fai-font-mono); font-size:var(--fai-text-xs); text-align:center; color:var(--fai-ink-3); }

/* FAI-P07-06 — Fullscreen editing overlay: the editor covers the viewport (above the admin
   layout) and side panels collapse away, giving the whole screen to the canvas. Grid placement
   is pinned per region: with a panel hidden, auto-placement would otherwise drop the canvas
   into the first (collapsed 0px) track — measured as a 2px-wide canvas. The backdrop must be
   OPAQUE (--fai-canvas), otherwise the admin shell's sidebar/menus show through the overlay. */
.fpe.fs { position:fixed; inset:0; z-index:950; gap:6px; padding:8px 10px; background:var(--fai-canvas); overflow:hidden; }
.fpe.fs .fpe-toolbar { padding:6px 8px; }
.fpe.fs .fpe-layout { flex:1; min-height:0; }
.fpe.fs .fpe-tools { grid-column:1; }
.fpe.fs .fpe-canvas-wrap { grid-column:2; display:flex; flex-direction:column; min-height:0; padding:8px; }
.fpe.fs .fpe-properties { grid-column:3; }
.fpe.fs .fpe-canvas { flex:1; height:auto; min-height:0; }
.fpe.fs .fpe-legend { flex:none; padding-top:6px; }

/* Dialogs: exact-size resize + keyboard cheat sheet. */
.fpe-dialog-backdrop { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:#17212bb8; }
.fpe-dialog { display:flex; flex-direction:column; gap:12px; width:min(420px, 100%); padding:20px; border-radius:10px; background:var(--fai-surface); box-shadow:0 20px 60px #0005; }
.fpe-dialog h2, .fpe-dialog p { margin:0; }
.fpe-dialog label { display:flex; flex-direction:column; gap:5px; font-weight:600; }
.fpe-dialog input { padding:8px; border:1px solid var(--fai-border); border-radius:6px; }
.fpe-dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.fpe-dialog-actions button { padding:8px 12px; border:1px solid var(--fai-border); border-radius:6px; background:var(--fai-surface-2); cursor:pointer; }
.fpe-dialog-actions .add { border-color:var(--fai-accent); background:var(--fai-accent); color:white; }
.fpe-shortcuts { width:min(560px, 100%); max-height:80vh; overflow-y:auto; }
.fpe-shortcuts dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; }
.fpe-shortcuts dt { white-space:nowrap; }
.fpe-shortcuts dd { margin:0; font-size:var(--fai-text-sm); color:var(--fai-ink-2); }