/* ============================================================
   40-vx-components.css
   ------------------------------------------------------------
   Reusable pieces that appear on more than one page:
   vx-page-header, vx-card, vx-field, the vx-btn-* family and
   vx-save-footer.

   PUT A RULE HERE IF
     you could drop this component onto a different page
     tomorrow and it would still make sense.

   DO NOT PUT HERE
     tied to one screen only ......... 50-vx-features.css
     the app frame (sidebar/topbar) .. 30-vx-shell.css
     bare element styling ............ 00-reset.css
     per-user theme colours .......... 90-vx-theme.css

   RULES FOR THIS FILE
     - vx- prefix, BEM naming: block__element--modifier
     - no #MainContent_* selectors
     - no !important. This file loads after 00 to 30, so it
       already wins on source order. If you are reaching for
       !important, the rule is probably in the wrong file.
   ============================================================ */

   71. GLOBAL PAGE & FORM MODERNISATION
   ============================================================ */

/* Page content background */
.app__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fafafc;
    min-height: 100%;
    padding: 0;
    width: 100%;
    background-color: #fafafc;
}

/* ── Page header area (title + subtitle + action buttons) ─── */
.vx-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0px;
}


.vx-page-header__title {
    font-family: "neo-sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0px;
    padding: 10px 0px;
    line-height: 1.2;
}

.vx-page-header__subtitle {
    font-family: "lato", sans-serif;
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.vx-page-header__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-top: 4px;
}

/* ── Page header responsive behaviour ────────────────────── */
@media (max-width: 600px) {
    .vx-page-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .vx-page-header__left {
        flex: 1 1 100%; /* title takes the full first row */
    }

    .vx-page-header__actions {
        flex: 1 1 100%; /* buttons drop to a second row */
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 0;
        margin-left: -10px;
    }
}

@media (max-width: 380px) {
    .vx-page-header__actions {
        flex-direction: column; /* each button stacks vertically */
        align-items: stretch;
        margin-left: 0px;
    }

    .vx-action-btn {
        width: 100%;
        justify-content: center;
        margin-left: 0px;
    }
}

/* ── Form cards ───────────────────────────────────────────── */
.vx-card {
    background: #fff;
    border: 1px solid #c8cacd;
    border-radius: 10px;
    overflow: hidden;
}

.vx-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.vx-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.vx-card__icon--blue {
    background: #eff6ff;
    color: #3b82f6;
}

.vx-card__icon--amber {
    background: #fffbeb;
    color: #f59e0b;
}

.vx-card__icon--green {
    background: #f0fdf4;
    color: #22c55e;
}

.vx-card__icon--purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.vx-card__title {
    font-family: "lato", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #111827;
}

.vx-card__subtitle {
    font-family: "lato", sans-serif;
    font-size: 12px;
    color: #79808b;
    margin-top: -2px;
}

.vx-card__body {
    padding: 20px;
}

/* ── Form field labels above inputs ───────────────────────── */
.vx-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.vx-field__label {
    font-family: "lato", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: -11px;
    margin-left: 3px;
}

.vx-field__hint {
    font-family: "lato", sans-serif;
    font-size: 11px;
    color: #79808b;
    margin-top: -9px;
    margin-left: 3px;
}

/* The input, select or textarea inside a .vx-field.

   These declarations were written out inline on every field in the app - 116
   copies across 10 pages - because .vx-field had a label class, a hint class
   and a readonly class, but nothing for the control itself. There was no class
   to reach for, so everyone pasted the block.

   margin-left only, not margin. 10-legacy-core.css sets margin:10px on every input,
   select and textarea; the 10px top and bottom are load-bearing here, because
   .vx-field is a flex column and that margin is part of the vertical rhythm.
   Only the left one needs cancelling, which is exactly what the inline styles
   did and what .back-control-forms does. */
.vx-field__input {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    font-family: lato, sans-serif;
    font-size: 13.5px;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
    margin-left: 0;
}

    /* A <select> sits its text slightly high against this padding, so dropdowns
       carry a little more on top. Apply alongside the base class. */
    .vx-field__input--select {
        padding: 10px 12px 8px;
    }

.vx-field__readonly {
    height: 38px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #f9fafb;
    font-family: lato, sans-serif;
    font-size: 13.5px;
    color: #111827;
    box-sizing: border-box;
}

/* ── Add / primary action button (brand green-teal outlined) */
.vx-btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 7px;
    color: #484293;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    text-decoration: none !important;
    margin-bottom: 11px;
}

    .vx-btn-add:hover {
        background: #f5f3ff;
        color: #484293;
        text-decoration: none !important;
    }

/* Green variant — use wherever the add action relates to a "positive/new" context.
   Merged from two rules that both styled this class about 700 lines apart: the
   geometry was declared here, the colours in the later copy, which won on source
   order. Colours below are that later copy's, so nothing renders differently.
   Used standalone in markup, never as "vx-btn-add vx-btn-add--green", so this
   rule carries the whole button rather than only the modifier bits. */
