:root {
    --lbs-primary: #7CB823;
    --lbs-primary-dark: #006935;
    --lbs-primary-light: #f9fbf7;
    --lbs-secondary: #006935;
    --lbs-accent: #FBEB02;
    --lbs-text: #4a4a4a;
    --lbs-border: #e0e0e0;
    --lbs-white: #ffffff;
    --lbs-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --lbs-shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Timeline Wrapper */
.lbs-program-wrapper {
    overflow: hidden;
    /* Contain floats/margins */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--lbs-white);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Timeline Header & Rows Width Logic */
.lbs-time-track,
.lbs-stage-track {
    flex-grow: 1;
    position: relative;
    /* 9.25 hours * 160px per hour = 1480px minimum width */
    min-width: 1500px;
    /* Add some padding on the right so the last label isn't flush against the edge */
    margin-right: 20px;
}

/* Timeline Scroll Area */
.lbs-timeline-scroll-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--lbs-primary) var(--lbs-border);
}

.lbs-timeline-scroll-area::-webkit-scrollbar {
    height: 10px;
}

.lbs-timeline-scroll-area::-webkit-scrollbar-track {
    background: var(--lbs-border);
    border-radius: 4px;
}

.lbs-timeline-scroll-area::-webkit-scrollbar-thumb {
    background-color: var(--lbs-primary);
    border-radius: 4px;
    border: 2px solid var(--lbs-border);
}

.lbs-timeline-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--lbs-primary-dark);
}

/* Filter */
.lbs-filter-bar {
    margin-bottom: 20px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.lbs-filter-bar select {
    padding: 10px 35px 10px 15px;
    border-radius: 4px;
    border: 2px solid var(--lbs-primary);
    background-color: var(--lbs-white);
    color: var(--lbs-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006935' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    line-height: 1.5;
    height: auto;
}

.lbs-filter-bar select:hover,
.lbs-filter-bar select:focus {
    border-color: var(--lbs-primary-dark);
    box-shadow: 0 0 0 3px rgba(124, 184, 35, 0.2);
}

.lbs-timeline-header,
.lbs-stage-row {
    display: flex;
    /* Width is determined by children min-width */
    width: fit-content;
    min-width: 100%;
}

/* Row Headers (Sticky Left) */
.lbs-header-label,
.lbs-stage-label {
    width: 160px;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    z-index: 20;
    /* Ensure on top of scrolling events */
    background: var(--lbs-white);
    border-right: 1px solid var(--lbs-border);
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-weight: 700;
}

.lbs-header-label {
    background: var(--lbs-secondary);
    color: var(--lbs-white);
    z-index: 30;
    /* Higher than stage labels */
}

.lbs-stage-label {
    border-bottom: 1px solid var(--lbs-border);
    border-left: 5px solid transparent;
    /* Defined inline */
    color: var(--lbs-secondary);
}

.lbs-timeline-header {
    background: var(--lbs-secondary);
    color: var(--lbs-white);
    border-bottom: 1px solid var(--lbs-border);
}

/* Time Markers */
.lbs-time-marker {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 0.8rem;
    padding-bottom: 5px;
    padding-left: 5px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    align-items: flex-end;
    font-weight: 500;
}

/* First marker starts at 0, don't center it */
.lbs-time-marker:first-child {
    transform: translateX(0);
}

/* Last marker ends at 100%, pull it back */
.lbs-time-marker:last-child {
    transform: translateX(-100%);
    padding-left: 0;
    padding-right: 5px;
    border-left: none;
    /* Remove left border of the text container if confusing, but usually the line is the marker */
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    /* Maybe align border to right? */
    /* actually, keep the border consistent? 
       The border is the tick mark. 
       If I move the text, the border moves with it? 
       The border is on .lbs-time-marker. 
       If I translate -100%, the whole div moves left. 
       left: 100% means the left edge of div is at end.
       translate -100% means the right edge of div is at end.
       This aligns the right edge of the marker box to the end of timeline.
       The border is on the left of that box. So the border will be at the end. Correct.
    */
}

.lbs-time-marker.half {
    font-size: 0.75rem;
    opacity: 0.7;
    height: 50%;
}

/* Stage Rows */
.lbs-stage-row {
    border-bottom: 1px solid var(--lbs-border);
    min-height: 100px;
}

.lbs-stage-row:last-child {
    border-bottom: none;
}

/* Events */
.lbs-timeline-event {
    position: absolute;
    top: 5px;
    bottom: 5px;
    background-color: var(--lbs-primary);
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lbs-timeline-event:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.lbs-event-inner {
    padding: 6px 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lbs-event-time {
    font-size: 0.7rem;
    opacity: 0.85;
    margin-bottom: 2px;
    line-height: 1.2;
}

.lbs-event-title {
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Responsive */
@media (max-width: 768px) {

    .lbs-header-label,
    .lbs-stage-label {
        width: 100px;
        font-size: 0.9rem;
    }
}

/* Past Overlay (Grey out & Current Time Line) */
.lbs-past-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* Dim past events slightly and make them grayscale */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
    /* The "Beautiful Line" */
    border-right: 2px solid #e74c3c;
    z-index: 15;
    /* Above events */
    pointer-events: none;
    /* Allow clicks to pass through */
}

/* Modal */
.lbs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lbs-modal-content {
    background: var(--lbs-white);
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    animation: lbsFadeIn 0.2s ease-out;
}

@keyframes lbsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lbs-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #333;
    cursor: pointer;
    z-index: 10;
}

.lbs-modal-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lbs-modal-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 6px;
    background-color: #f0f0f0;
}

.lbs-modal-title {
    margin: 0;
    font-size: 1.5rem;
    color: var(--lbs-secondary);
}

.lbs-modal-time {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--lbs-primary);
    margin: 0;
}

.lbs-modal-desc {
    color: var(--lbs-text);
    line-height: 1.6;
}

.lbs-modal-link.button {
    align-self: flex-start;
    background-color: var(--lbs-primary);
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 10px;
    border: none;
}

/* =========================================
   TV MODE STYLES
   ========================================= */
.lbs-tv-container {
    background-color: transparent;
    color: #333;
    padding: 20px;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    /* Force on top of everything */
    margin: 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: none;
}

.lbs-tv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--lbs-primary);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.lbs-tv-logo {
    font-size: 2rem;
    font-weight: 800;
    color: var(--lbs-secondary);
    /* Dark Green */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lbs-tv-stage-name {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--lbs-primary);
    /* Light Green */
}

