:root {
    --lts-sidebar-width: 15rem;
    --lts-brand: #0d6efd;
}

body {
    background-color: #f5f6f8;
}

.lts-sidebar {
    width: var(--lts-sidebar-width);
    min-height: 100vh;
    background: #1f2933;
}

.lts-sidebar .nav-link {
    color: #cbd2d9;
    border-radius: 0.375rem;
}

.lts-sidebar .nav-link:hover,
.lts-sidebar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.lts-brand {
    color: #fff;
    letter-spacing: 0.08em;
}

/* On light public pages (tracking) the brand is coloured instead of white. */
.lts-brand-public {
    color: var(--lts-brand);
}

.lts-main {
    min-width: 0;
}

.login-card {
    max-width: 24rem;
}

@media (max-width: 767.98px) {
    .lts-sidebar {
        width: 100%;
        min-height: auto;
    }
}

/* --- Dispatch map ------------------------------------------------------------------------------------------- */
.lts-map { height: 28rem; border-radius: var(--bs-border-radius); }
.lts-map-plan { height: 24rem; }
.lts-info { min-width: 10rem; max-width: 16rem; font-size: .85rem; }
.lts-stop, .lts-rider {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .75rem; background: var(--lts-color, #0072B2);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.lts-stop { width: 26px; height: 26px; border-radius: 50%; }
.lts-stop-pickup { border-radius: 6px; }
.lts-stop-done { opacity: .45; }
.lts-stop-late { outline: 3px solid #dc3545; }
.lts-rider { width: 34px; height: 34px; border-radius: 50%; border-width: 3px; font-size: .8rem; }
.lts-rider-off { opacity: .5; filter: grayscale(.6); }
.lts-wait { display: block; width: 14px; height: 14px; background: #9aa0a6; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .5); }
.lts-wait-pickup { border-radius: 3px; }
.lts-wait-delivery { border-radius: 50%; }
.lts-wait-overdue { background: #d97706; }
.lts-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; }
.lts-legend-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }
.lts-legend-wait { background: #9aa0a6; }

/* --- Public tracking page ------------------------------------------------------------------------------------- */
.lts-map-tracking { height: 18rem; border-radius: 0; }
.lts-home { font-size: 1.6rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.lts-rider-tracking { font-size: 1.1rem; }
.lts-steps { display: flex; justify-content: space-between; gap: .25rem; margin: 0; padding: 0; position: relative; }
.lts-step { flex: 1; text-align: center; font-size: .8rem; color: var(--bs-secondary-color); position: relative; }
.lts-step:not(:last-child)::after { content: ''; position: absolute; top: .55rem; left: 50%; width: 100%; height: 2px; background: var(--bs-border-color); z-index: 0; }
.lts-step.done:not(:last-child)::after { background: var(--bs-primary); }
.lts-step-dot { position: relative; z-index: 1; display: block; width: 1.1rem; height: 1.1rem; margin: 0 auto .35rem; border-radius: 50%; background: var(--bs-body-bg); border: 2px solid var(--bs-border-color); }
.lts-step.done .lts-step-dot { background: var(--bs-primary); border-color: var(--bs-primary); }
.lts-step.current .lts-step-dot { box-shadow: 0 0 0 4px rgba(13, 110, 253, .25); }
.lts-step.done { color: var(--bs-body-color); }
.lts-step-label, .lts-step-time { display: block; }

/* Order wizard: service level cards */
.lts-choice { cursor: pointer; }
.lts-choice:has(input:checked) { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.lts-choice:has(input:disabled) { opacity: .6; cursor: not-allowed; }