/* ============================================================
   50-vx-features.css
   ------------------------------------------------------------
   Styling for one screen or one feature only: the vx-tab-toolbar
   used on manager pages, the Travel Manager strips, flight cards
   and their timeline, the flight filter sidebar (stops, times,
   duration, price, airlines), the vx-datepicker popup and the
   flight searchbar.

   PUT A RULE HERE IF
     it only ever appears on one screen, so that retiring that
     screen would mean deleting the rule with it.

   DO NOT PUT HERE
     anything a second page could reuse - promote it into
     40-vx-components.css instead, and give it a neutral name

   RULES FOR THIS FILE
     - vx- prefix, BEM naming: block__element--modifier
     - no #MainContent_* selectors
     - no !important
     - keep each feature's rules together under a labelled
       banner, so a feature can be lifted out whole later
   ============================================================ */

   72. VX TAB TOOLBAR — manager pages (TravelManager, etc.)
   ============================================================ */

/* Tables Outer wrapper */
.vx-tab-toolbar {
    display: flex;
    align-items: center;
    padding: 28px 0px 10px 0px;
    background: transparent;
    gap: 12px;
}

/* Left side: Add button + search */
.vx-tab-toolbar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

/* Right side: Print / Save action buttons */
.vx-tab-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Search wrapper inside toolbar — pill containing textbox only */
.vx-tab-toolbar__search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #b8b8b9;
    border-radius: 8px;
    height: 38px;
    padding: 0 10px;
    max-width: 320px;
}

/* Hidden original search ImageButton — keep for postback, invisible */
.vx-search-icon {
    display: none !important;
}

/* Text input inside search pill */
.vx-searchbar {
    border: none !important;
    outline: none !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: "lato", sans-serif !important;
    font-size: 13px !important;
    color: #111827 !important;
    background: transparent !important;
    min-width: 180px;
    box-shadow: none !important;
    line-height: 38px !important;
}

    .vx-searchbar::placeholder {
        color: #9ca3af !important;
        font-style: normal !important;
    }

/* Search trigger button — styled like vx-btn-add--green but steel-blue brand colour */
.vx-btn-search {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #E8EEF6; /* light steel-blue tint — brand #4882B3 at ~10% */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #4882B3; /* Steel Blue — primary action colour */
    border: #4882b385 1px solid; /* Steel Blue — about 50% transparancy */
    transition: background 0.15s ease;
}

    .vx-btn-search:hover {
        background: #d2e0f0;
        color: #295171;
    }

/* Edit button — amber/orange tint, conveys "modify existing" */
.vx-btn-edit {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #FFF3E0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #D97706;
    border: #d9770685 1px solid;
    transition: background 0.15s ease, color 0.15s ease;
}

    .vx-btn-edit:hover {
        background: #fde6b6;
        color: #b45309;
    }

/* Generate button — indigo tint, conveys "process / build" */
.vx-btn-generate {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #EDE9FE;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #5B21B6;
    border: #5b21b685 1px solid;
    transition: background 0.15s ease, color 0.15s ease;
}

    .vx-btn-generate:hover {
        background: #ddd6fe;
        color: #4c1d95;
    }

/* Print variant — slightly blue tint on hover */
.vx-action-btn--print:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
}

    .vx-action-btn--print:hover i {
        color: #1d4ed8;
    }

/* Spacing between icon and label inside action buttons */
.vx-action-btn i {
    margin-right: 6px;
}

.ci-orange {
    background: #FEF5EC;
}

.card-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.line-indicator-chart-header {
    display: block;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 5px;
}

.line-indicator-time-status-line {
    display: flex;
    justify-content: space-between;
}

.line-indicator-chart-status-text {
    font-size: 12px;
    margin-top: 3px;
    margin-left: 240px;
    margin-bottom: -20px;
    opacity: 0.75;
    margin-left: auto;
    margin-right: 15px;
    text-align: right;
}

.line-indicator-chart-time {
    font-size: 12px;
    margin-top: 3px;
    margin-left: 10px;
    margin-bottom: -20px;
    opacity: 0.75;
}

.line-indicator-chart-title {
    padding-top: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    margin-left: -10px;
}

div#graphDataGrid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

