/* Extracted from index.html */
body {
    font-family: 'Inter', sans-serif;
}
.map-container {
    position: relative;
    width: 100%;
    max-width: 1024px; /* Максимальная ширина карты */
    margin: auto;
    user-select: none; /* Запретить выделение текста при перетаскивании */
}
.map-container img {
    width: 100%;
    height: auto;
    display: block;
}
.seat {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
}
.seat.admin-mode {
    cursor: grab;
}
.seat.dragging {
    cursor: grabbing;
    z-index: 10;
}
.seat.available {
    background-color: rgba(76, 175, 80, 0.7);
    border-color: #ffffff;
}
.seat.available:hover {
    transform: translate(-50%, -50%) scale(1.2);
    background-color: rgba(67, 160, 71, 0.9);
}
.seat.booked {
    background-color: rgba(244, 67, 54, 0.7);
    border-color: #ffffff;
    cursor: not-allowed;
}
/* Fixed seats (reserved for specific users) */
.seat.fixed {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background-color: #6b7280; /* gray fallback */
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}
.seat.fixed img {
    /* Use flexbox centering from the parent .seat so image aligns like other seats */
    width: 88%;
    height: 88%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.seat-fixed-initials {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: white;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
/* Стили для таблицы расписания */
.schedule-table-container {
    overflow-x: auto; /* Горизонтальный скролл на маленьких экранах */
}

/* Highlight for selected schedule cells (multi-date selection) */
td.bg-green-200 {
    background-color: rgba(153, 230, 123, 0.6) !important; /* soft green */
}

.ring-2 {
    box-shadow: 0 0 0 2px rgba(34,197,94,0.25) inset; /* subtle inner ring */
}

.ring-green-500 {
    outline: 2px solid rgba(34,197,94,0.06);
}

/* Popover styles */
#seat-popover {
    pointer-events: none;
}

#seat-popover .popover-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

/* Popover positioning classes */
.popover-top {
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.popover-top .popover-arrow {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}

.popover-bottom {
    transform: translateX(-50%);
    margin-top: 8px;
}

/* Floating Book button: center horizontally and move up by 50px */
#floating-book-btn {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    /* base bottom (bottom-6) is 1.5rem; add 50px to move it up */
    bottom: calc(1.5rem + 50px) !important;
}

.popover-bottom .popover-arrow {
    top: -4px;
    left: 50%;
    margin-left: -4px;
}

.popover-left {
    transform: translateY(-50%);
    margin-right: 8px;
}

.popover-left .popover-arrow {
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

.popover-right {
    transform: translateY(-50%);
    margin-left: 8px;
}

.popover-right .popover-arrow {
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

/* Week visual separation */
/* Alternate week backgrounds: odd/even.
   Do not override explicit utility/selection backgrounds (blue/red/green). */
th.week-index-0:not(.bg-blue-500):not(.text-white):not(.week-sep),
td.week-index-0:not(.bg-blue-50):not(.bg-red-100):not(.bg-green-200) {
    background-color: rgba(249, 250, 251, 0.6); /* very light gray */
}
th.week-index-1:not(.bg-blue-500):not(.text-white):not(.week-sep),
td.week-index-1:not(.bg-blue-50):not(.bg-red-100):not(.bg-green-200) {
    background-color: rgba(255, 255, 255, 0.9); /* mostly white */
}

/* Vertical separator between weeks: on header and cell */
.week-sep {
    border-right: 3px solid rgba(156, 163, 175, 0.3); /* soft gray line */
}
.week-sep-td {
    border-right: 3px solid rgba(156, 163, 175, 0.07);
}

/* Clear selected-date visuals for headers and cells */
th.selected-date {
    background-color: rgba(37, 99, 235, 1) !important; /* Tailwind blue-600 */
    color: white !important;
}
/* The column/date highlight should not override booked or multi-date selected cells.
   Use :not() so booked (.booked-cell) and selected (.bg-green-200) cells keep their colors. */
td.selected-date:not(.booked-cell):not(.bg-green-200) {
    /* Intentionally avoid !important so .booked-cell/.bg-green-200 (which use !important) prevail */
    background-color: rgba(226, 232, 240, 1);
}
/* Booked cells styling */
.booked-cell {
    background-color: rgba(254, 226, 226, 1) !important; /* Tailwind red-100 stronger */
    color: rgba(153, 27, 27, 1) !important; /* Tailwind red-700 */
    font-weight: 600;
    font-size: 0.85rem;
}

/* Remove ring/border visual from selected schedule cells */
td.bg-green-200.ring-2, td.bg-green-200.ring-green-500, td.selected-date.ring-2 {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}