/* Floorplan Styles */
.floorplan-header {
    position: relative;
    z-index: 2;
    padding: 20px 28px 16px;
    border-bottom: 1px solid var(--rule-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.floorplan-header h1 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.floorplan-header h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--cream-mute);
    font-size: 0.7em;
    margin-left: 6px;
}

.floorplan-header .info {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--cream-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: flex;
    gap: 16px;
}

/* Toolbar — location dropdown, floor tabs, plan pills */
.fp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 28px;
    border-bottom: 1px solid var(--rule-2);
    flex-wrap: wrap;
    min-height: 44px;
}

.fp-location-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-location-select {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    background: var(--ink-3);
    color: var(--cream);
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    min-width: 160px;
}

.fp-location-select:hover {
    border-color: var(--accent);
}

.fp-tool-btn {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    background: var(--ink-4);
    color: var(--cream-dim);
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.fp-tool-btn:hover {
    border-color: var(--accent);
    color: var(--cream);
}

.fp-tool-btn-subtle {
    background: transparent;
    border-color: transparent;
    font-size: 14px;
    padding: 2px 6px;
}

.fp-tool-btn-subtle:hover {
    background: var(--ink-4);
    border-color: var(--rule-2);
}

.fp-tool-btn-danger {
    background: transparent;
    border-color: transparent;
    color: var(--cream-mute);
    font-size: 12px;
    padding: 2px 6px;
}

.fp-tool-btn-danger:hover {
    color: #d9482c;
    border-color: rgba(217, 72, 44, 0.3);
}

/* ⭐ Standard-side (favorit-landing) — aktiv tilstand med guld-accent, så man ser hvilken side der er standard. */
.fp-default-btn.is-default {
    color: #e0a24c;
    border-color: rgba(224, 162, 76, 0.5);
    background: rgba(224, 162, 76, 0.12);
}

/* Lock-button — placeret i .floorplan-canvas sammen med normalize/snap/group-move.
   Matcher .normalize-btn stil. Når .floorplan-canvas.locked skjules de andre 4
   knapper og lås-knappen flyttes ned i bunden som "alene-tilstand". */
.fp-lock-btn {
    position: absolute;
    bottom: 220px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
    background: var(--ink-4);
    color: var(--cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s, color 0.15s, background 0.15s, bottom 0.2s;
    z-index: 5;
    padding: 0;
}
.fp-lock-btn svg { display: block; }
.fp-lock-btn:hover {
    transform: scale(1.08);
    border-color: var(--accent);
}
.fp-lock-btn:active { transform: scale(0.96); }

/* Når låst: skjul de andre 4 side-knapper, og placér lås i bunden */
.floorplan-canvas.locked .add-table-btn,
.floorplan-canvas.locked .normalize-btn,
.floorplan-canvas.locked .snap-btn,
.floorplan-canvas.locked .group-move-btn {
    display: none;
}
.floorplan-canvas.locked .fp-lock-btn {
    bottom: 20px;
}

/* Inline floorplan-søg — input i header, live dropdown under det */
.fp-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}
.fp-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none;
    opacity: 0.7;
    line-height: 1;
}
.fp-search-input {
    width: 280px;
    padding: 6px 30px 6px 30px;
    background: var(--ink-3, rgba(0,0,0,0.25));
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    color: var(--cream);
    font-size: 13px;
    outline: none;
    font-family: inherit;
}
.fp-search-input:focus { border-color: var(--accent); }
.fp-search-input::-webkit-search-cancel-button,
.fp-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.fp-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--cream-mute);
    cursor: pointer;
    font-size: 11px;
    border-radius: 4px;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}
.fp-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cream);
}
.fp-search-input:not(:placeholder-shown) ~ .fp-search-clear {
    display: flex;
}

/* Live dropdown — positioned absolut under input */
.fp-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--ink-3);
    border: 1px solid var(--rule-2);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
}
.fp-search-result {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--cream);
    border-bottom: 1px solid var(--rule-2);
}
.fp-search-result:last-child { border-bottom: none; }
.fp-search-result:hover { background: rgba(217, 72, 44, 0.12); }
.fp-search-empty {
    padding: 12px;
    color: var(--cream-mute);
    font-style: italic;
    font-size: 12px;
}

/* Floor tabs */
.fp-floor-tabs {
    display: flex;
    gap: 2px;
    background: var(--ink-3);
    border-radius: 8px;
    padding: 2px;
}