/* Travel Manager Toggle styles for strips (example - flights timeline strip)
   Strip toggle behaviour. Checkbox sits at the top of .vx-booking-strip, the header and body are its later siblings, so :checked ~ ... can reach them.
   Body collapsed by default; chevron rotates 180° when checkbox is checked. */

.vx-booking-strip .vx-strip-toggle-cb:not(:checked) ~ .vx-strip-body {
    display: none;
}

.vx-booking-strip .vx-strip-toggle-cb:checked ~ .vx-strip-header .vx-strip-chevron-svg {
    transform: rotate(180deg);
}

.vx-booking-strip .vx-strip-chevron-svg {
    transition: transform 0.18s ease;
}

/* The chevron itself. This had no rule at all — every one of the ten labels
   carried the same block of inline styles instead, copied from the green Add
   button, which is why a collapse control was rendering green. It is a toggle,
   so it now matches .vx-btn-toggle: same size, same neutral grey, same hover.

   position/z-index keep the label above the sibling checkbox that drives the
   pure-CSS toggle. margin-left:auto stays inline on the strips that need it —
   two of the ten sit in headers that right-align by other means. */
.vx-strip-chevron {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #F1F3F5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #5A6472;
    border: 1px solid #5a647285;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

    .vx-strip-chevron:hover {
        background: #e3e6ea;
        color: #2C3542;
        border-color: #9ca3af;
    }

/* Travel Manager Taggle styles for Data / Itenerary view type */

/* View toggle button — same family as vx-btn-search / vx-btn-add--green */
.vx-btn-view {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #6b7280;
    border: #9ca3af85 1px solid;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .vx-btn-view:hover {
        background: #E8EEF6;
        color: #4882B3;
        border-color: #4882b385;
    }

/* Active state — filled with brand blue, same as vx-btn-search tint but stronger */
.vx-btn-view--active {
    background: #E8EEF6;
    color: #4882B3;
    border-color: #4882b385;
}

/* Inline filter dropdown — sits in the toolbar alongside the other 38px buttons.
   Matches the visual weight of .vx-btn-search / .vx-btn-add--green so the row reads as one band. */
.vx-filter-dropdown {
    height: 38px;
    background: #fff;
    border: 2px solid #b8b8b9;
    color: #374151;
    font-family: "lato", sans-serif;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 100px;
    max-width: 100px;
    transition: border-color 0.15s ease, background 0.15s ease;
    /* Native arrow looks fine, but a custom chevron keeps it consistent across browsers. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    margin: 0px;
}

    .vx-filter-dropdown:hover {
        border-color: #4882B3;
        background-color: #f8fafc;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%234882B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

    .vx-filter-dropdown:focus {
        outline: none;
        border-color: #4882B3;
        box-shadow: 0 0 0 3px rgba(72, 130, 179, 0.15);
    }






/* ════════════════════════════════════════════════════════════
   Edit/Customize mode for dashboard sections (Telematics)
   ──────────────────────────────────────────────────────────── */

/* "Customize" toggle — borderless gear icon at top-right of each tab.
   Shows a gear by default; flips to a check when edit mode is active.
   Wrapped by .vx-customize-row for right-alignment. */
.vx-customize-row {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px 0;
}

.vx-customize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #F3F4F6;
    border: 1px solid #9ca3af85;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .vx-customize-btn:hover {
        background: #E8EEF6;
        color: #4882B3;
        border-color: #4882b385;
    }

    .vx-customize-btn .vx-customize-label {
        display: none;
    }

    /* Default state — show gear, hide check */
    .vx-customize-btn .vx-icon-check {
        display: none;
    }

    .vx-customize-btn .vx-icon-gear {
        display: inline-block;
    }

    /* Active state — purple-tinted to match brand */
    .vx-customize-btn.is-active {
        background: #f5f3ff;
        color: #484293;
        border-color: #48429385;
    }

        .vx-customize-btn.is-active:hover {
            background: #ebe7ff;
            color: #484293;
            border-color: #484293;
        }

        .vx-customize-btn.is-active .vx-icon-gear {
            display: none;
        }

        .vx-customize-btn.is-active .vx-icon-check {
            display: inline-block;
        }

/* .vx-section — wraps each configurable area (alert bar, widgets grid, cards grid, table).
   Normal view: nothing. Edit mode: dashed brand outline. */
.vx-section {
    position: relative;
}

body.vx-edit-mode .vx-section {
    outline: 2px dashed #484293;
    outline-offset: 6px;
    border-radius: 12px;
    transition: outline-color 0.15s ease;
    margin-bottom: 8px;
    margin-top: 30px;
}

    body.vx-edit-mode .vx-section:hover {
        outline-color: #5d56b8;
    }

/* The per-section config button — existing gear buttons get .vx-section-config class.
   Hidden in normal view; shown as a small boxed check icon (rounded square) in top-right of each section. */
.vx-section-config {
    display: none !important;
}

body.vx-edit-mode .vx-section-config {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: -14px !important;
    right: -14px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #484293 !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(72,66,147,0.4);
    z-index: 5;
    transition: background 0.15s ease, transform 0.15s ease;
}

    body.vx-edit-mode .vx-section-config:hover {
        background: #3a3578 !important;
        transform: scale(1.08);
    }

    /* Hide the old gear icon/img inside the button */
    body.vx-edit-mode .vx-section-config svg,
    body.vx-edit-mode .vx-section-config img {
        display: none !important;
    }

    /* Inject the check icon via ::before */
    body.vx-edit-mode .vx-section-config::before {
        content: '';
        width: 15px;
        height: 15px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>") no-repeat center / contain;
    }

/* Delete / destructive action button — same form as vx-btn-add--green, red tone */
.vx-btn-delete {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #FDEBEC;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #C53030;
    border: #c5303075 solid 1px;
    margin-bottom: 0px;
}

    .vx-btn-delete:hover {
        background: #fbd5d8;
        color: #C53030;
    }

.vx-booking-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 65px;
}

