/*
 * Shared floor-plan styles for the FloorCanvas component, used by both the layout editor
 * (interactive) and the dashboard "Masalar" diagram (read-only). Loaded globally from App.razor
 * so the component renders correctly on any page.
 */

/* ===== Canvas / stage ===== */
.fpe-canvas {
    background-color: #f7f8fa;
    background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid #d8dce2;
    box-sizing: border-box;
    touch-action: none;
}

/* Interactive: a fixed logical stage that JS pans/zooms via transform. Transparent — the grid
   lives on the viewport so the workspace fills the screen instead of being a small boxed card. */
.fpe-canvas.interactive {
    position: absolute;
    top: 0;
    left: 0;
    width: 4000px;
    height: 3000px;
    overflow: visible;
    cursor: grab;
    background: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
    border: none;
}
.fpe-canvas.interactive.fpe-panning { cursor: grabbing; }

/* Read-only (dashboard diagram / Hepsi overview): same logical plane, JS fit-scales it. */
.fpe-canvas.readonly {
    position: absolute;
    top: 0;
    left: 0;
    width: 4000px;
    height: 3000px;
    overflow: visible;
    background: none;
    border: none;
    transform-origin: 0 0;
}

/* ===== Tables ===== */
.fpe-table {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #5b6470;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    user-select: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    transform-origin: center center;
}

.fpe-canvas.interactive .fpe-table { cursor: grab; }
.fpe-canvas.readonly .fpe-table { cursor: pointer; }
.fpe-table:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.fpe-table.fpe-dragging { cursor: grabbing; box-shadow: 0 8px 20px rgba(0,0,0,0.3); opacity: 0.92; z-index: 50; }

.fpe-table.shape-round, .fpe-table.shape-oval { border-radius: 50%; }
.fpe-table.shape-square { border-radius: 10px; }

.fpe-table.selected {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.35), 0 4px 12px rgba(0,0,0,0.25);
    z-index: 40;
}

/* Live-status tints. */
.fpe-table.status-available { background: rgba(16,196,76,0.16); border-color: rgba(16,196,76,0.75); }
.fpe-table.status-reserved { background: rgba(0,96,213,0.16); border-color: rgba(0,96,213,0.75); }
.fpe-table.status-occupied { background: rgba(242,63,38,0.14); border-color: rgba(242,63,38,0.75); }
.fpe-table.status-dirty { background: rgba(150,148,146,0.18); border-color: rgba(120,118,116,0.75); }
.fpe-table.status-outofservice { background: rgba(80,80,84,0.16); border-color: rgba(80,80,84,0.7); }

.fpe-table-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    text-align: center;
    max-width: 100%;
    padding: 2px;
    overflow: hidden;
}

.fpe-table-no { font-weight: 700; font-size: 0.95rem; color: #2b2f36; line-height: 1.05; word-break: break-word; }
.fpe-table-cap { display: inline-flex; align-items: center; gap: 2px; font-size: 0.72rem; color: #5b6470; }

.fpe-inline-edit {
    pointer-events: auto;
    width: 84%;
    border: 1px solid var(--accent-fill-rest);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.85rem;
    text-align: center;
}

/* ===== Chairs (children of the rotated table, so they rotate with it) ===== */
.fpe-chair {
    position: absolute;
    width: 13px;
    height: 13px;
    background: #c6ccd4;
    border: 1px solid #aab1ba;
    border-radius: 4px 4px 5px 5px;
    z-index: -1;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
    pointer-events: none;
}
.fpe-canvas.interactive .fpe-chair { pointer-events: auto; cursor: grab; }
.fpe-canvas.interactive .fpe-chair:hover { background: #aeb6c0; }
.fpe-chair.fpe-chair-dragging { background: var(--accent-fill-rest); border-color: var(--accent-fill-rest); }

/* ===== Editor-only manipulation affordances (harmless when read-only) ===== */
.fpe-handle { position: absolute; pointer-events: auto; z-index: 60; }
.fpe-handle-resize {
    right: -7px; bottom: -7px; width: 14px; height: 14px;
    background: #fff; border: 2px solid var(--accent-fill-rest); border-radius: 3px; cursor: nwse-resize;
}
.fpe-handle-rotate {
    left: 50%; top: -30px; transform: translateX(-50%); width: 16px; height: 16px;
    background: var(--accent-fill-rest); border: 2px solid #fff; border-radius: 50%; cursor: grab;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.fpe-handle-rotate::before {
    content: ""; position: absolute; left: 50%; top: 14px; width: 2px; height: 16px;
    background: var(--accent-fill-rest); transform: translateX(-50%);
}

.fpe-del-btn {
    position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid #d13438; background: #fff; color: #d13438; font-size: 12px; font-weight: 700;
    line-height: 1; cursor: pointer; pointer-events: auto; z-index: 61;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.fpe-del-btn:hover { background: #d13438; color: #fff; }
.fpe-del-btn.disabled { opacity: 0.4; cursor: not-allowed; }

.fpe-edit-pop {
    position: absolute; left: 50%; display: flex; flex-direction: column; gap: 6px; padding: 8px;
    background: #fff; border: 1px solid var(--neutral-stroke-rest); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22); z-index: 70; pointer-events: auto; width: 150px;
}
.fpe-edit-pop.up { top: -8px; translate: -50% -100%; transform-origin: center bottom; }
.fpe-edit-pop.down { top: calc(100% + 8px); translate: -50% 0; transform-origin: center top; }
.fpe-edit-name { width: 100%; border: 1px solid var(--neutral-stroke-rest); border-radius: 4px; padding: 3px 6px; font-size: 0.85rem; box-sizing: border-box; }
.fpe-edit-cap { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fpe-edit-cap span { display: inline-flex; align-items: center; gap: 3px; font-size: 0.85rem; font-weight: 600; }
.fpe-edit-cap button, .fpe-edit-done {
    border: 1px solid var(--neutral-stroke-rest); background: var(--neutral-layer-1); border-radius: 5px;
    width: 26px; height: 24px; font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1;
}
.fpe-edit-cap button:hover, .fpe-edit-done:hover { background: var(--neutral-layer-2); }
.fpe-edit-done { width: 100%; color: var(--accent-fill-rest); }

/* ===== Empty states ===== */
.fpe-empty, .fpe-empty-floor {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    text-align: center; color: var(--neutral-foreground-hint); padding: 32px 20px;
}
.fpe-empty-floor { position: absolute; inset: 0; pointer-events: none; }
.fpe-empty-hint { font-size: 0.8rem; opacity: 0.8; max-width: 240px; }