/* Floor-plan editor styles. The editor's SVG emits CSS classes only, so every
   colour is inherited from the variables below and a [data-theme] switch
   repaints without re-rendering the SVG. */

/* design tokens (light) */
:root {
    /* Bases ride the hive semantic tokens (hive-tokens.css); fallbacks
       keep the editor usable if that file ever fails to load. */
    --fp-canvas-bg:        var(--bg-surface-sunken, #f8fafc);
    --fp-sidebar-bg:       var(--bg-surface, #ffffff);
    --fp-border:           var(--border-color, #dee2e6);
    --fp-text:             var(--text-primary, #1f2937);
    --fp-text-muted:       var(--text-muted, #6b7280);

    --fp-grid-fine:        rgba(148, 163, 184, 0.10);
    --fp-grid-minor:       rgba(148, 163, 184, 0.18);
    --fp-grid-major:       rgba(148, 163, 184, 0.40);
    --fp-axis:             rgba(99, 102, 241, 0.28);

    --fp-contour:          #ef4444;
    --fp-cold:             #3b82f6;
    --fp-cold-label:       rgba(37, 99, 235, 0.85);
    --fp-thermo:           #16a34a;

    --fp-room-fill:        rgba(99, 102, 241, 0.08);
    --fp-room-stroke:      #6366f1;
    --fp-room-label:       #475569;

    --fp-wall-external:    #dc2626;
    --fp-wall-party:       #a855f7;
    --fp-wall-internal:    #94a3b8;
    --fp-wall-unknown:     #cbd5e1;

    --fp-window:           #38bdf8;
    --fp-door:             #f59e0b;

    --fp-radiator-fill:    #ef4444;
    --fp-radiator-stroke:  #7f1d1d;
    --fp-radiator-label:   #7f1d1d;

    --fp-sensor-fill:      #22c55e;
    --fp-sensor-stroke:    #14532d;
    --fp-sensor-primary:   #ffffff;

    --fp-contact-fill:     #a78bfa;
    --fp-contact-stroke:   #5b21b6;

    --fp-selection:        #fbbf24;
    --fp-selection-stroke: #92400e;

    --fp-compass-needle:   #dc2626;
    --fp-compass-tail:     #94a3b8;
    --fp-compass-ring:     #94a3b8;
    --fp-compass-text:     #64748b;

    --fp-preview-stroke:   #475569;
    --fp-overlay-text:     #475569;
    --fp-sun-stroke:       rgba(245, 158, 11, 0.7);
}

/* design tokens (dark) */
[data-theme="dark"] {
    --fp-canvas-bg:        var(--night, #0b1620);
    --fp-sidebar-bg:       var(--comb, #101e2b);
    --fp-border:           var(--line, #1e3346);
    --fp-text:             var(--wax, #eaf2f4);
    --fp-text-muted:       var(--muted, #7e97a8);

    --fp-grid-fine:        rgba(148, 163, 184, 0.06);
    --fp-grid-minor:       rgba(148, 163, 184, 0.10);
    --fp-grid-major:       rgba(148, 163, 184, 0.22);
    --fp-axis:             rgba(129, 140, 248, 0.35);

    --fp-contour:          #f87171;
    --fp-cold:             #60a5fa;
    --fp-cold-label:       rgba(147, 197, 253, 0.95);
    --fp-thermo:           #4ade80;

    --fp-room-fill:        rgba(129, 140, 248, 0.10);
    --fp-room-stroke:      #818cf8;
    --fp-room-label:       #cbd5e1;

    --fp-wall-external:    #f87171;
    --fp-wall-party:       #c084fc;
    --fp-wall-internal:    #94a3b8;
    --fp-wall-unknown:     #475569;

    --fp-window:           #38bdf8;
    --fp-door:             #fbbf24;

    --fp-radiator-fill:    #f87171;
    --fp-radiator-stroke:  #fca5a5;
    --fp-radiator-label:   #fca5a5;

    --fp-sensor-fill:      #4ade80;
    --fp-sensor-stroke:    #bbf7d0;
    --fp-sensor-primary:   #0f172a;

    --fp-contact-fill:     #c4b5fd;
    --fp-contact-stroke:   #ddd6fe;

    --fp-selection:        var(--honey, #f2a93b);
    --fp-selection-stroke: #fde68a;

    --fp-compass-needle:   #f87171;
    --fp-compass-tail:     #475569;
    --fp-compass-ring:     #475569;
    --fp-compass-text:     #94a3b8;

    --fp-preview-stroke:   #cbd5e1;
    --fp-overlay-text:     #cbd5e1;
    --fp-sun-stroke:       rgba(251, 191, 36, 0.7);
}

/* modal chrome */
#floorPlanModal .modal-content {
    background: var(--fp-sidebar-bg);
    color: var(--fp-text);
}

#floorPlanModal #fpSidebar,
#floorPlanModal #fpProps {
    background: var(--fp-sidebar-bg);
    color: var(--fp-text);
    border-color: var(--fp-border) !important;
}

#floorPlanModal #fpCanvasWrap {
    background: var(--fp-canvas-bg);
}

/* Prevent the browser intercepting touch gestures on the canvas so our
   touch handlers (pan, pinch-zoom, tap) receive every event. */
#fpCanvas {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#floorPlanModal #fpSidebar .text-muted,
#floorPlanModal #fpProps .text-muted,
#floorPlanModal #fpStatus,
#floorPlanModal #fpSaveStatus,
#floorPlanModal .form-text {
    color: var(--fp-text-muted) !important;
}

#fpToolbar .btn.active {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}

#fpCompass { user-select: none; }
#fpCompass svg { cursor: grab; }
#fpCompass svg:active { cursor: grabbing; }

#fpImageOpacity { width: 100%; }
#fpImageFile { font-size: 0.85rem; }

#fpLevelList .list-group-item.active {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}

#fpSaveStatus,
#fpStatus { min-height: 1.1em; }

/* Dark-mode chrome overrides for elements not driven by --fp- vars */
[data-theme="dark"] #floorPlanModal .modal-header,
[data-theme="dark"] #floorPlanModal .modal-footer {
    background: var(--fp-sidebar-bg);
    border-color: var(--fp-border);
}

[data-theme="dark"] #floorPlanModal .form-control,
[data-theme="dark"] #floorPlanModal .form-select {
    background-color: #0f172a;
    color: var(--fp-text);
    border-color: var(--fp-border);
}

[data-theme="dark"] #floorPlanModal .form-control::placeholder {
    color: var(--fp-text-muted);
}

[data-theme="dark"] #floorPlanModal .btn-outline-primary,
[data-theme="dark"] #floorPlanModal .btn-outline-secondary,
[data-theme="dark"] #floorPlanModal .btn-outline-info,
[data-theme="dark"] #floorPlanModal .btn-outline-warning,
[data-theme="dark"] #floorPlanModal .btn-outline-danger {
    color: var(--fp-text);
    border-color: var(--fp-border);
}

[data-theme="dark"] #floorPlanModal .btn-outline-primary:hover,
[data-theme="dark"] #floorPlanModal .btn-outline-secondary:hover,
[data-theme="dark"] #floorPlanModal .btn-outline-info:hover,
[data-theme="dark"] #floorPlanModal .btn-outline-warning:hover,
[data-theme="dark"] #floorPlanModal .btn-outline-danger:hover {
    background-color: var(--fp-border);
    border-color: var(--fp-text-muted);
    color: #fff;
}

[data-theme="dark"] #floorPlanModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] #fpLevelList .list-group-item {
    background-color: transparent;
    color: var(--fp-text);
    border-color: var(--fp-border);
}

[data-theme="dark"] #fpToolbar .btn.active {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* canvas HUD */

#fpScaleBar,
#fpLegend {
    position: absolute;
    bottom: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--fp-sidebar-bg) 84%, transparent);
    backdrop-filter: blur(4px);
    border: 1px solid var(--fp-border);
    font-size: 0.74rem;
    color: var(--fp-text-muted);
    pointer-events: none;
    user-select: none;
    z-index: 2;
}
#fpScaleBar {
    left: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#fpScaleBarRule {
    display: inline-block;
    height: 6px;
    border: 1.5px solid currentColor;
    border-top: none;
    transition: width 80ms linear;
}
#fpLegend {
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--fp-text);
}
.fp-legend-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fp-legend-ramp {
    width: 44px; height: 10px; border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(251, 191, 36, 0.15), rgba(249, 115, 22, 0.55), rgba(239, 68, 68, 0.85));
}
.fp-legend-swatch { width: 14px; height: 14px; border-radius: 3px; }
.fp-legend-swatch-cold { background: rgba(59, 130, 246, 0.45); }
.fp-legend-line { width: 26px; height: 0; }
.fp-legend-line-contour { border-top: 2px solid var(--fp-contour); opacity: 0.75; }
.fp-legend-line-cold { border-top: 2px dashed var(--fp-cold); }
.fp-legend-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe8, #f59e0b);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