.fp-floor-tab {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    color: var(--cream-mute);
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.fp-floor-tab:hover {
    color: var(--cream);
    background: var(--ink-4);
}

.fp-floor-tab.active {
    background: var(--ink-5, var(--ink-4));
    color: var(--cream);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Plan pills */
.fp-plan-pills {
    display: flex;
    gap: 4px;
}

.fp-plan-pill {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    color: var(--cream-mute);
    border: 1px solid var(--rule-2);
    border-radius: 12px;
    padding: 3px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.fp-plan-pill:hover {
    border-color: var(--accent);
    color: var(--cream);
}

.fp-plan-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff8f3;
}

.fp-plan-admin {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.floorplan-wrapper {
    position: relative;
    z-index: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100% - 140px);
}

.floorplan-canvas {
    position: relative;
    flex: 1;
    background: var(--ink-2);
    border: 1px solid var(--rule-2);
    border-radius: 14px;
    overflow: hidden;
    min-height: 400px;
    cursor: grab;
    /* v0.9.122 — egne touch-gestures (pinch-zoom + pan) styrer canvas; browseren må
       ikke selv scrolle/zoome når man rører floorplanen på mobil. */
    touch-action: none;
}

.floor-bg {
    position: absolute;
    top: 0;
    left: 0;
    /* Supersampling: baggrunden renderes i 4x base-opløsning og counter-scales 0.25 ned,
       så den fylder layeren men har 4x flere pixels. Når layeren zoomes op til 4x bliver
       baggrunden derfor skarp i stedet for blurry (CSS transform skalerer ellers en
       fit-størrelse bitmap op = uskarpt). Matcher FP_ZOOM_MAX = 4. */
    width: 400%;
    height: 400%;
    transform: scale(0.25);
    transform-origin: 0 0;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}

.floor-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: 0.6;
    z-index: 1;
}

.table:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.table {
    position: absolute;
    background: var(--ink-4);
    border: 1.5px solid var(--rule-2);
    border-radius: 10px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1px 2px;
    min-width: 16px;
    min-height: 12px;
    box-sizing: border-box;
    overflow: visible;
    transform-origin: center center;
    container-type: size;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2;
    /* v0.9.122 — IKKE promote bordet til eget GPU-lag. will-change:transform fik
       browseren til at rasterisere bordet i basis-opløsning og blot bitmap-skalere det
       op ved zoom (= sløret), indtil et hover tvang en gentegning. På mobil er der intet
       hover → permanent sløret. Uden promovering gentegnes tekst+border skarpt ved den
       aktuelle zoom AUTOMATISK. (Selve zoom-laget beholder will-change for jævn zoom.) */
    will-change: auto;
}

.table:hover {
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(217, 72, 44, 0.2);
}

.table.dragging {
    border-color: var(--accent-hot);
    background: var(--accent);
    box-shadow: var(--shadow-lg);
    cursor: grabbing;
    z-index: 10;
}

.table .locater-id, .table .room-label, .table .person-name, .table .table-company, .table .job-title, .table .table-external {
    overflow: hidden; max-width: 100%; word-break: break-word; text-align: center;
    /* line-height: 1.1 så ascenders/descenders ikke klippes på smalle borde,
       flex-shrink: 0 så flex-layout ikke squeezer teksten ved få pixels,
       text-rendering + smoothing for skarp tekst ved alle zoom-niveauer. */
    line-height: 1.1;
    flex-shrink: 0;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Font-størrelse: ensartet på tværs af borde via lav max-cap (11px).
   Multiplier sikrer at "2.50.18" passer horisontalt på smalle borde.
   Min 3px så aller-mindste borde også kan vise hele teksten. */
.table .locater-id {
    font-family: "Geist Mono", ui-monospace, monospace;
    /* cqh sænket fra 22 → 16 så locater-id ikke stikker ud over toppen
       på vandrette borde hvor padding-bottom (rødt navn-bånd) tager plads */
    font-size: clamp(3px, min(15cqw, 16cqh), 11px);
    font-weight: 600;
    color: var(--accent-hot);
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

/* BEMÆRK: Tidligere blev locater-id roteret 90° på højkant-borde via
   @container (max-aspect-ratio: 0.85). Det er fjernet efter brugerens
   ønske — tekst skal altid stå vandret. Font-size formlen ovenfor
   (min(18cqw, 35cqh)) sikrer at fonten krymper nok til at hele teksten
   passer horisontalt selv på smalle/højkant-borde. */

/* Room-label, person-name, table-company: nowrap + krymp-til-fit
   så "KLIPPESUITE 4" (13 tegn) altid kommer på én linje. Lavere multiplier
   (10cqw) end locater-id fordi tekst er længere (10+ tegn vs 4-7). */
.table .room-label {
    font-family: "Geist", system-ui, sans-serif;
    /* cqh sænket fra 18 → 12 så 3-element stack ikke overflower vandrette borde */
    font-size: clamp(4px, min(8cqw, 12cqh), 11px);
    color: var(--cream);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

.table .person-name {
    font-family: "Geist", system-ui, sans-serif;
    font-size: clamp(4px, min(10cqw, 22cqh), 12px);
    color: var(--cream-dim);
    margin-top: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

.table .table-company {
    font-family: "Geist", system-ui, sans-serif;
    /* cqh sænket fra 15 → 10 så 3-element stack ikke overflower vandrette borde */
    font-size: clamp(3px, min(7cqw, 10cqh), 9px);
    color: #e6c84a;
    margin-top: 1px;
    text-align: center;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

/* Job-title: stilling for personen på bordet (fx "Klipper", "Logger").
   Mindre + mere afdæmpet end produktions-navn så den ikke konkurrerer. */
.table .job-title {
    font-family: "Geist", system-ui, sans-serif;
    font-size: clamp(3px, min(6cqw, 8cqh), 8px);
    color: var(--cream-mute);
    margin-top: 1px;
    text-align: center;
    opacity: 0.75;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

/* Udlånt til eksternt firma — vist på flisen (fx "🏢 Udlånt: GO") */
.table .table-external {
    font-family: "Geist", system-ui, sans-serif;
    font-size: clamp(3px, min(7cqw, 10cqh), 9px);
    color: #cdd2d8;
    margin-top: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

/* Fler-maskine-bord: lille chip der viser at bordet har >1 maskine (headline er den ene).
   Konflikt (forskellig person/produktion) → gul advarsels-variant. */
.table .table-multimachine {
    font-family: "Geist", system-ui, sans-serif;
    font-size: clamp(3px, min(6cqw, 8cqh), 8px);
    margin-top: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
    color: #cfe0ff;
    opacity: 0.85;
}
.table .table-multimachine.has-conflict {
    color: #ffcf6b;
    opacity: 1;
    font-weight: 600;
}

/* ⛔ Bord med en DEFEKT maskine. Skrå striber læses som "spærret" på både desktop og mobil
   uden at kræve hover. Maskinen bliver stående på planen (modsat UD AF MASKINPARK, hvor
   pladsen slettes) — man skal netop kunne se HVOR den ubrugelige maskine står. */
.table.table-defect {
    outline: 2px solid #8b1a1a;
    outline-offset: -1px;
    background-image: repeating-linear-gradient(45deg,
        rgba(139, 26, 26, 0.20) 0 8px, transparent 8px 16px);
}
.table .table-defect-chip {
    font-family: "Geist", system-ui, sans-serif;
    font-size: clamp(3px, min(6cqw, 8cqh), 8px);
    margin-top: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    color: #ff9a8f;
    font-weight: 700;
}

.table.dragging .locater-id {
    color: #fff8f3;
}

.table.dragging .person-name {
    color: rgba(255, 248, 243, 0.8);
}

.table.dragging .table-company {
    color: rgba(255, 248, 243, 0.6);
}

.table.read-only {
    cursor: default;
}

.table-resize-handle {
    position: absolute; bottom: 0; right: 0;
    width: 12px; height: 12px; cursor: nwse-resize;
    opacity: 0; transition: opacity 0.15s;
}
.table:hover .table-resize-handle { opacity: 0.6; }
.table-resize-handle::after {
    content: ''; position: absolute; bottom: 2px; right: 2px;
    width: 6px; height: 6px;
    border-right: 2px solid var(--cream-mute);
    border-bottom: 2px solid var(--cream-mute);
}

.add-table-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg, var(--accent-hot), var(--accent));
    color: #fff8f3;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 var(--accent-dim),
        0 8px 20px -6px rgba(217, 72, 44, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 5;
}

.add-table-btn:hover {
    transform: scale(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 0 var(--accent-dim),
        0 12px 28px -6px rgba(217, 72, 44, 0.7);
}

.add-table-btn:active {
    transform: scale(0.96);
}

.add-table-btn.hidden {
    display: none;
}

.normalize-btn {
    position: absolute;
    bottom: 76px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
    background: var(--ink-4);
    color: var(--cream-dim);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s, color 0.15s;
    z-index: 5;
}

.normalize-btn:hover {
    transform: scale(1.08);
    border-color: var(--accent);
    color: var(--cream);
}

.normalize-btn:active {
    transform: scale(0.96);
}

.normalize-btn.hidden {
    display: none;
}

.snap-btn {
    position: absolute;
    bottom: 124px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
    background: var(--ink-4);
    color: var(--cream-dim);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s, color 0.15s;
    z-index: 5;
}

.snap-btn:hover {
    transform: scale(1.08);
    border-color: var(--accent);
    color: var(--cream);
}

.snap-btn:active {
    transform: scale(0.96);
}

.snap-btn.hidden {
    display: none;
}

.group-move-btn {
    position: absolute;
    bottom: 172px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
    background: var(--ink-4);
    color: var(--cream-dim);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
    z-index: 5;
}

.group-move-btn:hover {
    transform: scale(1.08);
    border-color: var(--accent);
    color: var(--cream);
}

.group-move-btn:active {
    transform: scale(0.96);
}

.group-move-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff8f3;
}

.group-move-btn.hidden {
    display: none;
}

/* Zoom layer */
.floorplan-zoom-layer {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    will-change: transform;
    z-index: 1;
}
.floorplan-zoom-layer.fitted {
    inset: auto;
}

.fp-zoom-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}

.fp-zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--rule-2);
    background: var(--ink-4);
    color: var(--cream-dim);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-zoom-btn:hover {
    border-color: var(--accent);
    color: var(--cream);
}

.fp-zoom-label {
    font-size: 10px;
    color: var(--cream-mute);
    text-align: center;
    pointer-events: none;
}

/* Occupancy tags */
.occupancy-tag {
    position: absolute;
    z-index: 3;
    font-family: "Geist", system-ui, sans-serif;
    font-size: clamp(5px, min(14cqw, 14cqh), 13px);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 3px;
}

.occupancy-vacant  { background: #2d8a4e; color: #e8f5e9; min-width: 4px; min-height: 4px; }
.occupancy-occupied { background: var(--accent, #d9482c); color: #fff8f3; }
/* Reserveret til en stilling (uden person endnu) — gul/stiplet, holder pladsen */
.occupancy-reserved { background: #b7891f; color: #fff8e8; border: 1px dashed rgba(255,255,255,0.55); }
/* Udlånt til eksternt firma (fx GO) — gråt, tydeligt "ikke vores" */
.occupancy-external { background: #55595f; color: #eef0f2; }

/* Side-tags (vertical-rl): max-width hævet fra 30% til 40% så lange navne
   som "Signe Bylov Funder" får plads på smalle/højkant-borde. */
/* Vertikale side-tags: line-height 0.85 så tegn pakker tæt sammen i smal vertikal plads.
   letter-spacing -0.04em pakker yderligere. Lavere padding så hele 20px-tag bruges. */
.tag-right  { left: 100%; top: 0; height: 100%; min-width: 6px; max-width: 40%; margin-left: 2px; writing-mode: vertical-rl; padding: 1px; line-height: 0.85; letter-spacing: -0.04em; }
.tag-left   { right: 100%; top: 0; height: 100%; min-width: 6px; max-width: 40%; margin-right: 2px; writing-mode: vertical-rl; transform: rotate(180deg); padding: 1px; line-height: 0.85; letter-spacing: -0.04em; }
.tag-bottom { top: 100%; left: 0; width: 100%; min-height: 6px; max-height: 40%; margin-top: 2px; padding: 1px 2px; }
.tag-top    { bottom: 100%; left: 0; width: 100%; min-height: 6px; max-height: 40%; margin-bottom: 2px; padding: 1px 2px; }

.tag-inset { bottom: 0; left: 0; width: 100%; max-height: 28%; border-radius: 0 0 8px 8px; padding: 1px 2px; }

/* has-inset-tag: tag-inset er absolute-positioned bottom (op til 28% af kort-højde).
   For at flex-content (locater/room/company) bliver OPTISK centreret i den
   tilgængelige plads OVER tag'et, reserverer vi plads via ::after pseudo der
   matcher tag'ets højde i flex-flow. justify-content: center på .table centrerer
   så stack + pseudo, hvilket effektivt skubber stack op mod optisk midte. */
.table.has-inset-tag { padding-bottom: 2px; }
.table.has-inset-tag::after {
    content: "";
    flex: 0 0 24cqh;
    pointer-events: none;
}

.table.dragging .occupancy-tag { display: none; }

/* Back-to-board banner */
.floorplan-back-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    /* Uigennemsigtig baggrund: ellers skinner floorplanens etage-vælger igennem = rodet. */
    background: linear-gradient(180deg, #3a2317, #241712);
    border: 1px solid rgba(212, 92, 47, 0.75);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.62);
}
/* To-delt rute-label: titel-linje øverst, klar FRA → TIL under */
.fpbb-title { display: block; color: var(--cream); font-size: 13px; }
.fpbb-person { color: var(--cream-mute); font-weight: 500; }
.fpbb-person::before { content: "· "; opacity: .6; }
.fpbb-loc { color: var(--cream); font-weight: 700; }
.fpbb-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fpbb-arrow { color: var(--accent); font-weight: 700; font-size: 17px; line-height: 1; }
.fpbb-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.fpbb-dot-from { background: #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,0.7); }
.fpbb-dot-to { background: #6ec76e; box-shadow: 0 0 6px rgba(110,199,110,0.7); }
.fpbb-now { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; color: var(--accent); background: rgba(212,92,47,0.2); border-radius: 4px; padding: 1px 5px; margin-left: 3px; }
.fpbb-link {
    background: rgba(212, 92, 47, 0.2);
    border: 1px solid var(--accent);
    color: var(--cream);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.fpbb-link:hover { background: rgba(212, 92, 47, 0.35); }

/* "Vis igen"-knap — re-trigger zoom-ring + scroll til bord */
.fpbb-replay {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rule-2);
    color: var(--cream);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.fpbb-replay:hover {
    background: rgba(212, 92, 47, 0.2);
    border-color: var(--accent);
}
.fpbb-label { color: var(--cream-mute); }
/* Ikon + tekst er adskilt, så mobil kan vise ikonet alene (se mobile-tune.css). */
.fpbb-txt { margin-left: 5px; }
.fpbb-fp { color: var(--cream); font-weight: 700; }
.fpbb-label strong { color: var(--cream); margin: 0 4px; }
/* ✕ luk-fokus (bliv i floorplan) */
.fpbb-close { background: transparent; border: none; color: var(--cream-mute); font-size: 14px;
    cursor: pointer; padding: 2px 6px; margin-left: 4px; }
.fpbb-close:hover { color: var(--cream); }
/* Etage-overblik-chips for søgt produktion */
.fpbb-floor-chip { background: rgba(0,0,0,0.28); border: 1px solid var(--rule-2); color: var(--cream);
    border-radius: 5px; padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: pointer; margin-left: 6px; }
.fpbb-floor-chip.active { border-color: var(--accent); background: rgba(212,92,47,0.22); }
.fpbb-floor-chip:hover { border-color: var(--cream-mute); }

/* "Zoom-ring": kæmpe ring der skalerer ned til bord-størrelsen, så øjet kan
   følge. Ringen fader ud bagefter, så bord-teksten kan læses. */
@keyframes floorplan-zoom-ring {
    0%   { transform: scale(28); opacity: 0; }
    12%  { opacity: 0.85; }
    50%  { transform: scale(1); opacity: 1; }
    78%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0; visibility: hidden; }
}

.table.floorplan-table-focus,
.table.floorplan-table-from,
.table.floorplan-table-to {
    z-index: 100;
}
.table.floorplan-table-focus::before,
.table.floorplan-table-from::before,
.table.floorplan-table-to::before {
    content: "";
    position: absolute;
    inset: -14px;
    border: 5px solid var(--accent);
    border-radius: 16px;
    pointer-events: none;
    transform-origin: center center;
    animation: floorplan-zoom-ring 2.0s cubic-bezier(0.16, 0.84, 0.36, 1) forwards;
    box-shadow: 0 0 35px var(--accent), 0 0 70px rgba(212, 92, 47, 0.35);
    z-index: 102;
}

/* Highlight når man kommer fra Board: tynd accent-ramme der pulser
   aktivt så brugeren ikke glemmer hvilket bord de arbejder med. */
@keyframes fp-focus-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(212, 92, 47, 0.4),
                    inset 0 0 0 9999px rgba(212, 92, 47, 0.25);
    }
    50% {
        box-shadow: 0 0 0 3px var(--accent), 0 0 28px rgba(212, 92, 47, 0.85),
                    inset 0 0 0 9999px rgba(212, 92, 47, 0.25);
    }
}
.table.floorplan-table-focus {
    box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(212, 92, 47, 0.45),
                inset 0 0 0 9999px rgba(212, 92, 47, 0.25);
    animation: fp-focus-pulse 1.8s ease-in-out infinite;
}

/* FROM-bord: tynd rød ramme + "FRA"-label */
.table.floorplan-table-from {
    box-shadow: 0 0 0 2px #ff6b6b, 0 0 12px rgba(255, 107, 107, 0.45);
}
.table.floorplan-table-from::before {
    border-color: #ff6b6b;
    box-shadow: 0 0 35px #ff6b6b, 0 0 70px rgba(255, 107, 107, 0.35);
}
.table.floorplan-table-from::after {
    content: "FRA";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6b6b;
    color: #fff;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 3px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* "Find plads"-knap i floorplan-header */
.fp-find-seat-btn {
    margin-left: auto;
    background: rgba(139, 111, 199, 0.15);
    border: 1px solid rgba(139, 111, 199, 0.45);
    color: #d4c5f0;
    font-size: 12px;
    font-family: inherit;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s, border-color 0.15s;
}
.fp-find-seat-btn:hover {
    background: rgba(139, 111, 199, 0.28);
    border-color: #8b6fc7;
    color: #fff;
}

/* =============================================================================
   Multi-select + højreklik-kontekstmenu (v0.7.35)
   ============================================================================= */

/* Highlight på markeret bord (Cmd/Shift-klik) */
.table.fp-table-selected {
    box-shadow: 0 0 0 2.5px var(--accent), 0 0 14px rgba(217, 72, 44, 0.4);
    z-index: 20;
}

/* Kontekstmenu */
.fp-table-context-menu {
    position: fixed;
    background: var(--ink-3);
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    z-index: 9000;
    min-width: 260px;
    padding: 4px;
}
.fp-ctx-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--cream);
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}
.fp-ctx-btn:hover { background: rgba(217, 72, 44, 0.15); }
.fp-ctx-btn.danger { color: #ff8a6b; }
.fp-ctx-btn.danger:hover { background: rgba(217, 72, 44, 0.25); }
.fp-ctx-sep { height: 1px; background: var(--rule-2); margin: 4px 0; }

/* Bulk-toolbar (floating ved bunden) */
.fp-bulk-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 200%);
    background: var(--ink-2);
    border: 1px solid var(--rule-2);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    transition: transform 0.25s ease;
    z-index: 500;
}
.fp-bulk-toolbar.active { transform: translate(-50%, 0); }
.fp-bulk-toolbar .fp-bulk-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    padding: 0 8px 0 0;
    border-right: 1px solid var(--rule-2);
    margin-right: 4px;
}

/* Swap-modal radio-group ("Hvad skal swappes?") */
.fp-swap-radio-group {
    margin-bottom: 14px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid var(--rule-2);
}
.fp-swap-radio-label {
    font-size: 11px;
    color: var(--cream-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    font-weight: 600;
}
.fp-swap-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    color: var(--cream);
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
}
.fp-swap-radio:hover { background: rgba(217, 72, 44, 0.08); }
.fp-swap-radio input[type="radio"] { cursor: pointer; }

/* Swap-options modal */
.fp-swap-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 16px;
}
.fp-swap-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cream);
    font-size: 13px;
    cursor: pointer;
}
.fp-swap-options input[type="checkbox"] {
    cursor: pointer;
}

/* Produktion-multi highlight (når brugeren vælger "ALLE borde for X") */
.table.floorplan-table-prod-multi {
    box-shadow: 0 0 0 3px var(--accent-hot, #d9482c), 0 0 20px rgba(217, 72, 44, 0.5),
                inset 0 0 0 9999px rgba(217, 72, 44, 0.28);
    z-index: 100;
}
.table.floorplan-table-prod-multi::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid var(--accent-hot, #d9482c);
    pointer-events: none;
    animation: floorplan-zoom-ring 1.5s ease-out;
}

/* SEAT-bord: lilla "DIN PLADS"-label */
.table.floorplan-table-seat {
    box-shadow: 0 0 0 4px #8b6fc7, 0 0 30px rgba(139, 111, 199, 0.6);
    z-index: 110;
}
.table.floorplan-table-seat::before {
    border-color: #8b6fc7 !important;
    box-shadow: 0 0 40px #8b6fc7, 0 0 80px rgba(139, 111, 199, 0.4) !important;
}
.table.floorplan-table-seat::after {
    content: "DIN PLADS";
    position: absolute;
    /* Speech-bubble-style: lilla popup UNDER bordet med trekantet pil pegende
       OP mod bordet (Anders And-style). Pile-spidsen "stikker ind" under det
       røde navne-tag og er BAG det (z-index: 1 vs occupancy-tag's z-index: 3),
       så personens navn ikke skjules. */
    bottom: -38px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    background: #8b6fc7;
    color: #fff;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 12px 10px 4px;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    /* Lav z-index så pile-tippen visuelt ligger BAG det røde navne-tag */
    z-index: 1;
    /* Speech-bubble-form: trekantet spids øverst-midt der peger mod bordet */
    clip-path: polygon(
        0% 30%,
        44% 30%,
        50% 0%,
        56% 30%,
        100% 30%,
        100% 100%,
        0% 100%
    );
}

/* Når seat-focus er aktiv (KUN visitor): vis ALLE borde med deres normale
   omrids/baggrund så man kan se layoutet — men SKJUL alt indhold (tekst,
   personer, navne) UNDTAGEN på target-bordet. Logget ind brugere skal se
   ALT — kun lilla ring + label på target (ingen klasse på canvas). */
.floorplan-seat-focus .table:not(.floorplan-table-seat) {
    pointer-events: none;
    transition: opacity 0.3s;
}
.floorplan-seat-focus .table:not(.floorplan-table-seat) .locater-id,
.floorplan-seat-focus .table:not(.floorplan-table-seat) .room-label,
.floorplan-seat-focus .table:not(.floorplan-table-seat) .person-name,
.floorplan-seat-focus .table:not(.floorplan-table-seat) .occupancy-tag,
.floorplan-seat-focus .table:not(.floorplan-table-seat) .table-company,
.floorplan-seat-focus .table:not(.floorplan-table-seat) .table-resize-handle {
    visibility: hidden;
}

.fpbb-seat-loc {
    color: #b8a3e0;
    font-weight: 600;
    margin: 0 4px;
    padding: 2px 8px;
    background: rgba(139, 111, 199, 0.18);
    border: 1px solid rgba(139, 111, 199, 0.4);
    border-radius: 4px;
}

/* TO-bord: tynd grøn ramme + "TIL"-label */
.table.floorplan-table-to {
    box-shadow: 0 0 0 2px #6ec76e, 0 0 12px rgba(110, 199, 110, 0.45);
}
.table.floorplan-table-to::before {
    border-color: #6ec76e;
    box-shadow: 0 0 35px #6ec76e, 0 0 70px rgba(110, 199, 110, 0.35);
}
.table.floorplan-table-to::after {
    content: "TIL";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #6ec76e;
    color: #0a0a0a;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 3px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Banner-styles for FRA/TIL labels — tydelige klikbare chips (skift floorplan v. crossFloor) */
button.fpbb-from,
button.fpbb-to {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.28);
    border: 1px solid var(--rule-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
button.fpbb-from small,
button.fpbb-to small { font-size: 9px; font-weight: 700; letter-spacing: 0.09em; opacity: 0.72; }
button.fpbb-from { color: #ff9c9c; border-color: rgba(255,107,107,0.5); }
button.fpbb-to { color: #a5e0a5; border-color: rgba(110,199,110,0.5); }
button.fpbb-from:hover {
    background: rgba(255, 107, 107, 0.18);
    border-color: rgba(255, 107, 107, 0.5);
}
button.fpbb-to:hover {
    background: rgba(110, 199, 110, 0.18);
    border-color: rgba(110, 199, 110, 0.5);
}
button.fpbb-from.active {
    background: rgba(255, 107, 107, 0.28);
    border-color: #ff6b6b;
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
}
button.fpbb-to.active {
    background: rgba(110, 199, 110, 0.28);
    border-color: #6ec76e;
    box-shadow: 0 0 8px rgba(110, 199, 110, 0.4);
}
.fpbb-warn {
    color: var(--cream-mute);
    font-style: italic;
    font-size: 11px;
    margin-left: 8px;
}

/* v0.7.56 — Swap pick-mode: highlight af kilde-bord mens destination vælges */
.table.swap-source {
    outline: 3px solid var(--accent-hot, #f05a38);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(240, 90, 56, 0.25);
    z-index: 5;
}
.table.swap-source::after {
    content: "FRA";
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent-hot, #f05a38);
    color: #fff;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1px 6px;
    border-radius: 4px;
    pointer-events: none;
}

/* ── Byt med maskine fra lager (vælger-liste) ── */
.fp-lagerswap-list {
    max-height: 320px; overflow-y: auto; margin-top: 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.fp-lagerswap-row {
    display: flex; align-items: center; gap: 8px; text-align: left; width: 100%;
    background: var(--ink-4); border: 1px solid var(--rule-2); border-radius: 7px;
    padding: 8px 12px; color: var(--cream); font-size: 13px; cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.fp-lagerswap-row:hover { border-color: var(--accent); background: var(--ink-5); }
.fp-lagerswap-row strong { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
.fp-lagerswap-lane {
    margin-left: auto; font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10px; color: var(--cream-mute); background: var(--ink-3);
    border: 1px solid var(--rule-2); border-radius: 4px; padding: 1px 7px; white-space: nowrap;
}

/* v0.9.122 — Mobil: større touch-mål til zoom-knapper + fuld-bredde søgefelt, så
   floorplanen kan betjenes med fingeren (pinch-zoom/pan gør resten). */
@media (max-width: 768px) {
    .fp-zoom-btn { width: 44px; height: 44px; font-size: 22px; }
    .fp-search-wrap, .fp-search-input { width: 100%; box-sizing: border-box; }
    /* v0.9.122 — Mobil renderer nu i desktop-base (se fitZoomLayer/isMobileFP i js):
       bordene er store nok til at tekst passer ind, og hele etagen ses ved at zoome ud.
       Derfor ingen mobil-specifik min-størrelse længere (== desktop 16/12px). */
}

/* Bugfix: "Rediger bord"/"Tilføj bord"-modalerne skal kunne SCROLLE når indholdet er højere end
   skærmen — ellers ryger de nederste felter + Gem/Annullér ud af syne (set på Safari / lave skærme).
   Scoped til floorplan-modalerne, så andre modaler er urørte. */
#table-modal-overlay .modal,
#add-table-modal-overlay .modal {
    max-height: 90vh;
    overflow-y: auto;
}

/* "Rediger bord"-modal: to tydelige sektioner — MASKINE (virkelighed, bor på kortet →
   flytter medlemmet med) vs RESERVATION (planlægning, bor på bordet). Gør det klart at
   person/produktion hænger på maskinen, ikke på bordet. (build: floorplan-arkitektur) */
#table-modal-overlay .table-form-section {
    border: 1px solid var(--rule-2, rgba(255,255,255,.14));
    border-radius: 10px;
    padding: 8px 12px 12px;
    margin: 12px 0;
    background: var(--ink-1, rgba(255,255,255,.03));
}
#table-modal-overlay .table-form-section > legend {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 0 8px;
    color: var(--cream, #efe9dd);
}
#table-modal-overlay #table-section-reality > legend { color: #cfe0ff; }
#table-modal-overlay .table-form-hint {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cream-mute, #b8b2a5);
    margin: 2px 0 8px;
}
/* Ingen maskine på bordet → nedton virkeligheds-sektionen (person/produktion bliver en løs
   note på bordet, ikke en maskine-tildeling); sat af openTableEditModal. */
#table-modal-overlay #table-section-reality.section-inactive {
    opacity: .62;
    filter: saturate(.75);
}

/* Fler-maskine-bord: per-maskine liste i "Rediger bord"-modalen (hver maskine rettes for sig).
   Vist i stedet for de enkelte Person/Produktion-felter når bordet har >1 maskine. */
#table-machines-list { display: flex; flex-direction: column; gap: 8px; }
#table-machines-list .tml-row {
    border: 1px solid var(--rule-2, rgba(255,255,255,.14));
    border-radius: 9px;
    padding: 8px 10px;
    background: var(--ink-1, rgba(255,255,255,.03));
}
#table-machines-list .tml-head { display: flex; align-items: center; gap: 6px; }
#table-machines-list .tml-tag { font-weight: 700; font-size: 13px; color: var(--cream, #efe9dd); }
#table-machines-list .tml-lane {
    font-size: 10.5px; color: #cfe0ff; background: rgba(91,141,239,.16);
    border-radius: 5px; padding: 1px 6px;
}
#table-machines-list .tml-assign { font-size: 12px; color: var(--cream, #efe9dd); margin: 4px 0 7px; }
#table-machines-list .tml-k { opacity: .9; }
#table-machines-list .tml-mute { color: var(--cream-mute, #b8b2a5); font-style: italic; }
#table-machines-list .tml-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#table-machines-list .tml-btn { font-size: 12px; padding: 5px 10px; }