.vx-btn-add--green {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #E8F5E9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #2E7D32;
    border: 1px solid #2e7d3285;
    margin-bottom: 0px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .vx-btn-add--green:hover {
        background: #d3ecd5;
        color: #1b5e20;
    }


/* Map pin button — same family as vx-btn-add--green / vx-btn-toggle, blue tint */
.vx-btn-map {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #EBF4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #2B6CB0;
    border: #2b6cb075 solid 1px;
    margin: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

    .vx-btn-map:hover {
        background: #DBEAFE;
        color: #1E4E8C;
        border-color: #2B6CB0;
    }

    .vx-btn-map.active {
        background: #DBEAFE;
        color: #1E4E8C;
        border-color: #2B6CB0;
    }

/* Toggle/collapse arrow — same shape as vx-btn-add--green, neutral grey.
   Merged from two rules about 650 lines apart, same as the green button above:
   geometry here, colours in the later copy. */
.vx-btn-toggle {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #F1F3F5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-end;
    color: #5A6472;
    border: 1px solid #5a647285;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
    margin-bottom: 0px;
}

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

    /* Open state rotates the chevron and nothing else — the button keeps the
       same grey open or closed, by design. The class is "open" because that is
       what BookingForm's toggleFlight() adds; a dead ".is-open" variant in a
       later duplicate block was removed. Renaming to is-open belongs with the
       wider BEM rename, not here. */
    .vx-btn-toggle.open svg {
        transform: rotate(180deg);
    }

    .vx-btn-toggle svg {
        transition: transform 0.2s ease;
    }

/* Blue bar + old button bar hidden by JS — no CSS override needed */
/* groupbox_data_left.buttons_default hidden since JS replaces it */
.groupbox_data_left.buttons_default {
    display: none !important;
}


/* ── Form field modernisation ─────────────────────────────── */
/* Labels above inputs — small uppercase */
.form-group-forms label,
.form-group-forms .control-label {
    font-family: "lato", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* Inputs in form-group-forms */
.form-group-forms .back-control-forms,
.form-group-forms input[type="text"],
.form-group-forms input[type="number"],
.form-group-forms input[type="email"],
.form-group-forms select,
.form-group-forms textarea {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: 38px !important;
    padding: 8px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 7px !important;
    background: #fff !important;
    font-family: "lato", sans-serif !important;
    font-size: 13.5px !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    margin-left: 0px;
}

    .form-group-forms .back-control-forms:focus,
    .form-group-forms input:focus,
    .form-group-forms select:focus,
    .form-group-forms textarea:focus {
        outline: none !important;
        border-color: #484293 !important;
        box-shadow: 0 0 0 3px rgba(72,66,147,0.1) !important;
    }

/* ── A row of toolbar buttons ──────────────────────────────────────────────
   Put this on any container holding a run of vx-action-btn, vx-btn-add--green,
   vx-btn-edit, vx-btn-search or vx-btn-delete. It spaces them evenly and centres
   them on each other, which matters because the labelled action buttons are 35px
   tall and the icon buttons are 38px — without this they sit touching and a few
   pixels out of line.

   Hidden postback carriers inside the row are display:none, so they take no part
   in the layout. */
.vx-btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Sub-tab menu bar ──────────────────────────────────────────────────────
   The row of tabs that sits inside a page - Dashboard / Details / Logs on
   TelematicsUnit, Auto Stops / Settings on the FuelManager Configuration tab.
   Goes on an asp:Menu CssClass alongside menucenteredLower, which supplies the
   frame; this supplies the look. asp:Menu marks each anchor .static, and adds
   .selected to the active one.

   This replaces the styling for Menu_TelematicsUnit, Menu_TelematicsReports,
   Menu_ClientForm and Menu_Configuration, which used to be spread over two
   frozen files and four generated client IDs:

     10-legacy-core.css  - a twenty-selector shared block giving every sub-menu
                           in the app its padding, font and near-white #FAFAFC
                           link colour
     20-legacy-pages.css - three later blocks re-colouring three of those menus
                           blue and giving the active one its pill

   Nothing could reuse that without adding a fifth client ID to a frozen file.
   Both sets have now been deleted for these four menus and merged here, so the
   declarations below are the two blocks' combined result rather than a copy of
   either: colour, weight and margins come from the 20- block, which loaded later
   and won; padding, font-size and the rest come from the 10- block.

   The !important flags are carried over from the rules being retired, not added.
   Three frozen rules still compete and still use !important, so dropping them
   would change how these menus render:

     .selected { background-color: #484293 !important }  in 10-legacy-core.css,
     which is global and would otherwise paint the active tab solid purple

     .menucenteredLower ul.level1 > li > a { padding / background / color
     !important } inside a max-width:1178px media query, which the pill has to
     out-specify between 620px and 1178px

   Source order cannot beat !important, so the only alternative was keeping the
   id selectors. */
.vx-submenu a.static {
    padding: 14px 10px !important;
    margin: -2px 5px 0 -5px;
    color: #4882B3;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-style: none;
    border-radius: 0 !important;
}

    .vx-submenu a.static:hover {
        color: #548fbf;
    }

    .vx-submenu a.static.selected {
        height: 30px;
        margin-top: 8px;
        padding-top: 3.5px !important;
        background-color: #EDECEC !important;
        color: #484293 !important;
        border: solid 0.5px #48429370;
        border-radius: 50px !important;
    }

@media (max-width: 619px) {
    .vx-submenu a.static {
        margin-left: 5px;
    }
}

    /* vx-action-btn is a <button>, so it picks up margin:10px from the grouped
       reset in 10-legacy-core.css. The base rule zeroes margin-right only, because
       in the page header that 10px left margin is what spaces the buttons apart -
       the 600px media query above even compensates for it with margin-left:-10px.
       In this row the spacing comes from gap, so the left margin is pure indent
       and pushes the first button away from everything above it. */
    .vx-btn-row .vx-action-btn {
        margin-left: 0px;
    }

/* ============================================================
   vx-map — the map component (Content/scripts/vx-map.js over
   OpenLayers). The map fills its container; give the container
   a height. The tooltip is the marker/area name shown on hover.
   ============================================================ */
.vx-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.vx-map__tooltip {
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(33, 37, 41, 0.9);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}