/* SVG features */

.fp-grid-line-fine  { stroke: var(--fp-grid-fine); }
.fp-grid-line-minor { stroke: var(--fp-grid-minor); }
.fp-grid-line-major { stroke: var(--fp-grid-major); }
.fp-axis            { stroke: var(--fp-axis); stroke-width: 1px; }

.fp-compass-ring   { stroke: var(--fp-compass-ring); }
.fp-compass-label  { fill: var(--fp-compass-text); }
.fp-compass-needle { fill: var(--fp-compass-needle); }
.fp-compass-tail   { fill: var(--fp-compass-tail); }

.fp-room {
    fill: var(--fp-room-fill);
    stroke: var(--fp-room-stroke);
}
.fp-room-label { fill: var(--fp-room-label); }

.fp-wall { fill: none; }
.fp-wall-external { stroke: var(--fp-wall-external); }
.fp-wall-party    { stroke: var(--fp-wall-party); }
.fp-wall-internal { stroke: var(--fp-wall-internal); }
.fp-wall-unknown  { stroke: var(--fp-wall-unknown); }

.fp-opening { fill: none; }
.fp-opening-window { stroke: var(--fp-window); }
.fp-opening-door   { stroke: var(--fp-door); }

.fp-door-pivot { fill: var(--fp-door); }