.vx-booking-layout__main {
    flex: 1;
    min-width: 0;
}

.vx-booking-layout__side {
    width: 290px;
    flex-shrink: 0;
    margin-top: 65px;
}

@media (max-width: 1100px) {
    .vx-booking-layout {
        flex-direction: column;
    }

    .vx-booking-layout__side {
        width: 100%;
    }

    .vx-booking-layout__main {
        width: 100% !important;
    }
}

@media (max-width: 1000px) {

    .vx-booking-layout__main {
        width: 100% !important;
    }
}

/* ── Results heading ────────────────────────────────────────── */
.vx-results-heading {
    font-family: "neo-sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1B2A7B;
    margin: 0 0 2px;
}

.vx-results-meta {
    font-family: "lato", sans-serif;
    font-size: 13px;
    color: #79808b;
    margin: 0 0 16px;
}

/* ── Flight card ────────────────────────────────────────────── */
.vx-flight-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

.vx-flight-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 20px;
}

.vx-flight-card__title {
    font-family: "neo-sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1B2A7B;
    margin: 0 0 5px;
}

.vx-flight-card__dates {
    font-family: "lato", sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #79808b;
    margin: 0;
}

.vx-flight-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Sidebar: map ───────────────────────────────────────────── */
.vx-map-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    line-height: 0;
}

/* The Booking Form's sidebar maps (vx-map over OpenLayers, Content/scripts/vx-route-map.js), in .vx-map-card and
   .booking-map-container. line-height: the card sets 0, which would collapse the map's attribution text. */
.vx-booking-map {
    width: 100%;
    height: 215px;
    min-height: 0;
    line-height: normal;
}

/* ── Sidebar: filters ───────────────────────────────────────── */
.vx-filter-card {
    margin-top: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 18px 20px 20px;
}

.vx-filter-card__title {
    font-family: "neo-sans", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1B2A7B;
}

.vx-filter-card__rule {
    border: none;
    border-top: 1px solid #ededed;
    margin: 12px 0 14px;
}

.vx-filter-card__group {
    font-family: "lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1B2A7B;
    margin: 0 0 8px;
}

.vx-filter-card__links {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    margin-bottom: 12px;
    color: #c8cacd;
}

    .vx-filter-card__links a {
        color: #4882B3;
        text-decoration: none;
    }

        .vx-filter-card__links a:hover {
            text-decoration: underline;
        }

.vx-airline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vx-airline--extra {
    display: none;
}

