/*******************************************/
/* 2) CALENDAR SECTION                     */
/*******************************************/

:root {
    --amount-color-themes: 1;
    --color-theme-index: 0;
    /*--colors: red, blue, green, purple;*/ /* color array */
    /* General*/
    /*--darken: black;
    --lighten: white;*/
    /* Booking colors */
    /*--calendar-unavailable-bg-color: hsl(0deg 0% 87.84%);
    --calendar-unavailable-color: hsl(0deg 0% 61.96%);
    --calendar-semi-booked-bg-color: hsl(53.9deg 100% 88.43%);
    --calendar-semi-booked-color: hsl(37.65deg 100% 50%);
    --calendar-booked-bg-color: #ffcdd2;
    --calendar-booked-color: #d32f2f;
    --calendar-available-bg-color: hsl(186.92deg 72.22% 92.94%);
    --calendar-available-color: hsl(211.06deg 100% 50%);*/
    /* Calendar header Colors*/
    /*--calendar-button-color: #666;
    --calendar-text: #666;*/
    /* full-calendar override colors */
    /*--calendar-fc-calendar-button: hsl(211.06deg 100% 50%);
    --calendar-fc-calendar-button-bg: rgba(0, 123, 255, 0.1);
    --calendar-fc-calendar-today-slot-bg: rgba(255,220,40,.15);*/ /* Not used! */
    /*--calendar-fc-calendar-today-bg: #d1e0ff;
    --calendar-fc-calendar-today-color: #007bff;
    --calendar-fc-calendar-hover-bg: #d1e0ff;*/
    /* Time picker colors */
    /*--timepicker-text: #666;
    --timepicker-header-bg-color: #F8F9FA;
    --timepicker-timeline-bg-color: #fff;
    --timepicker-timeslot-hour-separator-color: #e5e5e5;
    --timepicker-timeslot-halfhour-separator-color: color-mix(in hsl, var(--timepicker-timeslot-hour-separator-color), var(--darken) 10%);*/
}

/*:root {
    --darken: white;
    --lighten: black;
}*/

/*ChatGPT solution*/

:root {
    /* Base Colors */
    /*--primary-color: #007bff;*/ /* Vibrant blue */
    /*--secondary-color: #666666;*/ /* Neutral gray for text */
    /*--accent-color: #ffd828;*/ /* Bright yellow */
    /*--accent-color-2: hsl(355deg,93%,71%);
    --background-color: #ffffff;*/ /* Light theme background */
    /*https://lea.verou.me/blog/2024/contrast-color/*/
    --l-threshold: 0.70;
    --l: clamp(0, (l / var(--l-threshold) - 1) * -infinity, 1);
    /*--surface-color: #f8f9fa;*/ /* Light surface elements */
    /* General */
    --darken: black;
    --lighten: white;
    /* Booking Colors */
    --calendar-unavailable-bg-color: var(--unavailable-color);
    --calendar-unavailable-color: oklch(from var(--calendar-unavailable-bg-color) var(--l) 0 h);
    --calendar-semi-booked-bg-color: var(--semi-booked-color);
    --calendar-semi-booked-color: oklch(from var(--calendar-semi-booked-bg-color) var(--l) 0 h);
    --calendar-booked-bg-color: var(--booked-color);
    --calendar-booked-color: oklch(from var(--calendar-booked-bg-color) var(--l) 0 h);
    --calendar-available-bg-color: var(--available-color);
    --calendar-available-color: oklch(from var(--calendar-available-bg-color) var(--l) 0 h);
    --timepicker-unavailable-bg-color: var(--calendar-unavailable-bg-color);
    --timepicker-unavailable-color: var(--calendar-unavailable-color);
    --timepicker-semi-booked-bg-color: var(--calendar-semi-booked-bg-color);
    --timepicker-semi-booked-color: var(--calendar-semi-booked-color);
    --timepicker-booked-color: var(--calendar-booked-color);
    --timepicker-booked-bg-color: var(--calendar-booked-bg-color);
    --timepicker-available-bg-color: var(--calendar-available-bg-color);
    --timepicker-available-color: var(--calendar-available-color);
    /* Calendar Header Colors */
    --calendar-button-color: var(--bs-primary);
    --calendar-text: var(--bs-body-color);
    /* Full-Calendar Override Colors */
    --calendar-fc-calendar-button: var(--bs-body-color);
    --calendar-fc-calendar-button-bg: var(--primary); /*rgba(0, 123, 255, 0.15)*/
    --calendar-fc-calendar-today-slot-bg: var(--bs-info);
    --calendar-fc-calendar-today-bg: rgb(from var(--darken) r g b / 15%);
    --calendar-fc-calendar-today-color: var(--bs-light);
    --calendar-fc-calendar-hover-bg: var(--bs-secondary);
    /* Time Picker Colors */
    --timepicker-text: var(--bs-body-color);
    --timepicker-header-bg-color: var(--bs-body-bg);
    --timepicker-timeline-bg-color: var(--bs-body-bg);
    --timepicker-timeslot-hour-separator-color: var(--bs-gray-500);
    --timepicker-timeslot-halfhour-separator-color: var(--bs-gray-200);
}

