.availability-matrix-table.table thead th,
.availability-matrix-table.table tbody td {
    width: auto !important;
    padding: 4px 8px;
    white-space: nowrap;
}

.availability-matrix-table.table thead tr th {
    position: static !important;
}

/* Loading overlay shown over the table while data is being fetched/rendered */
.availability-matrix-body-wrapper {
    position: relative;
    min-height: 160px;
}

.availability-matrix-loader {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(1.5px);
    border-radius: 6px;
}

.availability-matrix-loader-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid rgba(102, 126, 234, 0.18);
    border-top-color: #667eea;
    border-right-color: #764ba2;
    animation: availability-matrix-spin 0.8s linear infinite;
}

@keyframes availability-matrix-spin {
    to {
        transform: rotate(360deg);
    }
}

.availability-matrix-loader-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    letter-spacing: 0.02em;
}

/* Distinguishable color palette for the table's column groups (HoReCa,
   Wholesale, Retail, ...). However many groups the API returns, they cycle
   through this palette - shared with the legend above the table. */
:root {
    --avail-color-0-bg: #d6e8fc;
    --avail-color-0-border: #3f7dd9;

    --avail-color-1-bg: #d7f2dc;
    --avail-color-1-border: #2f9e44;

    --avail-color-2-bg: #c9f1ec;
    --avail-color-2-border: #129c8d;

    --avail-color-3-bg: #e1d6fb;
    --avail-color-3-border: #7c4fd1;

    --avail-color-4-bg: #fde3cf;
    --avail-color-4-border: #e8590c;

    --avail-color-5-bg: #fbd6e5;
    --avail-color-5-border: #d6336c;

    /* structural columns/rows that aren't part of the group cycle */
    --avail-title-bg: #667eea;
    --avail-title-color: #ffffff;
    --avail-bucket-bg: #e9ecef;
    --avail-bucket-border: #6c757d;
    --avail-grandtot-bg: #fff3cd;
    --avail-grandtot-border: #e0a800;
}

/* Legend showing the group-name colors used in the table */
.availability-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding: 0.65rem 1rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.availability-matrix-legend .legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.availability-matrix-legend .legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Column-group background colors, applied to header, body and footer cells
   alike via the group-color-N class assigned in JS by group index. */
.availability-matrix-table thead th.group-color-0,
.availability-matrix-table tbody td.group-color-0,
.availability-matrix-table tfoot td.group-color-0,
.availability-matrix-legend .legend-swatch.group-color-0 {
    background-color: var(--avail-color-0-bg) !important;
}
.availability-matrix-table thead th.group-color-1,
.availability-matrix-table tbody td.group-color-1,
.availability-matrix-table tfoot td.group-color-1,
.availability-matrix-legend .legend-swatch.group-color-1 {
    background-color: var(--avail-color-1-bg) !important;
}
.availability-matrix-table thead th.group-color-2,
.availability-matrix-table tbody td.group-color-2,
.availability-matrix-table tfoot td.group-color-2,
.availability-matrix-legend .legend-swatch.group-color-2 {
    background-color: var(--avail-color-2-bg) !important;
}
.availability-matrix-table thead th.group-color-3,
.availability-matrix-table tbody td.group-color-3,
.availability-matrix-table tfoot td.group-color-3,
.availability-matrix-legend .legend-swatch.group-color-3 {
    background-color: var(--avail-color-3-bg) !important;
}
.availability-matrix-table thead th.group-color-4,
.availability-matrix-table tbody td.group-color-4,
.availability-matrix-table tfoot td.group-color-4,
.availability-matrix-legend .legend-swatch.group-color-4 {
    background-color: var(--avail-color-4-bg) !important;
}
.availability-matrix-table thead th.group-color-5,
.availability-matrix-table tbody td.group-color-5,
.availability-matrix-table tfoot td.group-color-5,
.availability-matrix-legend .legend-swatch.group-color-5 {
    background-color: var(--avail-color-5-bg) !important;
}

/* Colored left/right edges marking each group's boundary. The edge-left/
   edge-right classes are assigned in JS on the first/last cell of a group's
   column block. */
