/* Custom styles for TravelRequest app */
/* These extend the Enabel Bootstrap Theme */

/* Timeline component */
.timeline {
    list-style: none;
    margin-bottom: 0;
}

.timeline > * {
    position: relative;
    border-left: 5px dotted var(--bs-gray-500);
    padding: 0 2rem 2rem;
}

@media (min-width: 768px) {
    .timeline > * {
        max-width: 60%;
        margin: 0 auto;
    }
}

.timeline > *:first-child {
    padding-top: 2rem;
}

.timeline > .complete {
    border-left: 5px solid var(--bs-success);
}

.timeline > *::before {
    display: flex;
    align-items: last baseline;
    justify-content: center;
    position: absolute;
    left: 0;
    border: 5px solid var(--bs-gray-500);
    background: var(--bs-white);
    border-radius: 50%;
    transform: translateX(calc(-50% - 2px));
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--fa-style-family-classic, "Font Awesome 7 Free");
    font-weight: var(--fa-style, 900);
    color: var(--bs-success);
    content: "";
}

.timeline > .active::before {
    border-color: var(--bs-success);
    content: "\f252";
}

.timeline > .halted::before {
    border-color: var(--bs-success);
    background: var(--bs-success);
    color: var(--bs-white);
    content: "\f023";
}

.timeline > .complete::before {
    border-color: var(--bs-success);
    background: var(--bs-success);
    color: var(--bs-white);
    content: "\f00c";
}

/* Clickable table rows */
table[data-controller="clickable-row"] tr:has(a[data-clickable-row-anchor]):hover {
    cursor: pointer;
}

/* Dropzone styling */
.dropzone-container {
    border: 2px dashed var(--bs-card-border-color);
    border-radius: var(--bs-border-radius);
}