/* Floor plan editor - Track C. B60 OS tokens only (--ds-* via main.css aliases). */

.floor-plan-page {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    min-height: calc(100vh - 120px);
    height: calc(100vh - 120px);
}

.fp-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--ds-space-4);
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

@media (max-width: 1023px) {
    .fp-shell {
        grid-template-columns: 1fr;
    }
    .fp-props-panel {
        order: 2;
    }
}

.fp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
}

.fp-toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.fp-toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--ds-border-default);
    margin-inline: var(--ds-space-1);
}

.fp-floor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-block-end: var(--ds-space-3);
}

.fp-floor-tab {
    border: 1px solid var(--ds-border-default);
    background: var(--ds-bg-surface);
    color: var(--ds-text-secondary);
    border-radius: var(--ds-radius-pill);
    padding: 6px 14px;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-medium);
    cursor: pointer;
    transition: background var(--ds-motion-hover) var(--ds-ease-standard),
                color var(--ds-motion-hover) var(--ds-ease-standard),
                border-color var(--ds-motion-hover) var(--ds-ease-standard);
}

.fp-floor-tab.is-active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: var(--ds-text-on-primary);
}

/* Shown only while a palette shape is armed, to say where the next click goes.
   Primary-coloured so it reads as an active mode rather than as help text. */
.fp-place-hint {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    color: var(--ds-primary);
    white-space: nowrap;
}

.fp-place-hint[hidden] {
    display: none;
}

.fp-save-indicator {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
    min-width: 72px;
    text-align: end;
}

.fp-save-indicator.is-saving {
    color: var(--ds-primary);
}

.fp-save-indicator.is-error {
    color: var(--ds-danger);
}

.fp-editor-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    min-width: 0;
    min-height: 0;
    flex: 1;
}

.fp-stage-outer {
    position: relative;
    flex: 1;
    min-height: 320px;
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-bg-inset);
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.fp-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: default;
}

.fp-stage.is-panning {
    cursor: grab;
}

.fp-stage.is-panning:active {
    cursor: grabbing;
}

.fp-viewport {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.fp-floor-surface {
    position: relative;
    background: var(--ds-bg-surface);
    box-shadow: var(--ds-shadow-card);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.fp-floor-surface.is-grid {
    background-color: var(--ds-bg-surface);
    background-image: radial-gradient(circle, var(--ds-border-strong) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: 0 0;
}

.fp-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.fp-tables-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fp-table {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center center;
    will-change: transform;
    pointer-events: auto;
    touch-action: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-surface);
    border: 2px solid var(--ds-border-default);
    box-shadow: var(--ds-shadow-card);
    color: var(--ds-text-primary);
    font-size: 12px;
    font-weight: var(--ds-fw-semibold);
    text-align: center;
    padding: 4px;
    cursor: move;
}

.fp-table.is-selected {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 2px var(--ds-primary-tint), var(--ds-shadow-pop);
    z-index: 4;
}

.fp-table.is-round {
    border-radius: 50%;
}

.fp-table.is-square,
.fp-table.is-rectangle {
    border-radius: var(--ds-radius-md);
}

.fp-table.is-booth {
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) var(--ds-radius-sm) var(--ds-radius-sm);
}

.fp-table.is-bar_stool {
    border-radius: 50%;
    min-width: 32px;
    min-height: 32px;
}

.fp-table-label {
    pointer-events: none;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.fp-table-seats {
    display: block;
    font-size: 10px;
    font-weight: var(--ds-fw-regular);
    color: var(--ds-text-secondary);
}

.fp-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--ds-bg-surface);
    border: 2px solid var(--ds-primary);
    border-radius: 2px;
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
    z-index: 6;
}

.fp-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.fp-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.fp-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.fp-handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

.fp-rotate-handle {
    position: absolute;
    top: -28px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--ds-primary);
    border: 2px solid var(--ds-bg-surface);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    z-index: 6;
}

.fp-rotate-handle::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 1px;
    height: 10px;
    background: var(--ds-primary);
    transform: translateX(-50%);
}

.fp-marquee {
    position: absolute;
    border: 1px dashed var(--ds-primary);
    background: var(--ds-primary-tint);
    pointer-events: none;
    z-index: 8;
}

.fp-zoom-controls {
    position: absolute;
    left: var(--ds-space-3);
    bottom: var(--ds-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
    z-index: 10;
}

.fp-zoom-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-surface);
    color: var(--ds-text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--ds-shadow-card);
}

.fp-zoom-btn:hover {
    border-color: var(--ds-primary);
    color: var(--ds-primary);
}

.fp-zoom-readout {
    font-size: var(--ds-text-xs);
    text-align: center;
    color: var(--ds-text-secondary);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-sm);
    padding: 2px 6px;
}

.fp-palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}

.fp-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    padding: var(--ds-space-2);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-surface);
    cursor: grab;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    touch-action: none;
}

