.availability-block-editor {
    padding: 20px;
}

.availability-block {
    margin-top: 20px;
}

.availability-block table {
    width: 100%;
    border-collapse: collapse;
}

.availability-block th, .availability-block td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.availability-block th {
    background-color: #f4f4f4;
}
/* Make the table scrollable horizontally */
.availability-table-wrapper {
    max-height: 400px;  /* Set a height for the table wrapper */
    overflow-y: auto;   /* Allow vertical scrolling */
    overflow-x: auto;   /* Allow horizontal scrolling */
    width: 100%;
}

/* Ensure table is as wide as its content */
.availability-table {
    width: auto;        /* Remove the fixed width */
    border-collapse: collapse;
    table-layout: auto; /* Let the table expand based on content */
    position: absolute; /* For tooltip positioning */
    left: 15px;
}

/* Table header and cells */
.availability-table th, .availability-table td {
    padding: 2px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 14px;
}

/* Fixed user column */
.availability-table th:first-child,
.availability-table td:first-child {
    position: sticky;
    left: 0;
    background-color: #fff; /* Make sure it has a white background */
    z-index: 2; /* Make sure the column is above other table rows */
    width: 150px;
}

/* User name column font size adjustment */
.availability-table td:first-child {
    font-size: 12px; /* Smaller text for user names */
}

/* Optional: Style for the header row */
.availability-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Mouse over comment tooltip */
.availability-table td .comment-tooltip {
    display: none;
    color: #333;

}

.availability-table td:hover .comment-tooltip {
    display: block;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 5px;
    z-index: 3;
    font-size: 14px;
    width: 150px; /* Control the width of the tooltip */
    max-width: 200px;
    word-wrap: break-word;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.availability-table td {
    position: relative;  /* Positioning for tooltip */
    min-width: 140px;
}

/* Availability status color codes */
.available {
    background-color: #28a745; /* Green for available */
    color: white;
}

.not-available {
    background-color: #dc3545; /* Red for not available */
    color: white;
}

.partly-available {
    background-color: #fd7e14; /* Orange for partly available */
    color: white;
}

.group-title-row {
    background-color: #f7f7f7;
    font-weight: bold;
}

.group-title-icon {
    display: inline;
    align-items: center;
}

.group-title-icon i {
    margin-top: 0px;
}

/* Ensure the group title is aligned left */
.group-title {
    text-align: left !important;
    padding: 5px !important;
}
/* Style for the summary pills */
.availability-summary {
    padding-left: 5px !important; /* Ensure left padding for the summary */
    font-size: 12px;
    text-align: left; /* Ensure the text is left-aligned */
}

/* Style for each status item (including badge) */
.availability-summary .status {
    display: flex; /* Use flexbox to split the width */
    width: 100%; /* Take full width of the column */
    justify-content: space-between; /* Ensure the text and badge are separated */
    align-items: center; /* Align items vertically */
    margin-right: 15px;
}
/* add border to all classes except the last*/
.availability-summary .status:not(:last-child) {
    border-bottom: 1px solid #ddd; /* Add a right border to all but the last item */
}   

/* Text for status items */
.availability-summary .status .status-text {
    margin-right: 0px; /* Space between text and the circle */
    display: inline-block;
    text-align: left; /* Align text to the left */
    background: none; /* Remove background for the text */
    color: inherit; /* Ensure text color is inherited from its parent */
}

/* Badge for the number (circle) */
.availability-summary .status .status-number {
    padding: 2px 4px; /* Padding inside the circle */
    font-size: 12px; /* Adjust number size */
    min-width: 25px;
    text-align: center;
    display: inline-block;
    flex: 0 0 20%; /* Takes up 20% of the space */
    text-align: center; /* Center text in the badge */
    margin-left: 10px; /* Space between the text and the badge */
}

/* Colors for each status */
.availability-summary .available .status-number {
    background-color: #28a745; /* Green for available */
}

.availability-summary .partly-available .status-number {
    background-color: #ffc107; /* Yellow for partly available */
}

.availability-summary .not-available .status-number {
    background-color: #dc3545; /* Red for not available */
}