.vx-airline-list.is-expanded .vx-airline--extra {
    display: block;
}

.vx-airline label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: "lato", sans-serif;
    font-size: 13.5px;
    color: #204059;
}

.vx-airline__cb {
    width: 15px;
    height: 15px;
    accent-color: #4882B3;
    cursor: pointer;
    flex-shrink: 0;
}

.vx-airline__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.vx-airline__name {
    line-height: 1.2;
}

.vx-filter-card__more {
    display: inline-block;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #4882B3;
    text-decoration: none;
}

    .vx-filter-card__more:hover {
        text-decoration: underline;
    }

/* ── Error flash ────────────────────────────────────────────── */
.vx-flash--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* ============================================================
   FLIGHT FILTERS — stops, times, duration, price, airlines
   ============================================================ */

.vx-filter-group {
    margin-bottom: 4px;
}

/* ── Stops, with live "From R…" hints ───────────────────────── */
.vx-stop {
    margin-bottom: 10px;
}

.vx-stop__label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: "lato", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #204059;
}

.vx-stop__cb {
    width: 15px;
    height: 15px;
    accent-color: #4882B3;
    cursor: pointer;
    flex-shrink: 0;
}

    .vx-stop__cb:disabled {
        cursor: not-allowed;
    }

.vx-stop__hint {
    margin: 3px 0 0 25px;
    font-family: "lato", sans-serif;
    font-size: 12.5px;
    color: #79808b;
}

.vx-stop--empty .vx-stop__label {
    color: #b8b8b9;
}

.vx-stop--empty .vx-stop__hint {
    color: #c8cacd;
    font-style: italic;
}

/* ── Take-off / Landing tabs ────────────────────────────────── */
.vx-timetabs {
    display: flex;
    gap: 5px;
    margin-bottom: 14px;
}

.vx-timetab {
    flex: 1;
    padding: 7px 0;
    border: 1px solid #d8e4ef;
    border-radius: 7px;
    background: #fff;
    font-family: "lato", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #5A6472;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .vx-timetab:hover {
        background: #f0f6fc;
    }

.vx-timetab--active {
    background: #E8EEF6;
    border-color: #4882B3;
    color: #2C6FB3;
}

/* ── Range slider ───────────────────────────────────────────── */
.vx-range-block {
    margin-bottom: 20px !important;
}

    .vx-range-block:last-child {
        margin-bottom: 6px !important;
    }

.vx-range-block__title {
    margin: 0 0 2px !important;
    font-family: "lato", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #204059 !important;
}

.vx-range__out {
    margin: 0 0 12px !important;
    font-family: "lato", sans-serif !important;
    font-size: 12.5px !important;
    color: #4882B3 !important;
    font-weight: 600 !important;
}

.vx-range {
    position: relative !important;
    height: 20px !important;
    margin: 0 9px !important; /* room for the thumbs at the extremes */
    cursor: pointer !important;
    touch-action: none !important;
}

.vx-range__track {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    margin-top: -2px !important;
    background: #e3e9f0 !important;
    border-radius: 3px !important;
}

.vx-range__fill {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    background: #4882B3 !important;
    border-radius: 3px !important;
}

.vx-range__thumb {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    padding: 0;
    border: 2px solid #4882B3;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(32, 64, 89, 0.25);
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

    .vx-range__thumb:hover {
        transform: scale(1.12);
    }

    .vx-range__thumb:active {
        cursor: grabbing;
        transform: scale(1.05);
    }

    .vx-range__thumb:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(72, 130, 179, 0.30);
    }

/* ── Reset ──────────────────────────────────────────────────── */
.vx-filter-reset {
    width: 100%;
    padding: 9px 0;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #fff;
    font-family: "lato", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #4882B3;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin: 0px;
}

    .vx-filter-reset:hover {
        background: #f0f6fc;
        border-color: #4882B3;
    }

/* ── Empty state ────────────────────────────────────────────── */
.vx-no-results {
    padding: 28px 20px;
    background: #fff;
    border: 1px dashed #c8cacd;
    border-radius: 12px;
    text-align: center;
}

.vx-no-results__title {
    font-family: "neo-sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1B2A7B;
}

