/* Shared floor-plan look for the hotdesk SVG renderer (client/hotdesk/view.ts).
   Loaded by both /hotdesk (public) and /admin/hotdesk (editor) so the plan is
   pixel-identical everywhere.

   Palette: dusk-lit coworking floor — deep navy structure, sky-blue glazing and
   zones, warm-wood decking, apricot light and teal planting. Colours live here
   as tokens so the whole scene can be retuned in one place; view.ts only ever
   emits shapes and class names. */

.fp {
  display: block; width: 100%; height: auto; font-family: inherit;

  --navy-900: #14243d;   /* deepest structure: wall cores, monitors */
  --navy-700: #1e3a5f;   /* walls, chair frames */
  --navy-500: #2f5b9a;   /* secondary structure */
  --sky-400: #5b9bd5;    /* glazing, zone strokes */
  --sky-200: #a9d3f0;    /* glazing fill, soft accents */
  --sky-50: #e8f2fb;

  --wood-dark: #b5794a;  /* decking shadow / desk edge */
  --wood: #d6a06a;       /* desk tops */
  --wood-light: #e8c396;

  --peach: #f3a683;      /* dusk light, door swings */
  --peach-soft: #f9d6bd;
  --cream: #fbf3e9;      /* free/empty fills */

  --teal: #12897f;       /* planting */
  --teal-light: #2fb3a3;
  --teal-dark: #0c5f58;

  --ink: #14243d;        /* labels on light ground */
  --ink-soft: #5b7395;
}

/* Ground — a tiled photoreal concrete floor (see #fpFloorTex in view.ts). The
   CSS rule wins over the element's inline fill, so it has to name the pattern too. */