.calendar-header {
    padding: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-body {
    padding: 1rem;
    border-top: 1px solid var(--calendar-text);
    display: block; /* open by default */
    a, a:hover {
          text-decoration: none !important;
      }
}

.calendar-toggle-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--calendar-button-color);
    transition: transform 0.2s ease;
}

.calendar-reset-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.35rem;
    color: color-mix(in hsl, var(--calendar-text), var(--darken));
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.calendar-reset-btn:hover {
    color: var(--calendar-button-color);
    opacity: 1;
}

.calendar-reset-btn:focus-visible {
    outline: 2px solid color-mix(in hsl, var(--calendar-button-color), var(--lighten) 30%);
    outline-offset: 2px;
    border-radius: 4px;
}

    .calendar-toggle-btn:hover {
        color: color-mix(in hsl, var(--calendar-button-color), var(--darken));
    }

#calendar-header-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: color-mix(in hsl, var(--calendar-text), var(--darken));
}

/*******************************************/
/* 2.1) FULLCALENDAR OVERRIDES              */
/*******************************************/

/* Remove internal fc-borders */
.fc th, .fc td {
    border: none !important;
}

.fc-col-header-cell, .fc-scrollgrid-section-header, .fc-scrollgrid, .fc-scrollgrid-sync-inner, .fc-scrollgrid-liquid {
    border: none !important;
}


/* Reduce size between fc-header and calendar */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.3em !important;
    padding: 0.3em !important;
}

.fc .fc-toolbar-title {
    font-size: 0.9em !important;
    color: var(--calendar-text);
}

/* Make day header unclickable */
.fc-col-header-cell a {
    text-decoration: none !important;
    font-weight: 300 !important;
    cursor: default !important;
}

/* Button container styling - adjust size */
.fc-button-group {
    transform: scale(0.9) !important; /* Slightly scale down the entire group */
}

/* Today Button */
.fc-today-button {
    font-size: 0.75em !important;
    padding: 0.25em 0.5em !important;
    background: transparent !important;
    cursor: pointer !important; /* Changed from default */
    border: none !important;
    color: var(--calendar-fc-calendar-button) !important;
}

    .fc-today-button:hover {
        background-color: var(--calendar-fc-calendar-button-bg) !important;
        color: var(--calendar-fc-calendar-button) !important;
    }

/* Navigation Buttons (prev/next) */
.fc-prev-button,
.fc-next-button {
    background: transparent !important;
    border: none !important;
    color: var(--calendar-fc-calendar-button) /*#007bff*/ !important;
    padding: 0.25em 0.5em !important; /* Reduced padding */
    margin: 0 !important;
    font-size: 0.75em !important; /* Slightly smaller font */
}