.vx-no-results__hint {
    margin-top: 8px;
    font-family: "lato", sans-serif;
    font-size: 13px;
    color: #79808b;
}

/* Live "Available: R… – R…" readout under the Price label */
.vx-range__avail {
    margin: 0 0 8px;
    font-family: "lato", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}

PRE-SEARCH placeholder + idle filter panel + map caption
============================================================ */
/* Layout still two-column before search (sidebar shows). */
.vx-booking-layout--idle {
    margin-top: 40px;
}

/* Empty results column, before a search */
.vx-results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px 30px;
    background: #fff;
    border: 1px dashed #c8cacd;
    border-radius: 12px;
    color: #79808b;
    margin-top: 65px;
}

.vx-results-placeholder__icon {
    color: #c2cfdd;
    margin-bottom: 14px;
}

.vx-results-placeholder__title {
    font-family: "neo-sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1B2A7B;
    margin: 0 0 6px;
}

.vx-results-placeholder__hint {
    font-family: "lato", sans-serif;
    font-size: 13.5px;
    max-width: 320px;
    margin: 0;
}

/* Idle filter panel — visible for structure, controls muted + disabled */
.vx-filter-card--idle {
    position: relative;
}

.vx-filter-card__idle-note {
    font-family: "lato", sans-serif;
    font-size: 12.5px;
    color: #a0aab4;
    font-style: italic;
    margin: 6px 0 0;
}

.vx-filter-card--idle .vx-filter-group {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.4);
}

.vx-filter-card--idle .vx-filter-reset {
    display: none;
}

/* Route caption under the map */
.vx-map-card {
    position: relative;
}

.vx-map-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #ededed;
    font-family: "lato", sans-serif;
    font-size: 13px;
    color: #204059;
}

    .vx-map-caption strong {
        color: #1B2A7B;
    }

.vx-map-caption__arrow {
    color: #79808b;
    margin: 0 2px;
}

.vx-map-caption__pin {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vx-map-caption__pin--o {
    background: #4A90D9;
}

.vx-map-caption__pin--d {
    background: #4CAF50;
}

/* Seats-still-available badge — quiet, informative, not salesy */
.vx-flight-card__seats {
    margin: 5px 0 0;
    font-family: "lato", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #9a7b2e;
    background: #fdf6e3;
    border: 1px solid #efe2b8;
    border-radius: 5px;
    padding: 2px 8px;
    display: inline-block;
}

/* Airport picker options (Origin / Destination) — share the class dropdown look */
.vx-airport-opt {
    padding: 11px 16px !important;
    font-family: "lato", sans-serif !important;
    font-size: 13px !important;
    color: #5a6472 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #f2f4f7 !important;
}

    .vx-airport-opt:last-child {
        border-bottom: none !important;
    }

    .vx-airport-opt:hover {
        background: #f0f6fc !important;
    }

    .vx-airport-opt strong {
        color: #1B2A7B !important;
        font-weight: 700 !important;
        margin-right: 4px !important;
    }

.vx-sbp-field {
    position: relative !important;
}

    .vx-sbp-field .dropdown-list {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        margin-top: 4px !important;
        background: #fff !important;
        border: 1px solid #c8cacd !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(72, 130, 179, 0.15) !important;
        overflow: hidden !important;
    }

        .vx-sbp-field .dropdown-list:has(.vx-airport-opt) {
            min-width: 300px !important;
            max-height: 320px !important;
            overflow-y: auto !important;
            padding: 4px 0 !important;
        }

/* ============================================================
   vx-datepicker — calendar popup styled to the app
   ============================================================ */

.vx-date-display {
    cursor: pointer;
}

.vx-datepop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    margin-top: 6px;
    width: 280px;
    background: #fff;
    border: 1px solid #e3e4ea;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(32, 64, 89, 0.18);
    padding: 14px;
    font-family: "lato", sans-serif;
    user-select: none;
}

.vx-datepop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vx-datepop__title {
    font-family: "neo-sans", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: #1B2A7B;
}

.vx-datepop__nav {
    width: 30px;
    height: 30px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: #f0f6fc;
    border-radius: 8px;
    color: #4882B3;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    margin: 0px;
}

    .vx-datepop__nav:hover {
        background: #4882B3;
        color: #fff;
    }

