/* 
    Site-wide CSS styles
    Anything that is only relevant to a specific page should be placed in a subdirectory and not this file
*/

html {
    font-size: 12px;
    position: relative;
    min-height: 100vh;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /* Fallbacks matter where Verdana is not installed, such as Marker.io's screenshot renderer,
       which otherwise draws every page in a default serif (RC-9803). */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* RC-8989: always a sticky-footer flex column so the header + main (+ optional
       footer) fill the viewport. Previously this only applied via body:has(.footer),
       so on every other page the shared <main>'s mb-4/h-100 left Bootstrap's white
       --bs-body-bg showing as a strip along the bottom. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* RC-9210: ?uiscale= display scale. site.js sets data-uiscale and --rt-ui-scale on
   <html> only when the URL carries a valid value, so without one nothing here matches.
   `zoom`, not transform: scale() (paints at the old size, so clicks land in the wrong
   place) and not a root font-size change (px sizes, images and map tiles would not
   follow). Unlike browser zoom, CSS zoom also multiplies vh lengths, so the 100vh
   minimums above are divided back down or the page gains a phantom scrollbar.
   @supports stops a browser without zoom applying the compensation on its own. */
@supports (zoom: 1) {
    html[data-uiscale] {
        zoom: var(--rt-ui-scale);
        min-height: calc(100vh / var(--rt-ui-scale));
    }

    html[data-uiscale] body {
        min-height: calc(100vh / var(--rt-ui-scale));
    }

    /* Bootstrap's full-viewport pieces, used on every page: below 1x the modal and
       offcanvas backdrops would dim only part of the screen, and Fleet Map's
       body.vh-100 would overflow above 1x. !important matches Bootstrap's utilities. */
    html[data-uiscale] .modal-backdrop,
    html[data-uiscale] .offcanvas-backdrop {
        width: calc(100vw / var(--rt-ui-scale));
        height: calc(100vh / var(--rt-ui-scale));
    }

    html[data-uiscale] .vh-100 {
        height: calc(100vh / var(--rt-ui-scale)) !important;
    }

    html[data-uiscale] .min-vh-100 {
        min-height: calc(100vh / var(--rt-ui-scale)) !important;
    }
}

/* Redtail Serif: a renamed, self-hosted subset of Merriweather (RC-9803). Why, the licence and how
   to rebuild it are in UnmanagedLib/redtail-serif/README.md. The unicode-range values must match
   SUBSETS in that README's build script; the browser fetches latin-ext only when a page needs it.
   The ?v= query makes the files cacheable for a year (Startup.GetStaticFileCacheControl): bump it
   whenever the font files are rebuilt. */
@font-face {
    font-family: "Redtail Serif";
    src: url("../UnmanagedLib/redtail-serif/RedtailSerif-latin.woff2?v=4.008-1") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Redtail Serif";
    src: url("../UnmanagedLib/redtail-serif/RedtailSerif-latin-ext.woff2?v=4.008-1") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

h1, h2, .card-title {
    font-family: "Redtail Serif", Georgia, serif;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2 !important;
    border-color: #1861ac !important;
}

main.login {
    /*background-image: url('../images/LoginCircles.png');*/
    background-repeat: no-repeat;
    background-size: 25%;
}

/* Fun fact refresh animation */
.spin-animation {
    animation: spin 1s linear infinite;
}

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

.cursor-pointer {
    cursor: pointer;
}

/* HEADER STYLES */
.nav-link, .home-tile-link {
    color: black !important;
    text-decoration: none !important;
}

/* Tighten the gap between the header nav icons. Bootstrap zeroes the horizontal
   .nav-link padding inside .navbar-nav, so the only spacer is the ms-3 (1rem)
   left-margin on each icon; shrink it to bring them closer. Targets both <i>
   (icon font) and the <svg> Font Awesome swaps in once its JS renders, and
   deliberately overrides the ms-3 utility here rather than editing it across
   the partial and all three layouts. */
.navbar-nav .nav-link > i,
.navbar-nav .nav-link > svg {
    margin-left: 0.1rem !important;
}

/* A flex item's automatic minimum width is its content's minimum width, so a growing
   column beside a fixed sidebar widens the page rather than shrinking its content. This
   class was already on the Alerts page's content column and the recent-visits panel with
   no rule behind it; it bit once the Alerts Summary laid its categories out side by side
   (RC-9260): three columns' minimum widths added up to more than the viewport. */
.min-width-0 {
    min-width: 0;
}

.topSection {
    display: flex;
    justify-content: space-between;
}

.topSection p, .topSection h1 {
    font-family: "Redtail Serif", Georgia, serif;
    font-weight: bold;
    font-size: 2em;
    color: #010101;
}
.topSection p #IncidentId {
    font-size: 0.5em;
}

/* Standard data table (RC-9446). Devices List is the definitive table styling; these rules are
   lifted verbatim from its page stylesheet so every data table reads at the same size. Add
   "rt-data-table" alongside Bootstrap's "table table-bordered table-striped" rather than copying
   the rules into a page stylesheet. See docs/architecture/user-interface.md. */
.rt-data-table {
    font-size: 0.8125rem;
}

/* The second selector exists for DataTables: datatables.min.css (loaded after this file) sets
   "table.dataTable>thead>tr>th:not(.sorting_disabled){padding-right:30px}", which outranks a plain
   class selector. Devices List's original ID selector beat it, so this must too, or the headers
   shift. */
.rt-data-table thead th,
table.table.dataTable.rt-data-table > thead > tr > th {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #64748b;
    padding: 0.5rem 0.75rem;
}

.rt-data-table tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.rt-data-table tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05) !important;
}