.fp-radiator {
    fill: var(--fp-radiator-fill);
    stroke: var(--fp-radiator-stroke);
}
.fp-radiator-label { fill: var(--fp-radiator-label); }

.fp-sensor {
    fill: var(--fp-sensor-fill);
    stroke: var(--fp-sensor-stroke);
}
.fp-sensor-primary-dot { fill: var(--fp-sensor-primary); }

.fp-contact {
    fill: var(--fp-contact-fill);
    stroke: var(--fp-contact-stroke);
}

/* Selection — overrides the per-shape stroke for any selected element */
.fp-selected {
    stroke: var(--fp-selection) !important;
}

/* Drawing previews */
.fp-preview { fill: none; stroke: var(--fp-preview-stroke); }
.fp-ortho-guide {
    stroke: var(--fp-axis);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 0.30 0.20;
    opacity: 0.9;
}
.fp-preview-wall   { stroke: var(--fp-preview-stroke); }
.fp-preview-window { stroke: var(--fp-window); }
.fp-preview-door   { stroke: var(--fp-door); }
.fp-preview-label  { fill: var(--fp-overlay-text); }

.fp-preview-room {
    fill: var(--fp-room-fill);
    stroke: var(--fp-room-stroke);
}
.fp-preview-vertex { fill: var(--fp-room-stroke); }