.vx-datepop__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

    .vx-datepop__dow span {
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        color: #9aa4b2;
        padding: 4px 0;
    }

.vx-datepop__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.vx-datepop__day {
    width: 100%;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: "lato", sans-serif;
    font-size: 13px;
    color: #204059;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    margin: 0px;
}

    .vx-datepop__day:hover:not(:disabled) {
        background: #f0f6fc;
        color: #1B2A7B;
    }

.vx-datepop__day--muted {
    color: #d4d9e0;
    cursor: default;
}

.vx-datepop__day--today {
    box-shadow: inset 0 0 0 1.5px #c8dcee;
    font-weight: 700;
}

.vx-datepop__day--sel, .vx-datepop__day--sel:hover {
    background: #484293;
    color: #fff;
    font-weight: 700;
}

.vx-datepop__day:disabled {
    color: #d4d9e0;
    cursor: not-allowed;
}

.vx-datepop__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f5;
}

.vx-datepop__link {
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    font-family: "lato", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4882B3;
    cursor: pointer;
    margin: 0px;
}

    .vx-datepop__link:hover {
        text-decoration: underline;
    }


/* ============================================================
   Placeholder  flightsearch
   ============================================================ */

.vx-results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px 30px;
    background: #fff;
    border: 1px dashed #c8cacd;
    border-radius: 12px;
    color: #79808b;
    margin-top: 19px;
    margin-left: 25px;
}

.vx-results-placeholder__icon {
    color: #c2cfdd;
    margin-bottom: 14px;
}

.vx-results-placeholder__title {
    font-family: "neo-sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1B2A7B;
    margin: 0 0 6px;
}

.vx-results-placeholder__hint {
    font-family: "lato", sans-serif;
    font-size: 13.5px;
    max-width: 320px;
    margin: 0;
}




/* =========================================================================================================================
   Flight Searchbar dynamic Scaling - works differently then the others because of the extra layers - direct, multi city...
   ======================================================================================================================== */

@media (max-width: 1200px) {
    #vxFlightSearchStack.vx-searchbar-pill.vx-flight-seg {
        flex-direction: column !important;
    }

    .vx-seg-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #vxFlightSearchStack .vx-sbp-search-btn {
        width: auto !important;
        height: 44px !important;
        border-radius: 0 0 11px 11px !important;
        align-self: stretch !important;
    }

    #vxFlightSearchStack .vx-sbp-divider {
        width: auto !important;
        height: 1px !important;
        margin: 0 12px !important;
    }

    #vxFlightSearchStack .vx-sbp-swap {
        width: auto !important;
        padding: 6px 16px !important;
        justify-content: flex-start !important;
    }

    #vxFlightSearchStack .vx-sbp-field--narrow {
        max-width: 100% !important;
        flex: 1 !important;
    }
}

@media (max-width: 1110px) {
    #vxFlightSearchOuter {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Administration/Clients - Divisions/Accounts tabs before the client has been saved — grey out and block
   clicks instead of collapsing, overriding the generic a.level1.aspNetDisabled rule
   which hides disabled tabs entirely (that's fine for TelematicsUnit's Config tab,
   but not what we want here). */
#MainContent_Menu_ClientForm a.static.aspNetDisabled {
    visibility: visible !important;
    margin-top: 0 !important;
    padding: 11px 9px !important;
    opacity: 0.9;
    pointer-events: none;
    cursor: not-allowed;
    color: #BCBCBC !important;
    font-weight: 500;
}

/* Login PAge Fingerprint icon: red = reader not ready / not available, green = reader online and ready */
.vx-bio-badge {
    width: 41px;
    height: 41px;
    border-radius: 9px;
    cursor: help;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #fdecec;
    color: #d93025;
    border: 1px solid #f5c2c0;
    transition: background .25s, color .25s, border-color .25s;
}

    .vx-bio-badge[data-state="ready"] {
        background: #e6f6ee;
        color: #16a34a;
        border-color: #a7e3c1;
    }

    .vx-bio-badge[data-state="busy"] {
        background: #eaf2fa;
        color: #4882B3;
        border-color: #bcd3ea;
    }

/* ============================================================
   LICENCE — login page lock button + Account/License.aspx
   ============================================================ */