/* Add rounded corners only to the outer edges */
.fc-prev-button {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.fc-next-button {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

    /* Hover state for navigation buttons */
    .fc-prev-button:hover,
    .fc-next-button:hover {
        background-color: var(--calendar-fc-calendar-button-bg) !important;
        color: var(--calendar-fc-calendar-button) !important;
    }

    /* Add subtle separator between buttons */
    .fc-next-button:before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background-color: color-mix(in hsl, var(--calendar-text), var(--darken)); /*rgba(0, 123, 255, 0.2);*/
    }

/* Remove horizontal events area spacing */
.fc-daygrid-day-events {
    /*margin-top: 0 !important;
    padding: 0 !important;*/
    width: 0;
}


.fc .fc-daygrid-day-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fc .fc-daygrid-day-number {
    width: 2em;
    height: 2em;
    font-size: 0.9em !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* Calendar States */

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--calendar-fc-calendar-today-bg) !important;
    color: var(--calendar-fc-calendar-today-color);
    font-weight: bold;
    box-shadow: inset 0 0 0 1px var(--darken)
}


.fc-daygrid-day-number.available {
    background-color: var(--calendar-available-bg-color) /*#e0f7fa*/ !important;
    color: var(--calendar-available-color) /*#007bff*/ !important;
}

.fc-daygrid-day-number.semi-booked {
    background-color: var(--calendar-semi-booked-bg-color) /*#fff9c4*/ !important;
    color: var(--calendar-semi-booked-color) /*#ffa000*/ !important;
}

.fc-daygrid-day-number.fully-booked {
    background-color: var(--calendar-booked-bg-color) /*#ffcdd2*/ !important;
    color: var(--calendar-booked-color) /*#d32f2f*/ !important;
}

.fc-daygrid-day-number.unavailable {
    background-color: var(--calendar-unavailable-bg-color) /*#e0e0e0*/ !important;
    color: var(--calendar-unavailable-color) /*#9e9e9e*/ !important;
}

/* Hover Effects */
.fc-daygrid-day:hover {
    background-color: var(--calendar-fc-calendar-hover-bg) !important;
    font-weight: bold;
}

    .fc-daygrid-day:hover .fc-daygrid-day-number {
        transform: scale(1.1);
    }

/*TODO: REFACTOR THIS SECTION! */
/*******************************************/
/* 3) TIMESLOTS SECTION                    */
/*******************************************/

.timeslots-cell {
    /* Padding is used to create the floating header and give space on the sides of the time cards. */
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#available-times {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.day-timeline {
    display: flex;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure full width */
}

.timeline-hours {
    width: 50px;
    border-right: 1px solid #ccc;
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
    text-align: right; /* Right align the time text */
}

.hour-marker {
    position: relative;
}


.timeline-content {
    flex: 1;
    position: relative;
    padding: 0 8px;
    min-width: 0; /* Allow content to shrink */
    background-color: transparent/*var(--timepicker-timeline-bg-color)*/;
}

.timeslot-block {
    position: absolute;
    left: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
    overflow: hidden; /* Prevent text overflow */
    white-space: nowrap; /* Keep text on one line */
    box-sizing: border-box;
}

    .timeslot-block:hover {
        /*transform: scale(0.99);*/
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--timeslot-selection-border-color), transparent 55%);
        z-index: 2;
    }

.zoom-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--timepicker-text);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    color: var(--timepicker-text);
    background-color: var(--timepicker-header-bg-color);
}

    .zoom-btn:hover {
        background: color-mix(in hsl, var(--timepicker-header-bg-color), var(--lighten)) /*#f0f0f0*/;
        border-color: color-mix(in hsl, var(--timepicker-header-bg-color), var(--darken)) /*#999*/;
    }