.rt-data-table .badge {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.25em 0.5em;
}

/* RC-8995: dashboard card "Arrange" (drag-to-reorder) mode. */
.dc-arrange-draggable {
    cursor: move;
}

.dc-arrange-dragging {
    opacity: 0.4;
}

/* END HEADER STYLES */
    /* RC-8989: main fills the space between the header and the bottom (or the
       footer, when present) so nothing exposes the page's base background.
       Supersedes the old body:has(.footer) special-case, now that the flex
       column lives on body itself. */
    body > main {
        flex: 1 0 auto;
    }

    .footer {
        width: 100%;
        background-color: #e9ecef;
    }

#toggle_pwd {
    cursor: pointer;
}

#password[type="password"] {
    letter-spacing: 0.2em;
}

/* Logo shadow */
.logo-shadow {
    -webkit-filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25)) drop-shadow(0 8px 16px rgba(0,0,0,0.10));
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25)) drop-shadow(0 8px 16px rgba(0,0,0,0.10));
    
}

/* Nav icon shadows (Font Awesome font or SVG) */
.nav-icon-shadow,
.navbar .nav-link > i.fa,
.navbar .nav-link > i.fad,
.navbar .nav-link > i.fa-duotone,
.navbar .nav-link > svg {
    -webkit-filter: drop-shadow(0 5px 5px rgba(0,0,0,0.25)) drop-shadow(0 10px 10px rgba(0,0,0,0.32));
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.25)) drop-shadow(0 10px 10px rgba(0,0,0,0.32));
    /* Fallback for icon fonts rendered as text */
    text-shadow: 0 5px 5px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.12);
    /* Explicitly disable motion */
    transition: none !important;
}

/* Ensure no hover/active transforms apply from elsewhere */
.navbar .nav-link > i,
.nav-icon-shadow {
    transform: none !important;
}

/* Highlight the nav icon for the page the user is currently on.
   Blue matches the homepage accent (#0d6efd). The colour is set on the anchor
   and its icon child: .nav-link's black !important would otherwise win, and
   Font Awesome replaces the <i> with an <svg> once its JS renders, so both are
   targeted. Applied via .nav-link-current in _LandingPageIcons.cshtml (landing
   pages) and the shared layouts (Home icon). */
.navbar .nav-link.nav-link-current,
.navbar .nav-link.nav-link-current > i,
.navbar .nav-link.nav-link-current > svg {
    color: #0d6efd !important;
}

