/*
 * Base styling for the JetEngine Artist Timetable v9.
 *
 * This stylesheet contains minimal defaults to ensure that multiple timetable
 * widgets do not interfere with each other and that horizontal scrolling is
 * available when the schedule width exceeds the viewport. Vertical scrolling
 * is disabled to prevent the bottom time labels from being clipped.
 */

.jeat9x-wrapper,
.jeat10x-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    position: relative;
}

/* Ensure the time header sticks to the top in vertical orientation */
.jeat9x-wrapper .jeat9x-time-header,
.jeat10x-wrapper .jeat10x-time-header {
    display: flex;
    align-items: flex-end;
}

/* Basic row styling; background color can be overridden via Elementor */
/* Row base styling: add bottom border for grid lines; colour is inherited and can be customized via Elementor */
.jeat9x-wrapper .jeat9x-row,
.jeat10x-wrapper .jeat10x-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid;
    position: relative;
}

/* Column styling for horizontal orientation; background color can be overridden */
.jeat9x-wrapper .jeat9x-stage-col,
.jeat10x-wrapper .jeat10x-stage-col {
    position: relative;
    flex: 1;
    border-right: 1px solid;
}

/* Stage header has left border to separate from time column */
.jeat9x-wrapper .jeat9x-stage-header,
.jeat10x-wrapper .jeat10x-stage-header {
    border-left: 1px solid;
}

/* Event block default styles; colors are controlled via Elementor */
.jeat9x-wrapper .jeat9x-event,
.jeat10x-wrapper .jeat10x-event {
    background-color: #63a4e4;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #63a4e4;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    min-width: 40px;
}

.jeat9x-wrapper .jeat9x-event-title,
.jeat10x-wrapper .jeat10x-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.jeat9x-wrapper .jeat9x-event-time,
.jeat10x-wrapper .jeat10x-event-time {
    font-size: 10px;
    opacity: 0.8;
}

/* Lines: ensure width/height of grid lines set; colour will be controlled via Elementor */
/* Grid line dimensions; colour will be provided via Elementor style controls */
/* Grid line dimensions; shared for v9 and v10 wrappers */
.jeat9x-wrapper .jeat9x-vertical-line,
.jeat9x-wrapper .jeat9x-track-vertical-line,
.jeat10x-wrapper .jeat10x-vertical-line,
.jeat10x-wrapper .jeat10x-track-vertical-line {
    width: 1px;
}
.jeat9x-wrapper .jeat9x-horizontal-line,
.jeat10x-wrapper .jeat10x-horizontal-line {
    height: 1px;
}

.jeat9x-wrapper .jeat9x-time-row-label,
.jeat10x-wrapper .jeat10x-time-row-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}