/* Timeslot Items */
.list-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/*.list-group-item.available-time {
    width: 100%;
    max-width: 400px;
    margin: 4px auto;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.95em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.list-group-item.available-time {
    background-color: var(--calendar-booked-bg-color)*/ /*#e1f5fe*/ /*;
    border: 1px solid #81d4fa !important;
    color: #0277bd;
}

    .list-group-item.available-time:hover:not(.booked):not(.unavailable) {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .list-group-item.available-time.booked {
        background-color: #ffebee;
        border-color: #ffcdd2;
        color: #c62828;
        cursor: default;
    }

    .list-group-item.available-time.semi-booked {
        background-color: #fff8e1;
        border-color: #ffe082;
        color: #f57f17;
    }

    .list-group-item.available-time.unavailable {
        background-color: #d3d3d3;
        border-color: #bdbdbd;
        color: #808080;
        cursor: not-allowed;
    }

.time-slot-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-slot-time {
    font-weight: 600;
    color: inherit;
}

.time-slot-status {
    font-size: 0.85em;
    font-weight: normal;
}

.time-slot-details {
    font-size: 0.8em;
    color: inherit;
    opacity: 0.8;
    text-align: left;
}*/

@media screen and (min-width:992px) {
    /* Timeslots section */
    .timeslots-cell {
        padding: 1rem;
        overflow-y: auto;
        height: 0;
        /*overflow: auto;*/
        flex-grow: 1;
        /*height: calc(100% - 350px);*/ /* Adjust based on calendar height */
    }
}


/*******************************************/
/* 4) JavaScript Overhaul                  */
/*******************************************/
html {
    --hour-height: 0;
}

.timeline-header {
    min-height: 48px;
    position: sticky;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background-color: var(--timepicker-header-bg-color) /*#F8F9FA*/;
    /*border-bottom: 1px solid #eee;*/
    width: 100%;
    color: var(--timepicker-text);
}

#selected-date {
    margin: 0;
    font-size: 0.9em;
    font-weight: normal;
}

.timeline-zoom-controls {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.timeline-hours {
    width: 60px;
    flex-shrink: 0;
    position: relative;
    background-color: transparent/*var(--timepicker-timeline-bg-color)*/;
}

.hour-marker {
    height: var(--hour-height); /* Replace `${this.hourHeight}px` with a CSS variable */
    position: relative;
    border-bottom: 1px solid var(--timepicker-timeslot-hour-separator-color) /*#e5e5e5*/; /* Hour line */
    box-sizing: border-box;
}

.hour-text {
    position: absolute;
    right: 8px;
    top: 2px;
    font-size: 0.85em;
    color: var(--timepicker-text);
}

.hour-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--timepicker-timeslot-hour-separator-color) /*#e5e5e5*/;
}

.half-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-bottom: 2px dotted var(--timepicker-timeslot-halfhour-separator-color) /*#ccc*/;
}


.timeslot-block {
    --timeslot-block-start-position: 0;
    --timeslot-duration: 0;
    --timeslot-background-color: transparant;
    --timeslot-selection-border-color: color-mix(in oklab, var(--timeslot-background-color), var(--darken) 65%);
    position: absolute;
    left: 0;
    right: 0;
    top: var(--timeslot-block-start-position); /* Replace `${startPosition}px` with a CSS variable or a fixed value */
    height: var(--timeslot-duration); /* Replace `${duration}px` with a CSS variable or a fixed value */
    background-color: var(--timeslot-background-color); /* Replace `backgroundColor` with a valid color value or variable */
    color: var(--timepicker-text);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    outline: 1px solid rgba(0, 0, 0, 0.12);
    /* overflow: auto; Uncomment if needed */
    box-sizing: border-box;
}

.timeslot-selected {
    border: 4px solid var(--timeslot-selection-border-color);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--timeslot-selection-border-color), transparent 35%),
        inset 0 0 12px color-mix(in oklab, var(--timeslot-selection-border-color), transparent 70%) !important;
    background-image: linear-gradient(135deg,
            color-mix(in srgb, var(--timeslot-background-color), var(--lighten) 8%),
            color-mix(in srgb, var(--timeslot-background-color), var(--darken) 6%));
    outline: none;
}

.timeslot-timerange {
    font-weight: bold;
    margin-bottom: 2px;
}

