/* Base space styling */
.space {
    position: relative;
    width: 60px;
    height: 40px;
    margin: 5px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    cursor: default;
}

/* Clickable states */
.space.clickable {
    cursor: pointer;
}

/* Selected state */
.space.selected {
    background: #ffe08a;
    border-width: 3px;
}

/* Four-state borders (Option B) */
.space.available {
    border: 2px solid #28a745; /* green */
}

.space.blocked {
    border: 2px solid #007bff; /* blue */
}

.space.reserved {
    border: 2px solid #6c757d; /* gray */
}

.space.sold {
    border: 2px solid #6c757d; /* gray */
    opacity: 0.6;
}

/* Reserved = lock icon */
.space.reserved {
    background-image: url('../icons/lock.svg');
    background-repeat: no-repeat;
    background-position: center right 6px;
    background-size: 16px;
}

/* Sold = X icon */
.space.sold {
    background-image: url('../icons/x.svg');
    background-repeat: no-repeat;
    background-position: center right 6px;
    background-size: 16px;
}

/* Tooltip box ABOVE the space */
.space:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -34px;          /* moved above */
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

/* Tooltip triangle BELOW the tooltip (pointing down) */
.space:hover::before {
    content: "";
    position: absolute;
    top: -8px;           /* sits under tooltip */
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px; /* flipped triangle */
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    z-index: 9;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

/* Color-matched tooltip backgrounds */
.space.available:hover::after { background: #28a745; }
.space.blocked:hover::after   { background: #007bff; }
.space.reserved:hover::after  { background: #6c757d; }
.space.sold:hover::after      { background: #5a6268; }

/* Color-matched triangle tips */
.space.available:hover::before { border-color: transparent transparent #28a745 transparent; }
.space.blocked:hover::before   { border-color: transparent transparent #007bff transparent; }
.space.reserved:hover::before  { border-color: transparent transparent #6c757d transparent; }
.space.sold:hover::before      { border-color: transparent transparent #5a6268 transparent; }

/* Fade-in animation */
.space::after,
.space::before {
    opacity: 0;
}

.space:hover::after,
.space:hover::before {
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

/* Grid layout */
.space-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}