/* Endpoint drag handle on a selected wall (Drop A) */
.fp-wall-handle {
    fill: var(--fp-selection);
    stroke: var(--fp-selection-stroke);
    opacity: 0.85;
}
.fp-wall-handle:hover {
    opacity: 1.0;
    fill: var(--fp-selection-stroke);
}

/* Slide handle on a selected wall-mounted radiator (Drop B.2). Visually
   distinct from the wall vertex handles — slightly larger and uses the
   radiator stroke colour so the user can tell them apart at a glance. */
.fp-rad-handle {
    fill: var(--fp-radiator-stroke, #c2410c);
    stroke: var(--fp-selection-stroke);
    opacity: 0.85;
}
.fp-rad-handle:hover {
    opacity: 1.0;
}

/* Calibration marker */
.fp-calibration-marker {
    fill: var(--fp-selection);
    stroke: var(--fp-selection-stroke);
}

/* Thermal overlay — isotherm contours (crisp hairlines at any zoom) and
   thermostat rings with live readings */
.fp-contour {
    fill: none;
    stroke: var(--fp-contour);
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.fp-thermo-ring {
    fill: none;
    stroke: rgba(34, 197, 94, 0.55);
    stroke-width: 0.045;
    stroke-dasharray: 0.12 0.08;
    transform-box: fill-box;
    transform-origin: center;
    animation: fpRingSpin 16s linear infinite;
}
.fp-thermo-core {
    fill: rgba(34, 197, 94, 0.14);
    stroke: rgba(34, 197, 94, 0.40);
    stroke-width: 0.03;
}
.fp-thermo-temp {
    fill: var(--fp-thermo);
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--fp-canvas-bg);
    stroke-width: 0.05;
}

/* Cold zones */
.fp-cold-noheat { fill: rgba(59, 130, 246, 0.20); }
.fp-cold-boundary {
    fill: none;
    stroke: var(--fp-cold);
    stroke-width: 1.4px;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 0.22 0.12;
    stroke-linejoin: round;
    opacity: 0.85;
}
.fp-cold-label {
    fill: var(--fp-cold-label);
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--fp-canvas-bg);
    stroke-width: 0.04;
}