.selected-time-range-text {
    white-space: nowrap;
    margin: 0;
    align-self: center;
    font-size: 1rem; /* Adjust the size as needed */
    text-align: center;
    flex-grow: 1; /* Ensures it expands properly */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary-text-emphasis);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px color-mix(in srgb, var(--bs-body-bg), transparent 65%);
    padding: 0.15rem 0.65rem;
    border-radius: 12px;
    background: linear-gradient(120deg,
            color-mix(in srgb, var(--bs-primary), transparent 55%),
            color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 30%));
    border: 1px solid color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 60%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22),
        0 0 0 3px color-mix(in srgb, var(--bs-primary), transparent 72%),
        0 8px 18px color-mix(in srgb, var(--bs-primary), transparent 70%);
}

.selected-time-range-text:empty {
    display: none;
}

.room-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.available-header {
    color: var(--timepicker-text) /*#666*/;
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 2px;
}

.room {
    display: flex;
    align-items: center;
    padding: 2px 0;
}

.room-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.room-name {
    color: var(--timepicker-text) /*#666*/;
    font-size: 0.9em;
}

.booked-header {
    color: var(--timepicker-text) /* #666*/;
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 8px;
}

.unavailable-header {
    color: var(--timepicker-text);
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 8px;
}

.booking-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.booking-logo {
    height: 24px; /* Fixed height */
    width: 80px; /* Fixed width */
    object-fit: contain; /* Preserve aspect ratio */
    object-position: left; /* Align to left */
    display: none;
    min-width: 40px; /* Minimum width */
    max-width: 100px; /* Maximum width */
}

.band-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.band-name {
    font-weight: bold;
    color: var(--timepicker-text) /*#666*/;
    font-size: 0.9em;
}

.booked-room-room-label {
    color: var(--timepicker-text) /*#888*/;
    font-size: 0.85em;
}

.timeline {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Scrollbar fallback for browsers that don't support ::-webkit-scrollbar */
@supports (not selector(::-webkit-scrollbar)) {
    #timeslots-container {
        scrollbar-width: thin;
        scrollbar-color: var(--timepicker-timeslot-halfhour-separator-color) var(--timepicker-timeslot-hour-separator-color);
    }
}

/* Webkit scrollbar styles */

/* Set the width of the scrollbar */
*::-webkit-scrollbar {
    width: 7px !important;
}

/* Track styles */
*::-webkit-scrollbar-track {
    background: var(--timepicker-timeslot-hour-separator-color) !important;
    border-radius: 10px;
}

/* Thumb styles */
*::-webkit-scrollbar-thumb {
    background: var(--timepicker-timeslot-halfhour-separator-color) !important;
    border-radius: 10px;
    transition: background 0.2s ease-in-out; /* Smooth transition for background changes */
}

    /* Handle on hover */
    *::-webkit-scrollbar-thumb:hover {
        background: color-mix(in hsl, var(--timepicker-timeslot-halfhour-separator-color), var(--darken)) !important;
    }

.scroll-container {
    position: relative;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    height: auto;
    padding-top: 0.35rem;
}

.content-wrapper {
    position: relative;
    display: flex;
    min-height: 100%;
}

/* FULLCALENDAR DAYGRID: Transparent Empty Cells & Soft Overflow */
.fc-daygrid-day.fc-day-disabled {
    background-color: transparent !important;
    pointer-events: none;
    opacity: 0.4; /* faded, but still slightly visible */
}

/* Overflow days from previous/next month */
.fc-day-other .fc-daygrid-day-number {
    opacity: 0.7;
}

/* Past real dates (earlier than today) */
.fc-day-past .fc-daygrid-day-number {
    opacity: 0.5;
}

/* Current and future days normal */
.fc-day-future .fc-daygrid-day-number,
.fc-day-today .fc-daygrid-day-number {
    opacity: 1;
}

/* Optional: Nice hover effect on future days */
.fc-day-future:hover .fc-daygrid-day-number,
.fc-day-today:hover .fc-daygrid-day-number {
    text-decoration: underline;
}