/* Subtle blue rim-glow on the active icon so the highlight reads as "lit"
   without swallowing the icon detail. CSS filter is not additive across rules,
   so the base lift shadow (the two dark drop-shadows above) is repeated here
   with the coloured rim layered in front. Covers both <i> (icon font) and the
   <svg> Font Awesome swaps in once its JS renders. */
.navbar .nav-link.nav-link-current > i,
.navbar .nav-link.nav-link-current > svg {
    -webkit-filter: drop-shadow(0 0 4px rgba(13, 110, 253, 0.55)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.32));
    filter: drop-shadow(0 0 4px rgba(13, 110, 253, 0.55)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.32));
}

/* User icon wrapper — positions the initials overlay on top of the fa-user icon */
.user-icon-wrapper {
    position: relative;
    display: inline-block;
}

.user-initials-overlay {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    user-select: none;
}

/* Detect browser autofill so JS can enable the login button immediately */
@keyframes onAutoFillStart { from {} to {} }
input:-webkit-autofill { animation-name: onAutoFillStart; }

#Login {
    transition: all 0.2s ease-in-out;
}

    #Login:disabled {
        cursor: not-allowed;
    }

#loginSpinner {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Smooth transitions for spinner elements */
#loginButtonText,
#loginLoadingText,
#loginSpinner {
    transition: opacity 0.15s ease-in-out;
}

/* RC-9934: the Processing overlay's gauge sweeps its needle rather than spinning. site.js
   stacks eight gauge icons (min → max → min) in one grid cell and each is shown for one
   eighth of the cycle. Opacity, like fa-spin's transform, runs on the compositor, so the
   sweep keeps moving while the main thread is busy. Font Awesome swaps each <i> for an
   <svg>, so the frames are matched as children, not by element or icon class. */
.blocker-gauge-sweep {
    display: inline-grid;
    vertical-align: -0.125em;
}

    .blocker-gauge-sweep > * {
        grid-area: 1 / 1;
        vertical-align: 0;
        opacity: 0;
        animation: blocker-gauge-frame 1.6s step-end infinite;
    }

    /* Frame k shows during [k, k+1) eighths of the cycle; a negative delay starts it there. */
    .blocker-gauge-sweep > :nth-child(2) { animation-delay: -1.4s; }
    .blocker-gauge-sweep > :nth-child(3) { animation-delay: -1.2s; }
    .blocker-gauge-sweep > :nth-child(4) { animation-delay: -1.0s; }
    .blocker-gauge-sweep > :nth-child(5) { animation-delay: -0.8s; }
    .blocker-gauge-sweep > :nth-child(6) { animation-delay: -0.6s; }
    .blocker-gauge-sweep > :nth-child(7) { animation-delay: -0.4s; }
    .blocker-gauge-sweep > :nth-child(8) { animation-delay: -0.2s; }

@keyframes blocker-gauge-frame {
    0% { opacity: 1; }
    12.5%, 100% { opacity: 0; }
}

/* Reduced motion: a still gauge, as fa-spin stops for these users too. */
@media (prefers-reduced-motion: reduce) {
    .blocker-gauge-sweep > * {
        animation: none;
    }

        .blocker-gauge-sweep > :nth-child(4) {
            opacity: 1;
        }
}

/* Login card with layered shadow for depth */
.login-card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeSlideIn 0.5s ease-out;
}

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

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

