/* AvailabilityStrip.css - Per-entity availability strip organism */
/* Each strip is self-contained: entity header + seating rows + slot cells */

/* ========================================
   STRIP CONTAINER
   ======================================== */

.as-strip {
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.as-strip-closed {
    opacity: 0.6;
}

/* ========================================
   HEADER
   ======================================== */

.as-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-layer-3);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.as-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.as-entity-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-metadata {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.as-summary {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ========================================
   SEATINGS CONTAINER
   ======================================== */

.as-seatings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-3);
}

/* ========================================
   DAY SECTION (multi-day column layout)
   ======================================== */

.as-day-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.as-day-closed {
    opacity: 0.5;
}

.as-day-non-operating {
    opacity: 0.35;
}

.as-day-non-operating .as-day-header {
    border-bottom-style: dashed;
}

.as-day-blocked {
    background: var(--color-warning-light);
    border-radius: var(--border-radius-md);
    padding: var(--space-1);
}

.as-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.as-day-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.as-day-covers {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
}

.as-day-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.as-day-seatings {
    display: flex;
    flex-direction: column;
    gap: var(--space-1_5);
}

/* ========================================
   SEATING ROW
   ======================================== */

.as-seating-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.as-seating-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-1_5);
}

.as-seating-name {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-body);
}

.as-seating-hours {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

/* ========================================
   SLOT CELLS
   ======================================== */

.as-slot-cells {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.as-slot-cell {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-md);
    border: var(--border-width-1) solid var(--border-subtle);
    background: var(--bg-layer-4);
    transition: all var(--duration-200) var(--easing-out);
}

.as-cell-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.as-cell-value {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* ========================================
   CELL STATUS VARIANTS
   ======================================== */

.as-cell-available {
    background: var(--color-success-light);
    border-color: var(--color-success);
}

.as-cell-available .as-cell-value {
    color: var(--color-success);
}

.as-cell-limited {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
}

.as-cell-limited .as-cell-value {
    color: var(--color-warning);
}

.as-cell-buffer-only {
    background: var(--color-error-light);
    border-color: var(--color-error);
}

.as-cell-buffer-only .as-cell-value {
    color: var(--color-error);
}

.as-cell-full {
    background: var(--bg-layer-2);
    border-color: var(--border-default);
}

.as-cell-full .as-cell-value {
    color: var(--text-muted);
    text-decoration: line-through;
}

.as-cell-closed {
    background: var(--bg-layer-2);
    border-color: var(--border-default);
}

.as-cell-closed .as-cell-value {
    color: var(--text-muted);
    font-style: italic;
}

.as-cell-inactive {
    background: var(--bg-layer-2);
    border-color: var(--border-subtle);
}

.as-cell-inactive .as-cell-value {
    color: var(--text-muted);
}

/* ========================================
   INTERACTIVE CELLS
   ======================================== */

.as-cell-interactive {
    cursor: pointer;
}

.as-cell-interactive:hover {
    outline: var(--border-width-2) solid var(--color-primary);
    z-index: 1;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
    .as-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .as-slot-cell {
        padding: var(--space-1) var(--space-1_5);
    }
}