/* Public Interactive Floor Map Stylesheet */

.tm-public-map-container {
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    background: #f8f9fa;
    box-shadow: var(--tm-shadow);
}

.tm-map-tabs {
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid var(--tm-border);
    padding: 10px;
    gap: 8px;
    overflow-x: auto;
}

.tm-map-tabs button {
    border: 1.5px solid var(--tm-border);
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--tm-text-muted);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tm-map-tabs button:hover {
    color: var(--tm-text);
    border-color: var(--tm-text-muted);
}

.tm-map-tabs button.active {
    background: var(--tm-accent);
    color: #ffffff;
    border-color: var(--tm-accent);
    box-shadow: 0px 4px 8px rgba(242, 146, 34, 0.25);
}

.tm-map-viewport {
    padding: 16px;
    overflow: auto;
    background: #f8f9fa;
    min-height: 300px;
}

.tm-map-canvas {
    background: #ffffff;
    /* box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04); */
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--tm-border);
    width: 100%;
    /* aspect-ratio set by JS from floor.canvas_width / canvas_height */
    overflow: hidden;
}

/* Map tables base styling */
.tm-map-table {
    position: absolute;
    border: 1.5px solid #e6e8ec !important;
    background: #ffffff !important;
    color: var(--tm-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: inherit;
    user-select: none;
    z-index: 5;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.tm-map-table.round {
    border-radius: 50% !important;
}

.tm-map-table__number {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    margin: 0;
    color: var(--tm-text);
}

.tm-map-table__capacity {
    font-size: 9px;
    font-weight: 700;
    color: var(--tm-text-muted);
    background: #f4f5f6;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 4px;
}

.tm-map-table__time-status {
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
}

/* Statuses */

/* 1. Available (Default click style) */
.tm-map-table.available {
    cursor: pointer;
}

.tm-map-table.available:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--tm-accent) !important;
}

/* 2. Selected (Green theme) */
.tm-map-table.selected {
    border-color: #45b26b !important;
    box-shadow: 0 0 0 4px rgba(69, 178, 107, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    background: #f4fbf6 !important;
}

.tm-map-table.selected .tm-map-table__number {
    color: #45b26b;
}

.tm-map-table.selected .tm-map-table__time-status {
    color: #45b26b;
}

/* 3. Reserved (Yellow / Orange theme) */
.tm-map-table.reserved {
    border-color: #f39200 !important;
    background: #fffdf5 !important;
}

.tm-map-table.reserved .tm-map-table__time-status {
    color: #f39200;
}

/* 4. Occupied (Red theme) */
.tm-map-table.occupied {
    border-color: #ef466f !important;
    background: #fff5f7 !important;
    cursor: not-allowed;
}

.tm-map-table.occupied .tm-map-table__time-status {
    color: #ef466f;
}

.tm-map-table.occupied:hover {
    transform: none;
    box-shadow: none;
}

/* Seat dot positions */
.tm-table-seat {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 15;
    pointer-events: none;
    transition: background-color 0.25s ease;
}

/* Seat default color if available */
.tm-map-table.available .tm-table-seat {
    background-color: #e6e8ec;
}

.tm-map-table.selected .tm-table-seat {
    background-color: #45b26b;
}

.tm-map-table.reserved .tm-table-seat {
    background-color: #f39200;
}

.tm-map-table.occupied .tm-table-seat {
    background-color: #ef466f;
}

.tm-map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--tm-text-muted);
    font-size: 14px;
    text-align: center;
    font-weight: 500;
}