/*
 * Selected vehicle row - stronger highlight, in the active theme's own colour.
 *
 * Loaded through the app's supported custom-CSS hook:
 *   Layouts/partials/head.blade.php:18
 *     @if (Appearance::assetFileExists('css'))
 *         <link rel="stylesheet" href="{{ Appearance::getAssetFileUrl('css') }}">
 *
 * It loads AFTER the theme stylesheet, so equal specificity is enough to win and
 * nothing in the 16 theme files has to be touched.
 *
 * WHY: the theme sets  .group-list > li.active { background: #f9f9f9 }  -- a 2%
 * difference from white, with a thin accent bar on the RIGHT edge, the far side
 * from where the eye reads the plate number. The selected vehicle was very hard
 * to pick out of a long list.
 *
 * --sel-bg and --sel-bar are set at runtime by map_goto_vehicle.js, which reads
 * the live theme colour off a hidden .btn-action probe. Nothing is hardcoded, so
 * an install on any theme gets its own colour. The fallbacks below are only used
 * in the split second before that script runs.
 *
 * The row stays LIGHT on purpose. The status dot colour (moving / stopped /
 * offline / blocked) is real data, written inline per vehicle, and a light row
 * keeps every one of those colours readable at full strength - including the
 * black "blocked" dot, which would disappear on a filled row in the black theme.
 *
 * The left bar is an inset box-shadow, not a border: the row is a table layout
 * (.name and .details are table-cells), so a real border would shift the text.
 */

.group-list > li.active {
    background: var(--sel-bg, #dbeaf0);
    box-shadow: inset 4px 0 0 var(--sel-bar, #1b99bd);
}

.group-list > li.active > .name {
    font-weight: 500;
}

/*
 * Turn OFF the theme's original right-edge bar.
 *
 * The theme draws the accent on the RIGHT of the selected row:
 *     .group-list > li.active > :last-child { border-right-color: #1b99bd }
 * The bar has moved to the left, so without this the row gets a bar on BOTH
 * sides. Same specificity as the theme rule, and this file loads after it.
 *
 * The 4px transparent border itself is left in place (.group-list > li > :last-child)
 * so every row keeps the same width and nothing shifts when one is selected.
 */
.group-list > li.active > :last-child {
    border-right-color: transparent;
}

/*
 * The three-dot menu on each vehicle row.
 *
 * It is an icon-font glyph that inherits its colour from .details, which the theme
 * sets to #ddd ($color-text-900 -- note the scale is inverted, 900 is the LIGHTEST).
 * That is 1.36:1 against white and 1.07:1 against the selected row's tint, where
 * WCAG 1.4.11 asks for 3:1 on interface controls. It was effectively invisible
 * everywhere, not only on the selected row.
 *
 * The speed text beside it is the same #ddd but still reads, because letter strokes
 * carry far more ink than three small dots. So only the icon is changed here -- the
 * speed is deliberately left alone.
 *
 * #666 is $color-text-400, the theme's own "normal" text colour: 5.74:1 on white and
 * 4.51:1 on the tint.
 *
 * The hover rule is needed too. The theme has .btn.icon:hover { color:#777 }, which
 * is LIGHTER than #666 -- so without this the icon would fade as you point at it.
 * Hover now goes darker, and keeps the theme's own #eee hover background.
 */
.group-list > li > .details .btn.icon.options {
    color: #666;
}

.group-list > li > .details .btn.icon.options:hover {
    color: #333;
}

/*
 * The search magnifier in the Objects list sat flush against the left edge.
 *
 * The theme pins it at left:0 inside a 31px box:
 *     .bs-searchbox:before, .form-group.search:before { left: 0; ... }
 *     .bs-searchbox > .form-control, .form-group.search > .form-control { padding-left: 31px; }
 *
 * Nudged to 10px, and the input's left padding grown to match so the placeholder
 * never sits under the icon.
 *
 * Deliberately scoped to .form-group.search only. The theme groups it with
 * .bs-searchbox, which is the search field inside bootstrap-select dropdowns
 * elsewhere in the app -- those are left exactly as they are.
 */
.form-group.search:before {
    left: 10px;
}

.form-group.search > .form-control {
    padding-left: 38px;
}

/*
 * Master select-all checkbox in the Objects toolbar.
 *
 * It sits as the first cell of the existing .input-group (which is display:table, so an
 * .input-group-addon is the bootstrap-native way to add a cell without disturbing the
 * search field or the buttons beside it). The addon's own grey background and padding
 * are removed so only the box shows.
 *
 * The box is styled here from scratch rather than reusing the theme's checkbox, because
 * this app has NO indeterminate state anywhere and the dash had to be drawn. Doing all
 * three states in one place keeps them consistent.
 *
 * The colour comes from --sel-bar, which map_goto_vehicle.js reads off the live theme,
 * so this follows whichever of the 16 themes an install uses.
 */
.tab-pane-header .input-group-addon.objects-select-all {
    background: transparent;
    border: 0;
    padding: 0 9px 0 1px;
    width: 1%;
    vertical-align: middle;
}

.objects-select-all input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.objects-select-all label {
    display: block;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
}

.objects-select-all input[type="checkbox"]:checked + label,
.objects-select-all input[type="checkbox"]:indeterminate + label {
    background: var(--sel-bar, #1b99bd);
    border-color: var(--sel-bar, #1b99bd);
}

/* all selected: a tick */
.objects-select-all input[type="checkbox"]:checked + label:after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    margin: 1px auto 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* some selected: a dash */
.objects-select-all input[type="checkbox"]:indeterminate + label:after {
    content: '';
    display: block;
    width: 9px;
    height: 2px;
    margin: 5.5px auto;
    background: #fff;
}

/*
 * Dash (some-but-not-all) state for the app's OWN checkboxes -- the group headers.
 *
 * The theme builds a checkbox from two pseudo elements on the label:
 *     label::before  15x15, the glyph layer -- gets font-family:icomoon + a tick
 *                    glyph and background-color:<brand> when :checked
 *     label::after   18x18 absolute, the box outline -- gets background and
 *                    border-color:<brand> when :checked
 * There is no :indeterminate rule anywhere, so a partly-selected group looked
 * identical to an empty one.
 *
 * The dash is drawn as a linear-gradient over the brand background rather than a
 * glyph, because the icomoon font has a tick but no dash.
 */
.checkbox input[type="checkbox"]:indeterminate + label::after {
    background-color: var(--sel-bar, #1b99bd);
    border-color: var(--sel-bar, #1b99bd);
}

.checkbox input[type="checkbox"]:indeterminate + label::before {
    background-color: var(--sel-bar, #1b99bd);
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 2px;
}

/* ------------------------------------------------------------------------
   Phone number country picker (added 2026-10-03)

   The open country list is rendered on <body> via data-container="body" on
   the select, so it escapes the stacking context created by the
   .bootstrap-select wrapper (z-index:2). Trying to fix this with z-index on
   the menu does not work - it is trapped inside that context, and the
   "Devices limit" input (z-index:2, later in the DOM) wins.
   ------------------------------------------------------------------------ */
.js-phone-group .bootstrap-select .dropdown-toggle {
    white-space: nowrap;
}

/* Keep the country button on one line so it does not crowd the number box. */
.js-phone-group .bootstrap-select .dropdown-toggle {
    white-space: nowrap;
}