/* Login page: the biometric badge and the licence button side by side (bottom left of the card) */
.vx-login-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Login page licence button: red = licence not valid, green = valid. Opens the licence page */
.vx-licence-badge {
    width: 41px;
    height: 41px;
    border-radius: 9px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    text-decoration: none;
    background: #fdecec;
    color: #d93025;
    border: 1px solid #f5c2c0;
    transition: background .25s, color .25s, border-color .25s, box-shadow .15s;
}

    .vx-licence-badge:hover {
        box-shadow: 0 1px 4px rgba(0,0,0,0.12);
        text-decoration: none;
    }

    .vx-licence-badge--ok {
        background: #e6f6ee;
        color: #16a34a;
        border-color: #a7e3c1;
    }

/* Licence page frame - same backdrop and centring as the login page */
.vx-licence {
    min-height: calc(100vh - 52px);
    display: flex;
    justify-content: center;
    background: #f3f4f6;
    padding: 40px 16px;
    margin: -20px;
}

.vx-licence__inner {
    width: 100%;
    max-width: 640px;
}

.vx-licence__heading {
    text-align: center;
    margin-bottom: 24px;
}

.vx-licence__title {
    font-family: 'neo sans', 'lato', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #060518;
    letter-spacing: -0.5px;
}

.vx-licence__subtitle {
    font-family: lato, sans-serif;
    font-size: 13px;
    color: #79808b;
    margin-top: 4px;
}

.vx-licence__card {
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(6,5,24,0.08);
}

.vx-licence__row {
    display: flex;
    gap: 12px;
    padding: 5px 0;
    font-family: lato, sans-serif;
    font-size: 13.5px;
}

.vx-licence__label {
    width: 120px;
    flex-shrink: 0;
    color: #79808b;
}

.vx-licence__value {
    color: #111827;
    word-break: break-all;
}

.vx-licence__value--ok {
    color: #15803d;
    font-weight: 600;
}

.vx-licence__value--bad {
    color: #b91c1c;
    font-weight: 600;
}

.vx-licence__code {
    width: 100%;
    max-width: 100%;
    min-height: 110px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #f8fafc;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12.5px;
    color: #111827;
    box-sizing: border-box;
    resize: vertical;
}

.vx-licence__file {
    font-family: lato, sans-serif;
    font-size: 13px;
}

.vx-licence__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.vx-licence__hint {
    font-family: lato, sans-serif;
    font-size: 12.5px;
    color: #6b7280;
}

.vx-licence__spaced {
    margin-top: 22px;
}

.vx-licence__message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 7px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-family: lato, sans-serif;
    font-size: 13.5px;
}

.vx-licence__message-icon {
    margin-top: 2px;
}

.vx-licence__message--error {
    background: #fcebeb;
    border: 1px solid #e24b4a;
    color: #7f1d1d;
}

.vx-licence__message--success {
    background: #e6f6ee;
    border: 1px solid #a7e3c1;
    color: #14532d;
}

.vx-licence__footer {
    text-align: center;
    margin-top: 8px;
}

.vx-licence__back {
    font-family: lato, sans-serif;
    font-size: 13px;
    color: #484293;
    text-decoration: none;
}

    .vx-licence__back:hover {
        text-decoration: underline;
    }


/* ============================================================
   FUEL MANAGER — tank, pump and nozzle cards
   ============================================================ */

/* The strip of cards above the grid on Tanks, Mobile Tanks, Pumps and Nozzles.

   It is a .vx-card, the same white panel used everywhere else, so the cards sit
   inside a container rather than floating loose on the page background. The
   cards themselves are a grid inside it. */
.vx-fuel-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #c8cacd;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

/* One card. Tinted surface so it reads as a tile inside the panel, rather than
   a white box on white. Fixed basis rather than a grid track, so a handful of
   cards sit centred as a group instead of packing against the left edge. */