.availability-matrix-table thead th.group-color-0.edge-left,
.availability-matrix-table tbody td.group-color-0.edge-left,
.availability-matrix-table tfoot td.group-color-0.edge-left {
    border-left: 3px solid var(--avail-color-0-border) !important;
}
.availability-matrix-table thead th.group-color-0.edge-right,
.availability-matrix-table tbody td.group-color-0.edge-right,
.availability-matrix-table tfoot td.group-color-0.edge-right {
    border-right: 3px solid var(--avail-color-0-border) !important;
}
.availability-matrix-table thead th.group-color-1.edge-left,
.availability-matrix-table tbody td.group-color-1.edge-left,
.availability-matrix-table tfoot td.group-color-1.edge-left {
    border-left: 3px solid var(--avail-color-1-border) !important;
}
.availability-matrix-table thead th.group-color-1.edge-right,
.availability-matrix-table tbody td.group-color-1.edge-right,
.availability-matrix-table tfoot td.group-color-1.edge-right {
    border-right: 3px solid var(--avail-color-1-border) !important;
}
.availability-matrix-table thead th.group-color-2.edge-left,
.availability-matrix-table tbody td.group-color-2.edge-left,
.availability-matrix-table tfoot td.group-color-2.edge-left {
    border-left: 3px solid var(--avail-color-2-border) !important;
}
.availability-matrix-table thead th.group-color-2.edge-right,
.availability-matrix-table tbody td.group-color-2.edge-right,
.availability-matrix-table tfoot td.group-color-2.edge-right {
    border-right: 3px solid var(--avail-color-2-border) !important;
}
.availability-matrix-table thead th.group-color-3.edge-left,
.availability-matrix-table tbody td.group-color-3.edge-left,
.availability-matrix-table tfoot td.group-color-3.edge-left {
    border-left: 3px solid var(--avail-color-3-border) !important;
}
.availability-matrix-table thead th.group-color-3.edge-right,
.availability-matrix-table tbody td.group-color-3.edge-right,
.availability-matrix-table tfoot td.group-color-3.edge-right {
    border-right: 3px solid var(--avail-color-3-border) !important;
}
.availability-matrix-table thead th.group-color-4.edge-left,
.availability-matrix-table tbody td.group-color-4.edge-left,
.availability-matrix-table tfoot td.group-color-4.edge-left {
    border-left: 3px solid var(--avail-color-4-border) !important;
}
.availability-matrix-table thead th.group-color-4.edge-right,
.availability-matrix-table tbody td.group-color-4.edge-right,
.availability-matrix-table tfoot td.group-color-4.edge-right {
    border-right: 3px solid var(--avail-color-4-border) !important;
}
.availability-matrix-table thead th.group-color-5.edge-left,
.availability-matrix-table tbody td.group-color-5.edge-left,
.availability-matrix-table tfoot td.group-color-5.edge-left {
    border-left: 3px solid var(--avail-color-5-border) !important;
}
.availability-matrix-table thead th.group-color-5.edge-right,
.availability-matrix-table tbody td.group-color-5.edge-right,
.availability-matrix-table tfoot td.group-color-5.edge-right {
    border-right: 3px solid var(--avail-color-5-border) !important;
}

/* Report title banner row */
.availability-matrix-table thead th.availability-title-cell {
    background-color: var(--avail-title-bg) !important;
    color: var(--avail-title-color) !important;
}

/* Availability Bucket column (first column) */
.availability-matrix-table thead th.availability-bucket-col,
.availability-matrix-table tbody td.availability-bucket-col,
.availability-matrix-table tfoot td.availability-bucket-col,
.availability-matrix-legend .legend-swatch.availability-bucket-col {
    background-color: var(--avail-bucket-bg) !important;
}
.availability-matrix-table thead th.availability-bucket-col,
.availability-matrix-table tbody td.availability-bucket-col,
.availability-matrix-table tfoot td.availability-bucket-col {
    border-right: 3px solid var(--avail-bucket-border) !important;
}

/* Grand Tot column (last column) */
.availability-matrix-table thead th.availability-grandtot-col,
.availability-matrix-table tbody td.availability-grandtot-col,
.availability-matrix-table tfoot td.availability-grandtot-col,
.availability-matrix-legend .legend-swatch.availability-grandtot-col {
    background-color: var(--avail-grandtot-bg) !important;
}
.availability-matrix-table thead th.availability-grandtot-col,
.availability-matrix-table tbody td.availability-grandtot-col,
.availability-matrix-table tfoot td.availability-grandtot-col {
    border-left: 3px solid var(--avail-grandtot-border) !important;
}

/* Strong separator between the header and the data rows */
.availability-matrix-table thead tr:last-child th {
    border-bottom: 3px solid #495057 !important;
}