.lbs-tv-clock {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--lbs-secondary);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.lbs-tv-content {
    display: flex;
    flex: 1;
    gap: 40px;
}

.lbs-tv-column {
    flex: 1;
}

.lbs-tv-now {
    flex: 1.5;
    background: #f9f9f9;
    /* Very light grey */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.lbs-tv-next {
    flex: 1;
}

.lbs-tv-section-title {
    color: var(--lbs-secondary);
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--lbs-primary);
    padding-bottom: 10px;
}

/* NOW CARD */
.lbs-tv-card-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lbs-tv-image {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.lbs-tv-time {
    font-size: 2rem;
    /* Larger */
    font-weight: bold;
    color: var(--lbs-primary);
    margin-bottom: 5px;
}

.lbs-tv-location-tag {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--lbs-secondary);
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
    background: #e6f0d9;
    /* Light green background */
    padding: 4px 10px;
    border-radius: 4px;
}

.lbs-tv-title {
    font-size: 2.8rem;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #000;
}

.lbs-tv-desc {
    font-size: 1.3rem;
    color: #555;
    line-height: 1.6;
}

/* NEXT LIST */
.lbs-tv-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lbs-tv-list-item {
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 4px solid var(--lbs-primary);
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.lbs-tv-list-time {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--lbs-secondary);
    margin-right: 15px;
    min-width: 80px;
}

.lbs-tv-list-info {
    display: flex;
    flex-direction: column;
}

.lbs-tv-list-location {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #999;
    font-weight: 600;
    margin-bottom: 1px;
    letter-spacing: 0.5px;
}

.lbs-tv-list-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
}

.lbs-tv-empty {
    text-align: center;
    padding: 40px;
    color: #999;
}