.fp-palette-item.is-active {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

.fp-palette-shape {
    width: 36px;
    height: 28px;
    border: 2px solid var(--ds-border-strong);
    background: var(--ds-bg-inset);
}

.fp-palette-shape.is-round { border-radius: 50%; width: 32px; height: 32px; }
.fp-palette-shape.is-square { border-radius: var(--ds-radius-sm); }
.fp-palette-shape.is-rectangle { width: 44px; border-radius: var(--ds-radius-sm); }
.fp-palette-shape.is-booth { width: 48px; border-radius: var(--ds-radius-md) var(--ds-radius-md) 4px 4px; }
.fp-palette-shape.is-bar_stool { width: 20px; height: 20px; border-radius: 50%; }

.fp-props-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding: var(--ds-space-4);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    min-height: 0;
    overflow: auto;
}

.fp-props-panel h3 {
    margin: 0;
    font-size: var(--ds-text-md);
    font-weight: var(--ds-fw-semibold);
}

.fp-props-empty {
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm);
}

.fp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-field label {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    font-weight: var(--ds-fw-medium);
}

.fp-readout {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-primary);
    padding: var(--ds-space-2) var(--ds-space-3);
    background: var(--ds-bg-inset);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-sm);
}

.fp-section-label {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-primary);
}

.fp-floor-props {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

.fp-bg-controls {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-inset);
}

.fp-bg-preview {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border-default);
    background: var(--ds-bg-surface);
}

.fp-bg-preview.is-empty {
    display: none;
}

.fp-inline-error {
    margin: 0;
    color: var(--ds-danger);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
}

.fp-inline-error[hidden] {
    display: none;
}

.fp-toggle.is-on {
    background: var(--ds-primary-tint);
    border-color: var(--ds-primary);
    color: var(--ds-primary);
}

/* --------------------------------------------------------- all-tables list

   Every table on the floor, listed regardless of whether it can be found on
   the canvas. A table dragged past the edge, or dropped exactly on top of
   another, is invisible and therefore unselectable -- the only sign it exists
   is its number appearing in the POS table picker. This is the way back to it.

   Sorted by number, because that is the identity the rest of the app uses. */
.fp-table-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    margin-block-start: var(--ds-space-2);
    padding-block-start: var(--ds-space-3);
    border-block-start: 1px solid var(--ds-border-default);
}

.fp-table-list-count {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.fp-table-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Capped and scrollable: on a 730px till this sits under the floor
       properties, and an unbounded list would push them off the panel. */
    max-height: 240px;
    overflow-y: auto;
}

.fp-table-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 6px var(--ds-space-2);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    font-size: var(--ds-text-sm);
    /* 32px: this is a touch target on the till, not just a list row. */
    min-height: 32px;
}

.fp-table-row:hover {
    background: var(--ds-bg-inset);
}

.fp-table-row.is-selected {
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

.fp-table-row-num {
    font-weight: var(--ds-fw-semibold);
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    text-align: end;
}

.fp-table-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-text-secondary);
}

.fp-table-row.is-selected .fp-table-row-name {
    color: inherit;
}

/* The reason a row is here at all rather than being found on the canvas. */
.fp-table-row-fix {
    border: 1px solid var(--ds-warning);
    background: transparent;
    color: var(--ds-warning);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-xs);
    padding: 1px 6px;
    cursor: pointer;
    white-space: nowrap;
}

.fp-table-row-del {
    border: none;
    background: transparent;
    color: var(--ds-text-tertiary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--ds-radius-sm);
}

.fp-table-row-del:hover {
    background: var(--ds-danger-tint, rgba(220, 38, 38, .1));
    color: var(--ds-danger);
}

/* Floor settings are set once and then left alone, so they collapse. They used
   to sit at the top of the panel, which on a 730px till pushed the table list
   off the bottom -- the one thing the panel exists to make findable. */
.fp-floor-settings {
    border-block-start: 1px solid var(--ds-border-default);
    padding-block-start: var(--ds-space-3);
    margin-block-start: var(--ds-space-1);
}

.fp-floor-settings > summary {
    cursor: pointer;
    font-size: var(--ds-text-md);
    font-weight: var(--ds-fw-semibold);
    /* A real touch target on the till, not just a text line. */
    min-height: 32px;
    display: flex;
    align-items: center;
}

.fp-floor-settings[open] > summary {
    margin-block-end: var(--ds-space-3);
}

/* Align/distribute need two or more tables. Disabled below that, rather than
   returning silently, which read as a dead button. */
.fp-multi:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.fp-selection-count {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The way back from a selected table to the list. A real control, because the
   panel sits on the far side of the screen from the canvas and "click empty
   space to deselect" is not a route anyone finds -- the reported workaround was
   reloading the page. */
.fp-back-to-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 4px 0;
    /* 32px so it is a real target on a touch till, not just a text link. */
    min-height: 32px;
    color: var(--ds-primary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-medium);
    cursor: pointer;
}

.fp-back-to-list:hover {
    text-decoration: underline;
}

.fp-detail-title {
    font-weight: var(--ds-fw-semibold);
    font-size: var(--ds-text-md);
    margin-block-end: var(--ds-space-2);
}