.vx-fuel-card {
    display: flex;
    flex-direction: column;
    flex: 0 1 210px;
    background: #fafafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

    .vx-fuel-card__title {
        display: block;
        padding: 10px 14px 9px;
        border-bottom: 1px solid #e5e7eb;
        font-family: "lato", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #6b7280;
        text-decoration: none;
    }

    a.vx-fuel-card__title:hover {
        color: #484293;
        text-decoration: none;
    }

    .vx-fuel-card__image {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 14px 8px;
    }

        .vx-fuel-card__image img {
            width: 100%;
            max-width: 170px;
            height: auto;
        }

    /* Pumps are drawn portrait rather than landscape, so their image needs more
       room than a tank or nozzle. */
    .vx-fuel-card__image--tall img {
        max-width: 120px;
    }


/* ── Event status rows, Overview tab ───────────────────────────────────────
   Set per row in FuelManager.aspx.cs RowDataBound from the event's eStatus.

   These were solid saturated fills with near-white text — #2F855A, #F28C28,
   #C53030 — which read as four blocks of colour against a grid whose own rows
   are #fafafc and #eef0f8. They now use the same tint-plus-dark-text formula as
   the status badges elsewhere on the site, so a row still reads as its status at
   a glance without overwhelming the table. */

.vx-fuel-row--busy {
    background-color: #e6f6ee;
    color: #166534;
}

.vx-fuel-row--warning {
    background-color: #fdf6e3;
    color: #8a5a12;
}

.vx-fuel-row--alert {
    background-color: #fdecec;
    color: #b42318;
}

.vx-fuel-row--closed {
    background-color: #f3f4f6;
    color: #9ca3af;
}

    /* The View link inherits the row's tone rather than the site link blue, so
       each row stays one colour. */
    .vx-fuel-row--busy a,
    .vx-fuel-row--warning a,
    .vx-fuel-row--alert a,
    .vx-fuel-row--closed a {
        color: inherit;
        font-weight: 600;
    }

        .vx-fuel-row--busy a:hover,
        .vx-fuel-row--warning a:hover,
        .vx-fuel-row--alert a:hover,
        .vx-fuel-row--closed a:hover {
            text-decoration: underline;
        }

    /* The readings. A definition list rather than paragraphs padded with &nbsp;,
       so the values line up on their own column at any label length. Type
       matches .vx-field__label and .vx-field__input elsewhere on the site. */
    .vx-fuel-card__readings {
        display: grid;
        grid-template-columns: auto max-content;
        gap: 7px 12px;
        margin: 0;
        padding: 0 14px 14px;
        font-family: "lato", sans-serif;
        font-size: 12px;
        line-height: 1.3;
    }

        .vx-fuel-card__readings dt {
            color: #6b7280;
            font-weight: 400;
        }

        .vx-fuel-card__readings dd {
            margin: 0;
            text-align: right;
            color: #111827;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

/* ── Fuel Manager: overview map (OpenLayers) ─────────────────────────────────
   FuelManager.aspx overview tab. Drawn by Content/scripts/vx-fuel-map.js on
   top of Scripts/ol/ol.css. Replaces the Google gmp-map, which had its height
   inline; the height lives here now. */
.vx-fuel-map {
    position: relative;
    width: 100%;
    height: 450px;
    border: 1px solid var(--vx-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    background: var(--vx-surface-2, #f3f4f8);
}

    .vx-fuel-map:fullscreen {
        border-radius: 0;
    }

.vx-fuel-map--error {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vx-muted, #6b7280);
}

/* The recentre button sits under the zoom buttons (OpenLayers puts those top left). */
.vx-fuel-map__recenter {
    top: 4.2em;
    left: 0.5em;
}

    .vx-fuel-map__recenter button {
        font-size: 1.3em;
    }

/* Marker popup: name and position, opened by clicking a tank or nozzle. */
.vx-fuel-map__popup {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    padding: 8px 12px;
    background: var(--vx-surface, #ffffff);
    color: var(--vx-text, #111827);
    border: 1px solid var(--vx-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.18);
    font-size: 13px;
    white-space: nowrap;
}

    .vx-fuel-map__popup span {
        color: var(--vx-muted, #6b7280);
        font-variant-numeric: tabular-nums;
    }

    .vx-fuel-map__popup::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -7px;
        width: 12px;
        height: 12px;
        margin-left: -6px;
        background: inherit;
        border-right: 1px solid var(--vx-border, #e5e7eb);
        border-bottom: 1px solid var(--vx-border, #e5e7eb);
        transform: rotate(45deg);
    }