.login-card .form-control {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    .login-card .form-control:focus {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(27, 110, 194, 0.15);
        border-color: #1b6ec2;
    }

.login-card .input-group-text {
    background-color: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.login-card .btn-primary {
    box-shadow: 0 2px 4px rgba(27, 110, 194, 0.3), 0 4px 8px rgba(27, 110, 194, 0.2);
}

    .login-card .btn-primary:active:not(:disabled) {
        box-shadow: 0 1px 2px rgba(27, 110, 194, 0.3);
    }

    .login-card .btn-primary:disabled {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

.login-card h2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
}

main.login {
    background: linear-gradient(180deg, #e8e8e8 0%, #f8f8f8 100%);
}

/* Search History Dropdown */
.search-history-dropdown {
    position: absolute;
    top: 100%;
    /* Width is deliberately independent of the search box. The form is .input-group.w-25,
       which is far too narrow for an entry's title, type label and destination buttons.
       Centred on the form (itself mx-auto centred in the navbar) so the panel grows
       symmetrically and stays on screen; min-width keeps it at least as wide as the box. */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 100%;
    max-width: min(40rem, calc(100vw - 2rem));
    margin-top: 0.125rem;
    z-index: 1050;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    overflow-y: visible;
}

.search-history-header {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.search-history-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-history-item {
    border-bottom: 1px solid #f0f0f0;
}

.search-history-item:last-child {
    border-bottom: none;
}

.search-history-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: #212529;
    transition: background-color 0.15s ease-in-out;
}

.search-history-link:hover {
    background-color: #e9ecef;
    color: #212529;
    text-decoration: none;
}

.search-history-item-type {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    margin-right: 0.5rem;
    white-space: nowrap;
    min-width: 50px;
}

.search-history-item-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}

/* Entity entries (Device/Policy): primary link plus per-destination affordances
   (Details / Activity / Timeline / Map) so the user can re-open any page for the entity. */
.search-history-item--entity {
    display: flex;
    align-items: center;
}

.search-history-item--entity .search-history-link {
    flex: 1;
    min-width: 0; /* allow the title to ellipsis inside the flex row */
}

.search-history-destinations {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.75rem;
    flex-shrink: 0;
}

/* Square icon buttons; colours come from the standard .btn-primary style so
   they match the action buttons on the search results page (incl. whitelabel). */
.search-history-dest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 0.8rem;
}

/* Teardrop Pin Icon (used in search results and device overview) */
.search-pin-container {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 36px;
    vertical-align: middle;
    margin-right: 4px;
}

.search-pin-svg {
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.search-pin-icon {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #fff;
}

/* Recent Fleets Pills */
#recentFleetsContainer {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
}

#recentFleetsContainer:empty {
    display: none;
}

.recent-fleet-pill {
    font-size: 0.78rem;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: #495057;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}

.recent-fleet-pill:hover {
    background-color: #e2e6ea;
    border-color: #adb5bd;
}

.recent-fleet-pill.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* Custom brand icons for device types */
.icon-ford-logo {
    display: inline-block;
    width: 1.25em;
    height: 1em;
    background: url('/images/branding/ford-logo.svg') no-repeat center / contain;
    vertical-align: -0.125em;
}

/* ============================================================================
   Heatmap density scale (RC-8853, shared by RC-9278)
   The legend bar for the map heatmaps on Fleet Map, Device Details and Device
   Activity. MUST stay in step with HEATMAP_GRADIENT in
   js/Shared/heatmap-appearance.js (transparent → green (low) → yellow →
   orange → red (high)).

   The stops carry the same colours AND the same alphas as the palette, so the
   legend shows the real contrast the map paints rather than a saturated
   idealisation of it. Positions are the palette's rescaled from its first
   visible stop (0.10) to 1.00, since a legend that starts fully transparent
   reads as broken.
   ============================================================================ */
.heatmap-density-gradient {
    height: 10px;
    background: linear-gradient(to right,
        rgba(0, 210, 90, 0.50) 0%,
        rgba(130, 220, 0, 0.68) 20%,
        rgba(255, 230, 0, 0.80) 42%,
        rgba(255, 170, 0, 0.88) 62%,
        rgba(255, 90, 0, 0.95) 82%,
        rgba(220, 0, 0, 1.00) 100%);
}
/* Reference-camera pins share DA's blue appearance across maps. The absolute badge
   does not change the pin's bounding box, keeping its tip on the camera location. */
.speed-camera-marker { position: relative; display: inline-flex; cursor: pointer; }
.speed-camera-limit {
    position: absolute;
    left: 50%;
    /* Join the badge visually to the pin without covering its camera glyph. */
    bottom: calc(100% - 4px);
    z-index: 1;
    transform: translateX(-50%);
    padding: 2px 4px;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    color: #1e40af;
    background: #fff;
    box-shadow: 0 1px 3px #0004;
    font: 600 11px/1.2 system-ui, sans-serif;
    white-space: nowrap;
}
[data-bs-theme="dark"] .speed-camera-limit { background: #172554; color: #dbeafe; border-color: #93c5fd; }

/* Toggle buttons sit slightly raised when off; pressed/selected states are recessed.
   Includes ARIA toggles, Bootstrap button toggles and checkbox/radio button labels. */
.btn:not(.btn-link)[aria-pressed],
.btn[data-bs-toggle="button"],
.btn-check + .btn,
.recent-fleet-pill {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    background-image: none;
}
.btn:not(.btn-link)[aria-pressed="true"],
.btn[data-bs-toggle="button"].active,
.btn-check:checked + .btn,
.recent-fleet-pill[aria-pressed="true"] {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.16);
    background-image: linear-gradient(rgba(0, 0, 0, 0.12), transparent);
}
/* Inset shadows must not obscure keyboard focus, including hidden input labels. */
.btn:not(.btn-link)[aria-pressed]:focus-visible,
.btn[data-bs-toggle="button"]:focus-visible,
.btn-check:focus-visible + .btn,
.recent-fleet-pill:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* RC-9508: a reminder's Email / SMS / Push alert toggles shown read-only (no permission to change
   alert subscriptions). aria-disabled rather than disabled, so the explaining tooltip still shows. */
