/* Box24-7 floor plan v3 — stiliseret arkitekt-plan med 2.5D-dybde.
   Bruger temaets design-tokens med fallbacks så den også står pænt uden for
   child-temaet. Statusfarver fyldes via SVG-gradienter (defs i markup). */
.b247fp {
    --fp-vacant:      var(--color-vacant, #4A9B6F);
    --fp-vacant-dk:   #2F6645;
    --fp-occupied:    var(--color-secondary, #C17F6B);
    --fp-occupied-dk: #9A4F3A;
    --fp-notice:      #E0A93B; /* gul — snart ledig (under opsigelse) */
    --fp-notice-dk:   #8A5E0A;
    --fp-reserved:    #7E8CA0; /* blågrå — reserveret (48t-hold) */
    --fp-reserved-dk: #46536A;
    --fp-maint:       #8F8A81; /* grå — vedligehold/ikke tilgængelig */
    --fp-maint-dk:    #5C574E;
    --fp-text:        var(--color-text, #1E1E1E);
    --fp-muted:       var(--color-text-muted, #6B6B6B);
    --fp-border:      var(--color-border, #E0DDD6);
    --fp-bg:          var(--color-bg, #F8F6F1);
    --fp-surface:     var(--color-surface, #FFFFFF);
    --fp-wall:        #4E463D; /* vægge — varm mørk brun-grå */
    --fp-corridor:    #F1EEE8; /* korridor/indvendig flade */
    --fp-radius:      20px;

    display: flex;
    flex-direction: column;
    max-width: 1040px;
    margin-inline: auto;
}

/* Visuelt skjult, men tilgængelig for skærmlæsere (live-region m.m.). */
.b247fp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.b247fp__noscript {
    text-align: center;
    color: var(--fp-muted);
    margin: 0 0 14px;
}

/* ── Status-chips: live tal + filter ─────────────────────────── */
.b247fp__chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 20px;
}
.b247fp__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    min-height: 44px; /* touch-target */
    border: 1.5px solid var(--fp-border);
    border-radius: 100px;
    background: var(--fp-surface);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(31,38,51,.05);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
.b247fp__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31,38,51,.10);
}
/* Kraftig, synlig fokus-ring (WCAG 2.4.7 / 1.4.11 — ingen svage glows). */
.b247fp__chip:focus-visible {
    outline: 3px solid var(--fp-text);
    outline-offset: 2px;
}
.b247fp__chip[aria-pressed="true"] { border-width: 2px; }
.b247fp__chip--vacant[aria-pressed="true"]   { border-color: var(--fp-vacant);   background: #E6F4EC; color: var(--fp-vacant-dk); }
.b247fp__chip--notice[aria-pressed="true"]   { border-color: var(--fp-notice);   background: #FBF1DC; color: var(--fp-notice-dk); }
.b247fp__chip--occupied[aria-pressed="true"] { border-color: var(--fp-occupied); background: #FAF0EE; color: var(--fp-occupied-dk); }
.b247fp__chip-count { font-weight: 800; font-variant-numeric: tabular-nums; }

.b247fp__sw { width: 13px; height: 13px; border-radius: 4px; display: inline-block; background: #C9C4BA; flex: none; }
.b247fp__sw--vacant      { background: var(--fp-vacant); }
.b247fp__sw--notice      { background: var(--fp-notice); }
.b247fp__sw--occupied    { background: var(--fp-occupied); }
.b247fp__sw--reserved    { background: var(--fp-reserved); }
.b247fp__sw--maintenance { background: var(--fp-maint); }

/* ── Scene ───────────────────────────────────────────────────── */
.b247fp__stage {
    position: relative; /* forankrer tooltip */
    background:
        radial-gradient(120% 90% at 50% 0%, #FDFCFA 0%, var(--fp-bg) 68%),
        linear-gradient(160deg, #FCFBF8 0%, var(--fp-bg) 100%);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: clamp(12px, 3vw, 30px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 1px 3px rgba(31,38,51,.05),
        0 16px 44px rgba(31,38,51,.08);
    overflow: hidden; /* glans + tooltip bliver inden for rammen */
}
.b247fp__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* ── Bygningens dybde (2.5D) ─────────────────────────────────── */
/* Grundskygge: blurret aftryk af skallen — bygningen "står" på fladen. */
.b247fp__ground { fill: #3A342C; opacity: .16; }
/* Ekstruderet sokkel: mørk kopi forskudt ned = synlig murhøjde. */
.b247fp__extrude { fill: #3B342B; opacity: .9; }

/* Ydervæg med synlig tykkelse: samme kontur tegnet to gange. Den nederste får
   en tyk mørk stroke (murens ydre tykkelse), den øverste fylder med
   korridorfarven så kun stroken stikker ud som mur. */
.b247fp__shell-wall {
    fill: var(--fp-corridor);
    stroke: var(--fp-wall);
    stroke-width: 22;
    stroke-linejoin: round;
}
.b247fp__shell {
    fill: var(--fp-corridor);
    stroke: none;
}

/* ── Rum ─────────────────────────────────────────────────────── */
/* Tyk væg-stroke: delte kanter mellem rum bliver til skillevægge, så
   depoterne læses som rum i en bygning frem for flydende felter.
   paint-order sikrer at fyldet ligger oven på stroken (ren indvendig flade).
   Fyld = status-gradient fra defs — materiale frem for flad farve. */
.b247fp-unit__shape {
    fill: url(#b247fp-g-neutral); /* neutral indtil status hentes */
    stroke: var(--fp-wall);
    stroke-width: 6;
    stroke-linejoin: round;
    paint-order: stroke;
    transition: fill .45s ease, stroke .2s ease, filter .2s ease, opacity .3s ease;
}
.b247fp-unit.is-vacant      .b247fp-unit__shape { fill: url(#b247fp-g-vacant); }
.b247fp-unit.is-notice      .b247fp-unit__shape { fill: url(#b247fp-g-notice); }
.b247fp-unit.is-occupied    .b247fp-unit__shape { fill: url(#b247fp-g-occupied); }
.b247fp-unit.is-reserved    .b247fp-unit__shape { fill: url(#b247fp-g-reserved); }
.b247fp-unit.is-maintenance .b247fp-unit__shape { fill: url(#b247fp-g-maintenance); }
.b247fp-unit.is-static      .b247fp-unit__shape { fill: url(#b247fp-g-occupied); }

/* Skravering: optaget/reserveret kommunikeres ikke kun med farve. */
.b247fp-unit__hatch {
    fill: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
}
.b247fp-unit.is-occupied .b247fp-unit__hatch,
.b247fp-unit.is-static   .b247fp-unit__hatch { fill: url(#b247fp-hatch); opacity: 1; }
.b247fp-unit.is-reserved .b247fp-unit__hatch { fill: url(#b247fp-hatch-reserved); opacity: 1; }

.b247fp-unit__label {
    fill: var(--fp-text);
    font-family: var(--font-base, 'Inter', sans-serif);
    font-size: 26px;
    font-weight: 700;
    pointer-events: none;
    opacity: .85;
    user-select: none;
}
/* m²-label under nummeret — kun på rum store nok (sættes af JS). */
.b247fp-unit__size {
    fill: var(--fp-muted);
    font-family: var(--font-base, 'Inter', sans-serif);
    font-size: 17px;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}
.b247fp-unit.is-static .b247fp-unit__label { opacity: .55; }

/* Interaktion — kun bookbare rum. Hele gruppen løfter sig let ved hover. */
.b247fp-unit[data-unit] { cursor: pointer; }
.b247fp-unit[data-unit] {
    transition: transform .18s ease, opacity .3s ease, filter .3s ease;
}
.b247fp-unit[data-unit]:hover {
    transform: translateY(-3px);
}
.b247fp-unit[data-unit]:hover .b247fp-unit__shape {
    filter: drop-shadow(0 6px 12px rgba(31,38,51,.28)) saturate(1.25) brightness(1.03);
}
.b247fp-unit[data-unit]:hover .b247fp-unit__label { opacity: 1; }

/* Synlig fokus-ring for tastaturbrugere (WCAG 2.4.7). SVG honorerer ikke
   outline pålideligt — brug kraftig stroke + glow. */
.b247fp-unit[data-unit]:focus-visible { outline: none; }
.b247fp-unit[data-unit]:focus-visible .b247fp-unit__shape {
    stroke: var(--fp-text);
    stroke-width: 9;
    filter: drop-shadow(0 0 0 3px var(--fp-bg)) drop-shadow(0 0 5px var(--fp-text));
}
/* Fald tilbage til synlig fokus i browsere uden :focus-visible. */
.b247fp-unit[data-unit]:focus .b247fp-unit__shape {
    stroke: var(--fp-text);
    stroke-width: 9;
}

/* ── Filter: aktiv status fremhæves, resten dæmpes ───────────── */
.b247fp[data-filter="vacant"] .b247fp-unit:not(.is-vacant),
.b247fp[data-filter="notice"] .b247fp-unit:not(.is-notice),
.b247fp[data-filter="occupied"] .b247fp-unit:is(.is-vacant, .is-notice) {
    opacity: .22;
    filter: saturate(.35);
}
.b247fp[data-filter="vacant"] .b247fp-card:not(.is-vacant),
.b247fp[data-filter="notice"] .b247fp-card:not(.is-notice),
.b247fp[data-filter="occupied"] .b247fp-card:is(.is-vacant, .is-notice) {
    opacity: .35;
}

/* ── Engangs-glans når status er hentet ──────────────────────── */
.b247fp__shine { opacity: 0; }
.b247fp.is-loaded .b247fp__shine {
    animation: b247fp-shine 1.1s ease-out 1 both;
}
@keyframes b247fp-shine {
    0%   { opacity: 0; transform: skewX(-18deg) translateX(0); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: skewX(-18deg) translateX(1750px); }
}

/* ── Vinduer ─────────────────────────────────────────────────── */
.b247fp__window {
    stroke: var(--fp-surface);
    stroke-width: 5;
    stroke-linecap: round;
}

/* Indgang */
.b247fp__entrance line {
    stroke: var(--fp-muted);
    stroke-width: 3;
    stroke-linecap: round;
}
.b247fp__entrance-arrow { stroke-width: 4; }
.b247fp__entrance-label {
    fill: var(--fp-muted);
    font-family: var(--font-base, 'Inter', sans-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .02em;
}

/* ── Tooltip (desktop) ───────────────────────────────────────── */
.b247fp__tip {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(31,38,51,.18);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s ease;
    z-index: 5;
    min-width: 150px;
}
.b247fp__tip.is-visible { opacity: 1; visibility: visible; }
.b247fp__tip-num { font-weight: 700; font-size: 15px; color: var(--fp-text); }
.b247fp__tip-meta { font-size: 13px; color: var(--fp-muted); }
.b247fp__tip-meta:empty { display: none; }
.b247fp__tip-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-text);
}
.b247fp__tip-status .b247fp__sw { width: 10px; height: 10px; border-radius: 3px; }

/* ── Kort-grid ───────────────────────────────────────────────────
   Poleret, skanbar liste. Sekundær på desktop, primær <600px. */
.b247fp__cards {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.b247fp__cards li { margin: 0; }
.b247fp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    min-height: 64px; /* touch-target ≥ 44px med god luft */
    padding: 14px 16px;
    border: 1px solid var(--fp-border);
    border-radius: 14px;
    background: var(--fp-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--fp-text);
    box-shadow: 0 1px 2px rgba(31,38,51,.04);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, opacity .3s ease;
}
/* Status-prik i hjørnet i stedet for kun en kant — tydeligere og brandet. */
.b247fp-card::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C9C4BA;
    transition: background .45s ease;
}
.b247fp-card:hover {
    box-shadow: 0 8px 20px rgba(31,38,51,.12);
    transform: translateY(-2px);
    border-color: #D2CEC4;
}
.b247fp-card:focus-visible {
    outline: 3px solid var(--fp-text);
    outline-offset: 2px;
}
.b247fp-card.is-vacant::before      { background: var(--fp-vacant); }
.b247fp-card.is-notice::before      { background: var(--fp-notice); }
.b247fp-card.is-occupied::before    { background: var(--fp-occupied); }
.b247fp-card.is-reserved::before    { background: var(--fp-reserved); }
.b247fp-card.is-maintenance::before { background: var(--fp-maint); }
.b247fp-card.is-static { cursor: default; opacity: .75; box-shadow: none; }
.b247fp-card.is-static:hover { transform: none; box-shadow: none; }
.b247fp-card__num { font-weight: 700; font-size: 16px; }
/* Størrelse + pris direkte på kortet — diskret, så status stadig dominerer. */
.b247fp-card__meta {
    font-size: 13px;
    color: var(--fp-muted);
    line-height: 1.3;
}
.b247fp-card__meta:empty { display: none; }
.b247fp-card__status {
    font-size: 13px;
    color: var(--fp-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.b247fp-card.is-vacant      .b247fp-card__status { color: var(--fp-vacant-dk); }
.b247fp-card.is-notice      .b247fp-card__status { color: var(--fp-notice-dk); }
.b247fp-card.is-reserved    .b247fp-card__status { color: var(--fp-reserved-dk); }
.b247fp-card.is-maintenance .b247fp-card__status { color: var(--fp-maint-dk); }
.b247fp-card.is-occupied    .b247fp-card__status,
.b247fp-card.is-static      .b247fp-card__status { color: var(--fp-occupied-dk); }

/* ── Slide-in panel ──────────────────────────────────────────── */
.b247fp__overlay {
    position: fixed;
    inset: 0;
    background: rgba(31,38,51,.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 998;
}
.b247fp__overlay.is-open { opacity: 1; visibility: visible; }

.b247fp__panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(380px, 92vw);
    height: 100%;
    background: var(--fp-surface);
    box-shadow: -8px 0 40px rgba(31,38,51,.20);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 999;
    padding: 2.5rem 1.75rem;
    overflow-y: auto;
}
.b247fp__panel.is-open { transform: translateX(0); }

.b247fp__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--fp-bg);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--fp-text);
    transition: background .15s ease;
}
.b247fp__close:hover { background: var(--fp-border); }
.b247fp__close:focus-visible { outline: 3px solid var(--fp-text); outline-offset: 2px; }

.b247fp__panel-body h3 { font-size: 1.6rem; margin: 0 0 .6rem; }
.b247fp__panel-body .b247fp__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}
.b247fp__panel-body .b247fp__status--vacant      { background: #E6F4EC; color: var(--fp-vacant-dk); }
.b247fp__panel-body .b247fp__status--notice      { background: #FBF1DC; color: var(--fp-notice-dk); }
.b247fp__panel-body .b247fp__status--occupied    { background: #FAF0EE; color: var(--fp-occupied-dk); }
.b247fp__panel-body .b247fp__status--reserved    { background: #EAEEF4; color: var(--fp-reserved-dk); }
.b247fp__panel-body .b247fp__status--maintenance { background: #EFEDE9; color: var(--fp-maint-dk); }
.b247fp__status-icon { font-size: .85em; line-height: 1; }
.b247fp__panel-body dl { margin: 0 0 1rem; }
.b247fp__panel-body dt {
    font-size: .74rem;
    color: var(--fp-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 1rem;
}
.b247fp__panel-body dt:first-child { margin-top: 0; }
.b247fp__panel-body dd { margin: .2rem 0 0; font-size: 1.25rem; font-weight: 700; }
.b247fp__panel-body .btn { width: 100%; }
/* Størrelses-hjælpen: "passer til…" — genkendelighed frem for kvadratmeter. */
.b247fp__panel-hint {
    background: var(--fp-bg);
    border-radius: 10px;
    padding: .7rem .9rem;
    color: var(--fp-text);
    font-size: .9rem;
    line-height: 1.45;
    margin: 0 0 1.5rem;
}
.b247fp__panel-note { color: var(--fp-muted); font-size: .92rem; line-height: 1.5; margin: 0 0 1.25rem; }

/* ── Mobil: kort primær, plan oversigt ──────────────────────────
   Smalle depoter er ~23px på 390px-skærm — umulige som touch-mål. */
@media (max-width: 600px) {
    .b247fp__chips  { order: 1; }
    .b247fp__cards  { order: 2; margin-top: 0; }
    .b247fp__stage  { order: 3; margin-top: 18px; }

    .b247fp__stage { padding: 14px; }
    .b247fp-unit[data-unit] { cursor: default; pointer-events: none; }
    .b247fp-unit__label { font-size: 30px; }
    .b247fp-unit__size  { font-size: 20px; }
    .b247fp__tip { display: none; }

    .b247fp__cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .b247fp__panel { width: 100%; }
}

/* Respektér reduceret bevægelse: ingen transitions, stagger, løft eller glans.
   (JS nulstiller også transition-delays og count-up ved reduced-motion.) */
@media (prefers-reduced-motion: reduce) {
    .b247fp-unit,
    .b247fp-unit__shape,
    .b247fp-unit__hatch,
    .b247fp-card,
    .b247fp-card::before,
    .b247fp__chip,
    .b247fp__tip,
    .b247fp__panel,
    .b247fp__overlay { transition: none; }
    .b247fp-unit[data-unit]:hover { transform: none; }
    .b247fp.is-loaded .b247fp__shine { animation: none; }
}