/* Joblog employee temporal components. Tabler owns cards/layout/buttons; this file only renders time-domain data. */
.jl-day-timeline {
    padding-top: 1.75rem;
}

.jl-day-timeline__ticks {
    position: relative;
    height: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--tblr-secondary-color);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.jl-day-timeline__tick {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.jl-day-timeline__tick:first-child {
    transform: none;
}

.jl-day-timeline__tick:last-child {
    transform: translateX(-100%);
}

.jl-day-timeline__track {
    position: relative;
    height: 2.75rem;
    overflow: visible;
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary, var(--tblr-bg-surface));
}

.jl-day-timeline__track--plan {
    height: 1rem;
}

.jl-day-timeline__segment {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
    border-radius: inherit;
}

.jl-day-timeline__segment--plan {
    border: 1px solid var(--jl-timeline-actual);
    background: color-mix(in srgb, var(--jl-timeline-actual) 28%, transparent);
}

.jl-day-timeline__segment--actual {
    background: var(--jl-presence-working);
}

.jl-day-timeline__segment--private_break {
    top: 0.35rem;
    bottom: 0.35rem;
    border-radius: calc(var(--tblr-border-radius) / 2);
    background: var(--jl-presence-break);
}

.jl-day-timeline__segment--business_break {
    top: 0.35rem;
    bottom: 0.35rem;
    border: 1px dashed var(--tblr-info);
    border-radius: calc(var(--tblr-border-radius) / 2);
    background: color-mix(in srgb, var(--tblr-info) 32%, transparent);
}

.jl-day-timeline__punch {
    position: absolute;
    top: -0.4rem;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--jl-timeline-actual);
    border-radius: 999px;
    background: var(--tblr-bg-surface);
    transform: translateX(-50%);
    box-shadow: 0 0 0 2px var(--tblr-bg-surface);
}

.jl-day-timeline__punch--unpaired {
    border-color: var(--tblr-warning);
    border-radius: 0.15rem;
    transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 575.98px) {
    .jl-day-timeline__track {
        height: 2.25rem;
    }

    .jl-day-timeline__ticks {
        font-size: 0.6875rem;
    }
}