.reminder-alert-toggle-readonly {
    opacity: 0.65;
    cursor: not-allowed;
}

/* RC-9508: the toggle whose save is in flight shows a spinner (as the Alerts page's channel toggles
   do); keep it fully opaque rather than Bootstrap's faded disabled look, so the spinner reads clearly. */
.reminder-alert-toggle.reminder-alert-toggle-pending:disabled {
    opacity: 1;
    cursor: progress;
}

/* RC-9508: the "Your reminder alerts" panel lines up each reminder type's Email / SMS / Push switches. */
.reminder-alerts-panel-label {
    min-width: 8rem;
}

/* RC-9606: the Add reminder dialog's vehicle list, sized like Device Details' device selector. */
.reminder-vehicle-results {
    max-height: 18rem;
    overflow-y: auto;
}

/* RC-9516: the reminder rows' alert history disclosure (Device Details and the Reminders page). */
.reminder-history-toggle-cell {
    width: 2.5rem;
}
.reminder-history-row > td {
    background-color: var(--bs-tertiary-bg);
}
.reminder-history-table {
    --bs-table-bg: transparent;
}

/* The shared fleet picker and remote device picker use the same compact menu scale. */
:is(.compact-fleet-selector, .device-navigation-selectors) .dropdown-menu {
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-padding-y: .25rem;
    font-size: .875rem;
}
:is(.compact-fleet-selector, .device-navigation-selectors) .dropdown-item {
    font-size: .875rem;
    line-height: 1.5;
    padding: .25rem .75rem;
}
:is(.compact-fleet-selector, .device-navigation-selectors) .bs-searchbox,
:is(.compact-fleet-selector, .device-navigation-selectors) .device-selector-search { padding: .25rem .5rem; }
:is(.compact-fleet-selector, .device-navigation-selectors) .bs-searchbox .form-control,
:is(.compact-fleet-selector, .device-navigation-selectors) #deviceSelectorSearch {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: var(--bs-border-radius-sm);
}

/* Page loading indicator while the next page loads (RC-9608, js/Shared/page-loading.js). */
.page-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000; /* above the navbar, dropdowns and modals */
    overflow: hidden;
    pointer-events: none;
    background-color: rgba(var(--bs-primary-rgb), .2);
}
.page-loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background-color: var(--bs-primary);
    animation: page-loading-slide 1.2s ease-in-out infinite;
}
@keyframes page-loading-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
    .page-loading-bar::before { width: 100%; animation: none; }
}
html.page-loading, html.page-loading * { cursor: progress !important; }

/* Keep the inferred-yaw disclaimer readable on desktop and narrow screens. */
.inferred-yaw-tooltip .tooltip-inner {
    max-width: min(360px, calc(100vw - 24px));
    text-align: left;
}