.fp-floor { fill: url(#fpFloorTex); }
.fp-edge { fill: none; stroke: var(--sky-400); stroke-width: 2.5; stroke-opacity: 0.42; }

/* Walls — round-capped navy segments */
.fp-wall { stroke: var(--navy-700); stroke-linecap: round; }
.fp-wall.sel { stroke: #4f46e5; filter: drop-shadow(0 0 5px rgba(79, 70, 229, 0.55)); }

/* Desks */
.fp-desk { filter: drop-shadow(0 3px 4px rgba(20, 36, 61, 0.22)); cursor: pointer; }
.fp-desk:hover { filter: drop-shadow(0 6px 9px rgba(20, 36, 61, 0.3)); }
.fp-top { fill: url(#fpWood); stroke: var(--wood-dark); stroke-width: 1.5; }
.fp-mon { fill: var(--navy-900); }
.fp-monscreen { fill: var(--sky-200); opacity: 0.9; }
.fp-monstand { fill: var(--navy-700); }
.fp-kbd { fill: #fff; opacity: 0.75; }
.fp-chair { fill: var(--c, var(--navy-500)); stroke: rgba(20, 36, 61, 0.25); stroke-width: 1; }
.fp-back { fill: none; stroke: var(--c, var(--navy-500)); stroke-width: 4; stroke-linecap: round; opacity: 0.65; }
.fp-arm { stroke: var(--c, var(--navy-500)); stroke-width: 2.4; stroke-linecap: round; opacity: 0.55; }
.fp-desk.free .fp-top { fill: var(--cream); stroke: #d9c6ad; stroke-dasharray: 5 4; }
.fp-desk.free .fp-mon { fill: #cdd8e4; }
.fp-desk.free .fp-monscreen { fill: #e4edf5; }
.fp-desk.free .fp-monstand { fill: #d3dce6; }
.fp-desk.free .fp-kbd { display: none; }
.fp-desk.free .fp-chair { fill: rgba(255, 255, 255, 0.6); stroke: #c3cddb; stroke-dasharray: 4 3; }
.fp-desk.free .fp-back, .fp-desk.free .fp-arm { display: none; }

/* Out of service: greyed out and hatched, so "blocked" never reads as "free" */
.fp-desk.blocked { filter: none; opacity: 0.72; }
.fp-desk.blocked .fp-top { fill: url(#fpBlocked); stroke: #a9a29a; stroke-dasharray: none; }
.fp-desk.blocked .fp-mon, .fp-desk.blocked .fp-monstand { fill: #b8b2aa; }
.fp-desk.blocked .fp-monscreen { fill: #d5d2cd; }
.fp-desk.blocked .fp-kbd { display: none; }
.fp-desk.blocked .fp-chair { fill: #d6d1ca; stroke: #a9a29a; stroke-dasharray: none; }
.fp-desk.blocked .fp-name { fill: #7d7770; font-weight: 600; }

.fp-name { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: rgba(255, 252, 244, 0.94); stroke-width: 2.8px; stroke-linejoin: round; }
.fp-desk.free .fp-name { fill: #9aa7b5; font-weight: 600; }
.fp-ini { font-size: 9.5px; font-weight: 800; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.fp-tag rect { fill: rgba(255, 255, 255, 0.94); stroke: var(--sky-200); stroke-width: 0.9; }
.fp-tag text { font-size: 7.5px; font-weight: 700; fill: var(--navy-500); text-anchor: middle; dominant-baseline: central;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Overlapping desks: flagged, never blocked */
.fp-desk.clash .fp-top { stroke: #dc2626; stroke-width: 2.4; stroke-dasharray: none; }
.fp-clash circle { fill: #dc2626; }
.fp-clash path { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.fp-clash .dot { fill: #fff; }

/* Booth — a bookable four-seat pod. Acoustic felt walls (the item's colour,
   textured by the fpFelt weave), an opening on one long side, a wooden table
   and four upholstered chairs. */
.fp-booth { cursor: grab; filter: drop-shadow(0 3px 7px rgba(20, 36, 61, 0.22)); }
.fp-booth .felt { fill: var(--c, #0f766e); stroke: rgba(12, 40, 38, 0.5); stroke-width: 1.6; }
.fp-booth .weave { stroke: none; pointer-events: none; }
.fp-booth .inside { fill: #f2ede4; stroke: rgba(12, 40, 38, 0.22); stroke-width: 1; }
/* The way in: the floor showing through the felt wall. */
.fp-booth .entry { fill: #f2ede4; }
.fp-booth .tbl .top { fill: url(#fpWood); stroke: var(--wood-dark); stroke-width: 1.3; }
.fp-booth .tbl .grain { stroke: var(--wood-dark); stroke-opacity: 0.35; stroke-width: 0.8; }
.fp-booth .chair .seat { fill: #4d5666; stroke: #2c3444; stroke-width: 1; }
.fp-booth .chair .back { fill: #2c3444; }
.fp-booth.sel .felt { stroke: #4f46e5; stroke-width: 2.6; }
.fp-booth.sel { filter: drop-shadow(0 4px 11px rgba(79, 70, 229, 0.55)); }
.fp-booth .ztag rect { fill: rgba(255, 255, 255, 0.93); stroke: rgba(12, 40, 38, 0.18); stroke-width: 0.8; }
.fp-booth .ztag text { fill: #0c3b38; font-size: 9.5px; font-weight: 800;
  text-anchor: middle; dominant-baseline: central; }

/* Blueprint underlay — an editor-only tracing aid */
.fp-bg { cursor: move; }
.fp-bg.locked { pointer-events: none; }
.fp-bg.sel { outline: 2px dashed #4f46e5; outline-offset: 0; }
.fp-hbg { fill: #fff; stroke: #4f46e5; stroke-width: 2.5; cursor: nwse-resize; touch-action: none; }

/* Rubber-band selection box (Shift-drag over the floor) */
.fp-band { fill: rgba(79,70,229,.12); stroke: #4f46e5; stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }

/* Selection + search states */
.fp-desk.sel { filter: drop-shadow(0 4px 10px rgba(79, 70, 229, 0.5)); }
.fp-desk.sel .fp-top { stroke: #4f46e5; stroke-width: 2.6; stroke-dasharray: none; }
.fp-desk.match { filter: drop-shadow(0 4px 9px rgba(22, 163, 74, 0.45)); }
.fp-desk.match .fp-top { stroke: #16a34a; stroke-width: 2.6; }
.fp-desk.dim { opacity: 0.22; }

/* ---------- Photoreal sprites (desks + free-standing scenery) ----------
   The <image> pieces carry their own light and shadow, so booking state lives in
   filters + overlays rather than fills. Clicks land on a transparent hit rect. */
.fp-sprite { pointer-events: none; }
.fp-desk .fp-sprite { transition: opacity .16s, filter .16s; }
.fp-desk.free .fp-sprite { opacity: 0.42; }               /* a free desk reads as ghosted */
.fp-desk.blocked .fp-sprite { filter: grayscale(0.92); }
.fp-desk.sel .fp-sprite { filter: drop-shadow(0 4px 11px rgba(79, 70, 229, 0.6)); }
.fp-desk.match .fp-sprite { filter: drop-shadow(0 4px 10px rgba(22, 163, 74, 0.55)); }
/* A coloured avatar on the seat says who sits here — the photo's chair can't tint. */
.fp-avdisc { fill: var(--c, #64748b); stroke: #fff; stroke-width: 1.4; paint-order: stroke;
  filter: drop-shadow(0 1px 1.5px rgba(20, 36, 61, 0.35)); }

/* ---------- Meeting rooms (salki) ----------
   A walled space filled by clicking it in the editor: its polygon, tinted with
   the room's own colour, with a name/capacity tag at the centre. */
.fp-salka .sfill { fill: var(--c, #4f8ff0); fill-opacity: 0.13; stroke: var(--c, #4f8ff0);
  stroke-opacity: 0.62; stroke-width: 2; stroke-linejoin: round; }
.fp-salka.sel .sfill { stroke: #4f46e5; stroke-opacity: 0.95; stroke-width: 2.6; }
.fp-salka .stag rect { fill: rgba(255, 255, 255, 0.92); }
.fp-salka .stag text { fill: var(--c, #2f6fd0); font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  text-anchor: middle; dominant-baseline: central; }
.fp--dark .fp-salka .sfill { fill: var(--c, #4f8ff0); fill-opacity: 0.17; stroke-opacity: 0.72; }
/* In the editor a room is clickable to select it (then edited in the inspector);
   everywhere else it is decorative and must never intercept a tap meant for the
   floor or a desk. */
.fp-salka { pointer-events: none; }
.fp--edit .fp-salka { pointer-events: auto; cursor: pointer; }
.fp--edit .fp-salka:hover .sfill { fill-opacity: 0.2; }

/* Zones — glazed areas, sky blue like the windows */
.fp-room .z { fill: var(--c, var(--sky-400)); fill-opacity: 0.1; stroke: var(--c, var(--sky-400)); stroke-opacity: 0.6;
  stroke-width: 2; stroke-dasharray: 9 6; }
.fp-room.sel .z { stroke: #4f46e5; stroke-opacity: 0.95; }
.fp-room .ztag rect { fill: rgba(255, 255, 255, 0.88); }
.fp-room .ztag text { fill: var(--c, var(--navy-500)); font-size: 10px; font-weight: 800; letter-spacing: 0.03em;
  text-anchor: middle; dominant-baseline: central; }

/* Plants — potted, teal foliage seen from above */
.fp-plant { filter: drop-shadow(0 2.5px 3px rgba(12, 60, 60, 0.28)); }
.fp-plant .pot { fill: var(--wood-dark); stroke: #8d5a33; stroke-width: 1.2; }
.fp-plant .soil { fill: #6b4a30; }
.fp-plant .leaf { opacity: 0.96; stroke: rgba(8, 60, 56, 0.22); stroke-width: 0.8; }
.fp-plant .leaf.l0 { fill: var(--teal-light); }
.fp-plant .leaf.l1 { fill: var(--teal); }
.fp-plant .leaf.l2 { fill: var(--teal-dark); }
.fp-plant .core { fill: var(--teal-dark); }

/* Text labels */
.fp-label .ltx { fill: var(--c, var(--navy-500)); font-weight: 800; letter-spacing: 0.02em;
  text-anchor: middle; dominant-baseline: central; }
.fp-label .hit { fill: transparent; }

/* Doors & windows — apricot swing against navy jambs, glazing in sky blue */
.fp-door .gap { fill: #f7efe3; }
.fp-door .jamb { fill: var(--navy-700); }
.fp-door .arc { fill: none; stroke: var(--peach); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: 0.8; }
.fp-door .leaf { stroke: var(--peach); stroke-width: 2.8; stroke-linecap: round; }
.fp-window .wbase { fill: var(--sky-50); stroke: var(--sky-400); stroke-width: 1.2; }
.fp-window .wline { stroke: var(--sky-400); stroke-width: 1.6; }
.fp-window .wglow { fill: var(--sky-200); opacity: 0.55; }
.fp-item.sel { filter: drop-shadow(0 0 6px rgba(79, 70, 229, 0.55)); }

/* Editor affordances (admin only — .fp--edit / .fp--modeon set by the editor) */
.fp--edit .fp-desk, .fp--edit .fp-item, .fp--edit .fp-wall { cursor: grab; touch-action: none; }
.fp--edit .fp-desk:active, .fp--edit .fp-item:active, .fp--edit .fp-wall:active { cursor: grabbing; }
.fp--modeon { cursor: crosshair; touch-action: none; }
.fp--modeon .fp-desk, .fp--modeon .fp-item, .fp--modeon .fp-wall { pointer-events: none; }
.fp-hend { fill: #fff; stroke: #4f46e5; stroke-width: 2.5; cursor: grab; touch-action: none; }
.fp-hend:active { cursor: grabbing; }
.fp-hrz { fill: #4f46e5; stroke: #fff; stroke-width: 2; cursor: nwse-resize; touch-action: none; }
.fp-hprev { stroke: rgba(79, 70, 229, 0.4); stroke-linecap: round; stroke-dasharray: 6 6; pointer-events: none; }

/* Navigation ("hand") tool: the whole plan goes pointer-through, so any drag
   pans the view instead of grabbing an object. Clicks never select here. */
.fp--pan { cursor: grab; }
.fp--pan:active { cursor: grabbing; }
.fp--pan .fp-desk, .fp--pan .fp-item, .fp--pan .fp-wall, .fp--pan .fp-hit,
.fp--pan .fp-hend, .fp--pan .fp-hrz, .fp--pan .fp-bg, .fp--pan .fp-salka { pointer-events: none; }

/* Salka tool: crosshair + objects pointer-through, so a click always lands on
   the floor to flood the enclosed room under it. */
.fp--salka { cursor: crosshair; }
.fp--salka .fp-desk, .fp--salka .fp-item, .fp--salka .fp-wall, .fp--salka .fp-hit,
.fp--salka .fp-salka, .fp--salka .fp-bg { pointer-events: none; }

/* Empty-plan message overlays the stage (stage must be position:relative) */
.fp-emptymsg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8fa2b8; font-size: 13.5px; text-align: center; padding: 30px; pointer-events: none; }


/* ---------- Dark canvas variant (public viewer) ----------
   Same geometry, retuned for a near-black stage: the floor becomes a light
   model surface, walls go heavy and dark, zones keep their identity colour.
   Only paint changes here — no shape or layout rules — so the editor and the
   viewer stay pixel-compatible. */
.fp--dark .fp-floor { fill: url(#fpFloorTex); }
.fp--dark .fp-edge { stroke: #3a3f47; stroke-opacity: 1; stroke-width: 3; }
.fp--dark .fp-wall { stroke: #23262c; }

.fp--dark .fp-top { fill: #fdfdfd; stroke: #c9ccd2; }
.fp--dark .fp-mon { fill: #16181c; }
.fp--dark .fp-monscreen { fill: #3b4048; opacity: 1; }
.fp--dark .fp-monstand { fill: #2a2e35; }
.fp--dark .fp-kbd { fill: #16181c; opacity: .55; }
.fp--dark .fp-chair { fill: var(--c, #3c424c); stroke: #23262c; }
.fp--dark .fp-back { stroke: var(--c, #3c424c); opacity: .9; }
.fp--dark .fp-arm { stroke: var(--c, #3c424c); opacity: .8; }
.fp--dark .fp-desk { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); }
.fp--dark .fp-desk.free .fp-top { fill: #f4f5f6; stroke: #cfd3d8; }
.fp--dark .fp-desk.free .fp-chair { fill: #d5d8dd; stroke: #b3b8c0; }
.fp--dark .fp-name { fill: #20232a; stroke: rgba(255, 255, 255, .9); }
.fp--dark .fp-desk.free .fp-name { fill: #8c939d; }
.fp--dark .fp-tag rect { fill: #20232a; stroke: #3a3f47; }
.fp--dark .fp-tag text { fill: #cfd4dc; }

/* Zones keep the reference's category colours, on a light ground */
.fp--dark .fp-room .z { fill: var(--c, #4f8ff0); fill-opacity: .17; stroke: var(--c, #4f8ff0);
  stroke-opacity: .75; stroke-dasharray: none; stroke-width: 2; }
.fp--dark .fp-room .ztag rect { fill: rgba(255, 255, 255, .92); }
.fp--dark .fp-room .ztag text { fill: var(--c, #2f6fd0); letter-spacing: .06em; }

.fp--dark .fp-booth .felt { stroke: rgba(0, 0, 0, .55); }
.fp--dark .fp-booth .inside { fill: #2a2e36; stroke: rgba(0, 0, 0, .5); }
.fp--dark .fp-booth .entry { fill: #2a2e36; }
.fp--dark .fp-booth .tbl .top { fill: #efe6d6; stroke: #c9b28a; }
.fp--dark .fp-booth .tbl .grain { stroke: #c9b28a; }
.fp--dark .fp-booth .chair .seat { fill: #3a3f4c; stroke: #1c212b; }
.fp--dark .fp-booth .chair .back { fill: #1c212b; }
.fp--dark .fp-booth .ztag rect { fill: rgba(20, 23, 28, .92); stroke: rgba(255, 255, 255, .16); }
.fp--dark .fp-booth .ztag text { fill: #e8ecf2; }

.fp--dark .fp-plant .pot { fill: #6c5136; stroke: #4a381f; }
.fp--dark .fp-plant .soil { fill: #3f3020; }
.fp--dark .fp-plant .leaf.l0 { fill: #5cbf5a; }
.fp--dark .fp-plant .leaf.l1 { fill: #3f9f45; }
.fp--dark .fp-plant .leaf.l2 { fill: #2c7a35; }
.fp--dark .fp-plant .core { fill: #24632c; }

.fp--dark .fp-door .gap { fill: #e9eaec; }
.fp--dark .fp-door .jamb { fill: #23262c; }
.fp--dark .fp-door .arc, .fp--dark .fp-door .leaf { stroke: #c98f4a; }
.fp--dark .fp-window .wbase { fill: #cfe4f5; stroke: #7fb0d8; }
.fp--dark .fp-window .wline { stroke: #7fb0d8; }
.fp--dark .fp-window .wglow { fill: #9ec8e8; opacity: .35; }
.fp--dark .fp-label .ltx { fill: var(--c, #20232a); }
.fp--dark .fp-emptymsg { color: #9aa2ad; }

/* ---------- Furniture ----------
   Top-down scenery in the reference's language: pale timber tops, charcoal
   seating, timber planters, soft-grey upholstery, porcelain-white fixtures. */
.fp-table .ttop { fill: url(#fpWood); stroke: #b0854f; stroke-width: 1.4; }
.fp-table .tgrain { stroke: rgba(140, 96, 48, .28); stroke-width: 1; }
.fp-table.sel .ttop { stroke: #4f46e5; stroke-width: 2.4; }
.fchair .pad { fill: #3b3f46; stroke: #23262c; stroke-width: 1; }
.fchair .rest { fill: #2a2e34; }

.fp-planter .box { fill: #b98b52; stroke: #8d6636; stroke-width: 1.4; }
.fp-planter .soil { fill: #4a3a26; }
.fp-planter .leaf { opacity: .95; }
.fp-planter .leaf.l0 { fill: #5cbf5a; }
.fp-planter .leaf.l1 { fill: #3f9f45; }
.fp-planter .leaf.l2 { fill: #2c7a35; }
.fp-planter.sel .box { stroke: #4f46e5; stroke-width: 2.4; }

.fp-sofa .body { fill: var(--c, #9aa0a8); fill-opacity: .5; stroke: #7d838c; stroke-width: 1.3; }
.fp-sofa .back { fill: var(--c, #9aa0a8); fill-opacity: .85; }
.fp-sofa .pad { fill: #ffffff; fill-opacity: .55; stroke: rgba(80, 86, 95, .3); stroke-width: .9; }
.fp-sofa.sel .body { stroke: #4f46e5; stroke-width: 2.4; }

.fp-fixture .unit, .fp-fixture .cistern { fill: #f2f4f7; stroke: #c3c9d2; stroke-width: 1.2; }
.fp-fixture .bowl, .fp-fixture .basin { fill: #ffffff; stroke: #c3c9d2; stroke-width: 1.2; }
.fp-fixture .seat { fill: none; stroke: #c3c9d2; stroke-width: 1.1; }
.fp-fixture .tap { fill: #8d949e; }
.fp-fixture .seam { stroke: #d3d8df; stroke-width: 1; }
.fp-fixture .hob { fill: none; stroke: #6f757f; stroke-width: 1.3; }
.fp-fixture.sel .unit, .fp-fixture.sel .cistern { stroke: #4f46e5; stroke-width: 2.2; }

/* Dark canvas tuning for the same pieces */
.fp--dark .fp-table .ttop { fill: #e6cfa8; stroke: #bb9256; }
.fp--dark .fp-sofa .body { fill: #b9bec6; fill-opacity: .7; stroke: #8d939c; }
.fp--dark .fp-sofa .back { fill: #9aa0a8; fill-opacity: .95; }
.fp--dark .fp-planter .box { fill: #a97e49; stroke: #7d5a30; }