/* Sun path */
.fp-sun-path       { stroke: var(--fp-sun-stroke); fill: none; }
.fp-sun-path-glow  { stroke: var(--fp-sun-stroke); fill: none; opacity: 0.45; }
.fp-sun-endpoint   { fill: var(--fp-sun-stroke); }
.fp-sun-marker     { fill: var(--fp-sun-stroke); stroke: var(--fp-canvas-bg); }
.fp-sun-marker-ring { stroke: var(--fp-sun-stroke); }
.fp-sun-label      { fill: var(--fp-sun-stroke); font-family: inherit; }
.fp-sun-tick       { stroke: var(--fp-sun-stroke); }
.fp-sun-hour {
    fill: var(--fp-sun-stroke);
    paint-order: stroke;
    stroke: var(--fp-canvas-bg);
    stroke-width: 0.04;
}
.fp-north-mark     { fill: var(--fp-compass-needle); }
.fp-solar-badge {
    fill: var(--fp-sun-stroke);
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--fp-canvas-bg);
    stroke-width: 0.045;
}
.fp-solar-badge-measured { fill: #16a34a; }
[data-theme="dark"] .fp-solar-badge-measured { fill: #4ade80; }
.fp-overheat-badge {
    fill: #dc2626;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--fp-canvas-bg);
    stroke-width: 0.05;
    animation: fpOverheatBlink 1.8s ease-in-out infinite alternate;
}
[data-theme="dark"] .fp-overheat-badge { fill: #f87171; }
@keyframes fpOverheatBlink {
    from { opacity: 1; }
    to   { opacity: 0.45; }
}
.fp-solar-row {
    padding: 4px 0;
    border-bottom: 1px solid var(--fp-border);
}
.fp-solar-row:last-child { border-bottom: none; }
.fp-solar-measured { color: #16a34a; }
[data-theme="dark"] .fp-solar-measured { color: #4ade80; }
.fp-sun-beam {
    animation: fpBeamBreathe 3.4s ease-in-out infinite alternate;
}
.fp-sun-particle {
    fill: #fcd34d;
    opacity: 0;
    animation-name: fpParticleFlow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.fp-sun-pulse {
    fill: none;
    stroke: rgba(251, 191, 36, 0.8);
    stroke-width: 0.03;
    transform-box: fill-box;
    transform-origin: center;
    animation: fpSunPulse 2.4s ease-out infinite;
}

@keyframes fpSunPulse {
    from { transform: scale(0.55); opacity: 0.9; }
    to   { transform: scale(1.7);  opacity: 0; }
}
@keyframes fpBeamBreathe {
    from { opacity: 0.65; }
    to   { opacity: 1; }
}
@keyframes fpParticleFlow {
    0%   { transform: translate(0.25px, 0) scale(0.8); opacity: 0; }
    12%  { opacity: 0.9; }
    75%  { opacity: 0.45; }
    100% { transform: translate(var(--fp-d), var(--fp-cy)) scale(1.6); opacity: 0; }
}
@keyframes fpRingSpin {
    to { transform: rotate(360deg); }
}

/* Background image: faint frame in dark mode so a fully-white plan doesn't
   read as a hole in the canvas. Drawn as a real SVG rect with a non-scaling
   stroke — a CSS outline here would be scaled by the scene transform and
   render as giant dashes (metre-wide "black squares") around every image. */
.fp-bg-frame {
    fill: none;
    stroke: none;
}
[data-theme="dark"] .fp-bg-frame {
    stroke: var(--fp-border);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 0.12 0.08;
}

/* Mobile: the desktop rails (240px + 300px) are wider than a phone viewport,
   leaving the canvas no room, so below 768px they become off-canvas drawers
   toggled by floor-plan.js. See docs/structure.md. */
@media (max-width: 767.98px) {
    #floorPlanModal .modal-body {
        position: relative;
    }

    #fpSidebar,
    #fpProps {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 15;
        background: var(--fp-sidebar-bg);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
        transition: transform 0.2s ease;
    }

    #fpSidebar {
        left: 0;
        width: 84vw;
        max-width: 280px;
        min-width: 0;
        transform: translateX(-100%);
    }

    #fpProps {
        right: 0;
        width: 84vw;
        max-width: 320px;
        min-width: 0;
        transform: translateX(100%);
    }

    #floorPlanModal.fp-sidebar-open #fpSidebar,
    #floorPlanModal.fp-props-open #fpProps {
        transform: translateX(0);
    }

    #fpCanvasWrap {
        width: 100%;
    }

    /* Dim + swallow taps on the canvas while a drawer is open, so the first
       tap closes the drawer instead of also placing a wall/room vertex
       underneath it. Real element (not the canvas itself) — floor-plan.js
       closes the drawer on click via #fpCanvasWrap, which sits under this. */
    #floorPlanModal.fp-sidebar-open #fpCanvasWrap::after,
    #floorPlanModal.fp-props-open #fpCanvasWrap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.25);
        z-index: 10;
    }

    /* Bigger touch targets throughout the drawers. */
    #fpToolbar .btn,
    #fpAddLevel,
    #fpAddCircuit,
    #fpZoomOut, #fpZoomFit, #fpZoomIn,
    #fpLevelList .list-group-item {
        min-height: 40px;
    }

    #fpSnapStep, #fpAngleStep, #fpThermalMode, #fpHeatFlux {
        min-height: 34px;
    }
}

/* REDUCED MOTION — every looping overlay animates from a visible resting state,
   so stopping them leaves all readings legible. The motion was only emphasis. */
@media (prefers-reduced-motion: reduce) {
    .fp-thermo-ring,
    .fp-overheat-badge,
    .fp-sun-beam,
    .fp-sun-particle,
    .fp-sun-pulse {
        animation: none;
    }
}