.brand-title {
    color: #b02a37 !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bi-spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* Override table-secondary variables for dark mode using Bootstrap's semantic colors */
[data-bs-theme="dark"] .table-secondary {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-secondary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-emphasis-color-rgb);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-tertiary-bg);
    --bs-table-hover-color: var(--bs-body-color);
}

[data-bs-theme="light"] .text-bg-inverted {
    background-color: var(--bs-dark);
    color: var(--bs-white);
}

[data-bs-theme="dark"] .text-bg-inverted {
    background-color: var(--bs-light);
    color: var(--bs-dark);
}

@media (min-width: 992px) and (hover: hover) {
    .navbar .dropdown-hover > .dropdown-menu {
        margin-top: 0;
    }

    .navbar .dropdown-hover .dropend > .dropdown-menu {
        top: calc(-1 * var(--bs-dropdown-padding-y));
        left: 100%;
        margin-top: 0;
        margin-left: 0;
    }
}

.plot-tooltip {
    z-index: 5;
    min-width: 14rem;
    max-width: 20rem;
    pointer-events: none;
}

.plot-tooltip-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 1rem;
}

.plot-routes {
    max-height: 20rem;
}

.plot-routes thead th {
    background-color: var(--bs-tertiary-bg);
}

.plot-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: -0.05rem;
}

.plot-stat {
    flex-basis: 7rem;
}

.plot-timeline {
    overflow: hidden;
}

.plot-timeline svg {
    display: block;
}

.plot-timeline-axis,
.plot-timeline-body {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.plot-timeline-axis {
    overflow: hidden;
    border-bottom: 1px solid var(--bs-border-color);
}

.plot-timeline-body {
    max-height: 24rem;
    overflow-y: auto;
}

.plot-timeline .tl-tick,
.plot-timeline .tl-label {
    font-size: 0.7rem;
    fill: var(--bs-secondary-color);
}

.plot-timeline .tl-label {
    fill: var(--bs-body-color);
    font-weight: 600;
}

.plot-timeline .tl-grid {
    stroke: var(--bs-border-color-translucent);
}

.plot-timeline .tl-lane {
    stroke: var(--bs-border-color);
}

.plot-timeline .tl-window {
    stroke: var(--bs-body-color);
    stroke-width: 2.5;
}

.plot-timeline .tl-window.tl-depot {
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.plot-timeline .tl-arrival {
    stroke: var(--bs-primary);
    stroke-width: 2;
    fill: none;
}

.plot-timeline .tl-arrival.tl-late {
    stroke: var(--bs-danger);
    stroke-width: 2.5;
}

.plot-timeline .tl-wait {
    stroke: var(--bs-danger);
    stroke-width: 1.75;
}

.plot-timeline .tl-wait-head {
    fill: var(--bs-danger);
}

.plot-timeline .tl-start {
    fill: var(--bs-body-bg);
    stroke: var(--bs-danger);
    stroke-width: 2;
}

.plot-timeline .tl-start.tl-late {
    fill: var(--bs-danger);
}

.plot-timeline .tl-travel {
    stroke: var(--bs-secondary-color);
    stroke-width: 1.25;
}

.plot-key {
    display: inline-block;
    width: 1.1rem;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.plot-key-window {
    border-top: 3px solid var(--bs-body-color);
}

.plot-key-arrival {
    width: auto;
    color: var(--bs-primary);
    font-weight: 700;
}

.plot-key-wait {
    border-top: 2px solid var(--bs-danger);
}

.plot-key-start {
    width: 0.6rem;
    height: 0.6rem;
    border: 2px solid var(--bs-danger);
    border-radius: 50%;
}

.plot-key-service {
    border-top: 5px solid var(--plot-route, var(--bs-secondary-color));
    border-radius: 3px;
}

.plot-key-travel {
    border-top: 1px solid var(--bs-secondary-color);
}

.plot-clock-time {
    min-width: 4.5rem;
    text-align: right;
}

.plot-timeline .tl-cursor {
    stroke: var(--plot-route, var(--bs-primary));
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}