/*
 * Site-wide "glossy" visual polish. Loaded after the active compiled theme
 * (see Tobuli/Views/Frontend/Layouts/partials/head.blade.php ->
 * Appearance::assetFileExists('css')/getAssetFileUrl('css'), which resolves
 * to this exact file: public/assets/custom/css.css).
 *
 * Deliberately additive/visual-only — box-shadow, border-radius, gradient
 * overlays, hover transitions. Never touches layout (position/display/width/
 * margin structure), colors already set by the theme, or any markup/JS, so a
 * selector that doesn't match current markup simply does nothing instead of
 * breaking anything.
 */

/* ===== Floating cards: sidebar panel + bottom info widgets =====================
   Soft depth + rounded corners, matching the reference "modern glossy" look. */
.sidebar .sidebar-content,
.panel,
.modal-content,
.dropdown-menu {
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(20, 20, 30, .10), 0 1px 3px rgba(20, 20, 30, .08) !important;
}

#widgets .widget {
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(20, 20, 30, .10), 0 1px 3px rgba(20, 20, 30, .08) !important;
    border: none !important;
}
/* Restore a visible gap between widget cards now that each one floats on its
   own — the base theme joins them flush (border-bottom:0, margin-left:-1px). */
#widgets .widget + .widget {
    margin-left: 10px !important;
}
#widgets {
    padding-bottom: 4px;
}
/* The compiled theme's own rule for this exact element —
   "body.new-design-active #widgets { background: color-mix(in srgb,#fff,
   transparent 10%); ... }" — paints the #widgets container itself near-white,
   independently of the individual .widget cards inside it (which are covered
   separately below). That selector's specificity (1 id + 1 class + 1 type) beats
   a plain "#widgets" rule, so match/exceed it exactly here. */
body.new-design-active #widgets,
html body.new-design-active #widgets,
#widgets {
    background: var(--dg-panel, #241318) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35) !important;
}
body.new-design-active #widgets-toggle-btn,
#widgets-toggle-btn {
    background: var(--dg-orange, linear-gradient(150deg, #ffa773, #ff7828)) !important;
    color: #fff !important;
}

.widget-heading {
    border-radius: 14px 14px 0 0 !important;
}

/* ===== Glossy sheen overlay =====================================================
   A translucent white gradient layered on top of whatever background-color a
   button/badge/active-state already has (background-image paints over
   background-color, so this works regardless of the theme's actual palette —
   no need to know or override each element's real color). Gives every accent
   surface a soft top-highlight "glass button" look instead of a flat fill. */
.btn,
.sidebar-menu-item.active,
.badge,
.label,
#widgets .widget-title .icon {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 60%);
}

.btn {
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(20, 20, 30, .12);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 5px 14px rgba(20, 20, 30, .16);
}
.btn:active {
    transform: translateY(0);
}

.sidebar-menu-item.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 10px rgba(255, 120, 40, .35) !important;
}
.sidebar-menu-item {
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.sidebar-menu-item:hover {
    transform: translateX(1px);
}

/* ===== Inputs — soft rounded fields with a gentle focus glow =================== */
.form-control,
input[type="text"],
input[type="search"],
input[type="password"],
select.form-control {
    border-radius: 10px !important;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus {
    box-shadow: 0 0 0 3px rgba(255, 120, 40, .15) !important;
}

/* ===== Leaflet map controls (zoom, layers, fullscreen, custom buttons) =========
   Rounded floating pills with depth, matching the reference's rounded button
   column on the map's right edge. */
.leaflet-bar,
.leaflet-control {
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(20, 20, 30, .16) !important;
    overflow: hidden;
}
.leaflet-bar a {
    transition: background .15s ease, color .15s ease;
}
.leaflet-bar a:hover {
    filter: brightness(.97);
}

/* ===== Map info popups / tooltips — same card treatment ========================= */
.leaflet-popup-content-wrapper {
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(20, 20, 30, .16) !important;
}

/* ===== List rows (object list items, table rows) — subtle hover lift =========== */
.group .item,
.list-group-item {
    transition: background .15s ease, box-shadow .15s ease;
    border-radius: 10px;
}

/* =================================================================================
   DARK GLOSSY THEME — sidebar, objects panel, per-widget-type gradient cards, and
   orange gradient map controls, matching the dark reference mockup.

   Deliberately layered here as CSS-only, not by flipping the server's global
   template_color setting (Admin > Main Server Settings > Appearance) — that setting
   is shared by every user/tenant on this server, so changing it would recolor the
   whole platform for everyone, not just this view. Forcing colors here instead
   keeps the blast radius to "this override file", trivially reversible by deleting
   this section, and still needs !important throughout since the base theme's own
   selectors are often more specific than a flat class selector.

   Coverage: sidebar nav, Objects panel + list, the 5 bottom widget cards, buttons/
   badges/inputs inside them, and Leaflet map controls. Areas not touched (admin
   pages, report tables, other modals) were not inspected for this pass — if
   something elsewhere ends up looking like light-on-light or dark-on-dark after
   this, flag it and it can be patched here without touching anything else.
   ================================================================================= */

:root {
    /* Started out matching the mobile app's CustomColor.darkBg/darkPanel/
       darkPanel2 (apphypegpsnew/lib/theme/CustomColor.dart) 1:1, then went
       through a few lighter warm-reddish rounds, but that hue itself was the
       actual complaint — settled on a clean neutral dark gray instead (no
       red/maroon tint), a bit darker than the last reddish round. --dg-orange
       stays the only warm/colored accent now, which is what should carry the
       "glossy" look, not the base surface color. Diverged from the app's
       exact values; keep that in mind if asked to "match the app" again. */
    --dg-bg:        #1e1e22;
    --dg-panel:     #27272c;
    --dg-panel-2:   #323238;
    --dg-border:    rgba(255, 255, 255, .10);
    --dg-text:      #fbeef0;
    --dg-text-dim:  rgba(251, 238, 240, .62);
    /* Main accent — kept the --dg-orange name (touched by dozens of rules
       throughout this file) even though it's held red/other values since,
       to avoid a much larger find/replace across every call site. */
    --dg-orange:    linear-gradient(150deg, #ffa773, #ff7828);
    --dg-orange-glow: 0 4px 16px rgba(255, 120, 40, .45);
}

/* Page chrome behind the floating panels. Excludes body.sign-in-layout — the
   Login/Registration/Password pages have a real admin-configurable page banner
   (Frontend/Layouts/frontend.blade.php -> "background" asset / "login_page_
   background_color", emitted as "body.sign-in-layout { background-color: ...;
   background-image: url(...); }" only when actually configured); forcing
   var(--dg-bg) with !important here unconditionally painted over that banner
   image/color regardless of source order. The separate, non-!important
   "body.sign-in-layout" rule below supplies the same dark fallback for installs
   that haven't configured a banner, and — being the identical selector/
   specificity but loaded earlier in <head> than the admin's own inline <style>
   block — naturally loses that tie when a banner IS configured. */
html body:not(.sign-in-layout), html body #content, html body .content-wrapper {
    background: var(--dg-bg) !important;
}
body.sign-in-layout {
    background: var(--dg-bg);
}

/* ===== Global font — system stack ================================================
   Replaces the theme's "Noto Sans" (compiled body{font-family:"Noto Sans",
   sans-serif}, no !important) with each platform's native font: San Francisco
   on iOS, Roboto on Android, Segoe UI on Windows, etc. Loads instantly and
   works offline — this page runs inside the mobile app's WebView, sometimes on
   a weak connection, so a font that needs a network fetch (Google Fonts, etc.)
   isn't worth the risk. No !important needed: same selector specificity as the
   compiled rule, and this file loads after it, so plain cascade order already
   wins — deliberately NOT !important so it can never outrank the theme's own
   icon-font rules (FontAwesome/icomoon/icongps/remixicon), which all set their
   own font-family with !important and must keep working untouched. */
html body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ----- Left icon nav -------------------------------------------------------------
   html/body prefix throughout this section boosts specificity (adds 2 type
   selectors, which wins ties without risking losing to a rule with more real
   classes/ids) — plain class selectors here were losing to more specific rules
   already in the compiled theme for these particular chrome elements. */
html body #sidebar.sidebar,
html body .sidebar-vertical-menu {
    background: linear-gradient(180deg, var(--dg-panel), var(--dg-bg)) !important;
    border-right: 1px solid var(--dg-border) !important;
}
/* Anchored to the real #sidebar id (not just html/body padding) — a competing
   theme rule like "#sidebar.sidebar .sidebar-header" has an ID in its chain,
   which beats any number of plain type/class selectors regardless of source
   order; only matching that ID reliably wins here. */
#sidebar .sidebar-header, #sidebar .sidebar-logo,
html body #sidebar.sidebar .sidebar-header,
html body #sidebar.sidebar .sidebar-logo {
    background: transparent !important;
}
/* Each item (item.blade.php: <a class="sidebar-menu-item"><i class="icon-gps-*">
   <span class="text">Label</span></a>) gets its own rounded floating pill
   instead of a flush full-width highlight, with the icon getting a subtle lift
   + glow on hover/active — same glossy language as the rest of this file. */
html body .sidebar-menu-item {
    color: var(--dg-text-dim) !important;
    margin: 3px 8px !important;
    border-radius: 12px !important;
    transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
html body .sidebar-menu-item i[class*="icon-gps-"] {
    transition: transform .15s ease;
}
html body .sidebar-menu-item:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: var(--dg-text) !important;
    transform: translateX(2px);
}
html body .sidebar-menu-item:hover i[class*="icon-gps-"] {
    transform: scale(1.12);
}
/* The compiled theme also has ".sidebar-new-design-layout .sidebar-vertical-menu
   .sidebar-menu-item.active" (4 classes, 0 types) for this exact element —
   higher specificity than "html body .sidebar-menu-item.active" (2 types + 2
   classes) purely on class count, regardless of the 2 extra type selectors, so
   it was winning and keeping the main sidebar nav's active-item background on
   the theme's own default instead of the accent. Matching that selector
   verbatim (plus html/body, which only adds type selectors and can't lose a
   class-count tie) is what actually wins here. */
html body .sidebar-menu-item.active,
html body .sidebar-new-design-layout .sidebar-vertical-menu .sidebar-menu-item.active,
.sidebar-new-design-layout .sidebar-vertical-menu .sidebar-menu-item.active {
    background: var(--dg-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255, 120, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    transform: none;
}
html body .sidebar-menu-item.active i[class*="icon-gps-"] {
    transform: scale(1.05);
}
html body .sidebar-menu-separator {
    background: var(--dg-border) !important;
    margin: 6px 14px !important;
}

/* ----- Sidebar footer (account dropdown, language, logout) — same #sidebar-id
   anchoring as the header fix above, since this is the same class of "theme rule
   has an ID in its chain" specificity loss. */
#sidebar .sidebar-menu-footer,
#sidebar .sidebar-dropdown,
html body #sidebar.sidebar .sidebar-menu-footer {
    background: transparent !important;
}
#sidebar .sidebar-menu-footer .sidebar-menu-item,
#sidebar .sidebar-dropdown .dropdown-toggle {
    color: var(--dg-text-dim) !important;
}
#sidebar .sidebar-dropdown .dropdown-menu {
    background: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
}
#sidebar .sidebar-dropdown .dropdown-menu a,
#sidebar .sidebar-dropdown .dropdown-menu .text {
    color: var(--dg-text) !important;
}
#sidebar .sidebar-dropdown .dropdown-menu a:hover {
    background: rgba(255, 255, 255, .08) !important;
}

/* ----- Objects panel + device list ----------------------------------------------
   #sidebar-content and #objects_tab are real ids in the markup (confirmed via
   loged2.blade.php) — anchoring to them instead of the weaker "html body" padding,
   same fix pattern as the sidebar header/footer above. Covers the panel itself,
   the "Objects" title bar (sidebar-content-header — never targeted before, hence
   staying white at the top corner), and the group/list rows. */
#sidebar-content,
html body .sidebar .sidebar-content,
html body #objects_tab, html body .tab-pane-header, html body .tab-pane-body, html body .tab-pane-footer {
    background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 40%), var(--dg-panel) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
#sidebar-content .sidebar-content-header,
#sidebar-content .sidebar-content-title,
#sidebar-content .sidebar-content-header-actions {
    background: transparent !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
#sidebar-content .title-text,
#sidebar-content .sidebar-content-collapse-btn,
#sidebar-content .sidebar-content-info-btn {
    color: var(--dg-text) !important;
}
html body .sidebar .sidebar-content {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 0 0 1px var(--dg-border) !important;
}
/* Real markup: .group (container) > .group-heading + .group-body > <li> rows with
   NO class of their own (item.blade.php: <li id="list-device-{id}">) — the earlier
   ".group .item"/".list-group-item" guess never matched anything, which is why
   these stayed the theme's plain white. Gradient sheen here too (not flat fill),
   same glossy language as the widget cards and buttons elsewhere in this file.
   Anchored to #objects_tab (a real id) for the same specificity-win reason as
   #sidebar-content above — the plain "html body ..." version was still losing at
   the group container corners and on individual rows for some users.

   Modals (Add Alert's device picker, etc.) reuse this same .group component but
   wrap it in "#ajax-items"/".ajax-items" instead of "#objects_tab" — a different
   compiled rule targets that specifically:
   "body.new-design-active #ajax-items .group{background:#fff}" (1 id + 2 classes
   + 1 type = higher specificity than the #objects_tab-anchored rules above), so
   it needs its own anchor here too, not just a generic ".group" catch-all. */
#objects_tab .group,
#objects_tab .group-heading,
#objects_tab .group-body li,
#ajax-items .group,
.ajax-items .group,
#ajax-items .group-heading,
.ajax-items .group-heading,
#ajax-items .group-body li,
.ajax-items .group-body li,
html body .group-heading,
html body .group-body li {
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 55%), var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
#objects_tab .group-body li:hover,
#ajax-items .group-body li:hover,
.ajax-items .group-body li:hover,
html body .group-body li:hover {
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 55%), #331a24 !important;
}
#objects_tab .group-title-text,
#objects_tab .group-body li [data-device],
#ajax-items .group-title-text,
.ajax-items .group-title-text,
#ajax-items .group-body li [data-device],
.ajax-items .group-body li [data-device],
html body .group-title-text,
html body .group-body li [data-device] {
    color: var(--dg-text) !important;
}
#objects_tab .group-body li .details,
#objects_tab .group-body li .details *,
#ajax-items .group-body li .details,
.ajax-items .group-body li .details,
#ajax-items .group-body li .details *,
.ajax-items .group-body li .details *,
html body .group-body li .details,
html body .group-body li .details * {
    color: var(--dg-text-dim) !important;
}
#objects_tab .group-collapse, #objects_tab .group-body,
#ajax-items .group-collapse, #ajax-items .group-body,
.ajax-items .group-collapse, .ajax-items .group-body,
html body .group-collapse, html body .group-body {
    background: transparent !important;
}
html body .form-control, html body input[type="text"], html body input[type="search"] {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .form-control::placeholder { color: var(--dg-text-dim) !important; }

/* Search-row buttons (filter funnel + add "+") next to the search field —
   objects.blade.php: <span class="input-group-btn"><a class="btn btn-default">
   (filter) and <a class="btn btn-primary"> (add). The generic ".btn" sheen rule
   near the top of this file only layers a gradient OVER whatever background-color
   is already there — it never touches Bootstrap's actual white/light
   background-color on .btn-default/.btn-primary, which is why these stayed
   white chips against the now-dark search bar.

   Scoped to ".tab-pane-header" (a shared class), not just "#objects_tab" — every
   sidebar tab (Geofencing, Routes, POIs, Alerts, ...) reuses this exact same
   search-row markup with its own tab id (#geofencing_tab, #routes_tab, ...), so
   anchoring to one specific id left every other tab's row still white. */
#sidebar-content #objects_tab .input-group,
#sidebar-content #objects_tab .input-group-btn,
#objects_tab .input-group,
#objects_tab .input-group-btn,
html body .tab-pane-header .input-group,
html body .tab-pane-header .input-group-btn {
    background: transparent !important;
}
#sidebar-content #objects_tab .btn-default,
#objects_tab .btn-default,
html body .tab-pane-header .btn-default {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    color: var(--dg-text) !important;
}
#sidebar-content #objects_tab .btn-primary,
#objects_tab .btn-primary,
html body .tab-pane-header .btn-primary {
    background-color: transparent !important;
    background-image: var(--dg-orange) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Sidebar collapse/expand buttons — confirmed selectors from the compiled theme:
   body.new-design-active #sidebar-content .sidebar-content-header
   .sidebar-content-collapse-btn (Objects panel's own collapse arrow) and
   .sidebar-new-design-layout .sidebar-header .sidebar-collapse-btn (the main
   sidebar's hamburger/chevron toggle, next to the Trackit logo). Both have
   background:transparent by default with a #999 gray icon — on the new dark
   background that reads as a washed-out near-white smudge, which is what
   "still white/washed out" was actually describing; forcing a light icon color
   fixes the contrast without needing to fight any competing background rule. */
#sidebar-content .sidebar-content-collapse-btn,
#sidebar-content .sidebar-content-info-btn,
#sidebar .sidebar-collapse-btn,
.sidebar-new-design-layout .sidebar-header .sidebar-collapse-btn {
    background: transparent !important;
    color: var(--dg-text-dim) !important;
}
#sidebar-content .sidebar-content-collapse-btn:hover,
#sidebar .sidebar-collapse-btn:hover,
.sidebar-new-design-layout .sidebar-header .sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffa773 !important;
}

/* ----- Bottom widget cards — each type gets its own gradient identity ----------- */
/* Catch-all default FIRST — there are more widget types than the ones called out
   individually below (Image, Fuel/.widget-sensor-graph, GPRS command, Recent
   events, Locking, Camera, Expiration, the unclassed template_webhook widget…),
   several of which were staying the theme's plain white/gray because nothing
   targeted them at all. This gives every widget a sensible dark gradient by
   default; the specific rules further down (same specificity — a single class
   each — so source order decides) override it for the types worth a distinct
   color identity. */
#widgets .widget {
    background: linear-gradient(150deg, #331a24, #241318) !important;
    border: none !important;
    color: #fff !important;
}
#widgets .widget-heading,
#widgets .widget-body {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
#widgets .widget-body td, #widgets .widget-body th,
#widgets .widget-body .table td, #widgets .widget-body .table th {
    color: rgba(255, 255, 255, .88) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}
#widgets .widget-title, #widgets .widget-title .icon {
    color: #fff !important;
}
/* Empty-state placeholders ("Sensor was not found.", "No events.", "Upload") —
   were rendering as their own light bubble against the new dark card. */
#widgets .widget-body .text-muted,
#widgets .widget-empty,
#widgets .widget-empty * {
    background: transparent !important;
    color: rgba(255, 255, 255, .6) !important;
}

/* Device-info / Driver / Locking cards (all three share class .widget-device in
   this theme's markup) — dark navy, same family as the sidebar. */
#widgets .widget-device:not(#widget-location) {
    background: linear-gradient(150deg, #2e1720, #140a0e) !important;
}
/* Sensors — red (deeper tone than Fuel's, kept distinct so the two don't read
   as identical cards) */
#widgets .widget-sensors {
    background: linear-gradient(150deg, #ef4444, #7f1d1d) !important;
}
/* Services — magenta/purple */
#widgets .widget-services {
    background: linear-gradient(150deg, #c026d3, #7c1fa8) !important;
}
/* Street view — teal */
#widgets .widget-streetview {
    background: linear-gradient(150deg, #0ea89b, #0b6e64) !important;
}
/* Location — purple */
#widget-location.widget-device {
    background: linear-gradient(150deg, #8b5cf6, #6423c9) !important;
}
/* Fuel (sensor graph) — amber/orange, echoing the sidebar accent */
#widgets .widget-sensor-graph {
    background: linear-gradient(150deg, #ff5252, #a4161a) !important;
}
/* Image gallery — indigo */
#widgets .widget-image {
    background: linear-gradient(150deg, #6366f1, #3730a3) !important;
}

/* Expiration widget's inner boxes (expiring_devices.blade.php) — the card
   itself and its plain .widget-body already go dark via the #widgets
   .widget-body rule above, but .widget-expiration-status and
   .widget-expiration-date are separate elements one level deeper, each with
   their own explicit light fill (#faefe0 warning / #f9e7e6 expired / #f3dbdb
   critical / #f9f9f9 date row) that a parent's dark background can't reach. */
#widgets .widget-expiration-status {
    background: rgba(255, 255, 255, .08) !important;
}
#widgets .widget-expiration.expired .widget-expiration-status {
    background: rgba(244, 67, 54, .18) !important;
}
#widgets .widget-expiration.critical .widget-expiration-status {
    background: rgba(211, 47, 47, .22) !important;
}
#widgets .widget-expiration-date {
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .75) !important;
}
#widgets .widget-expiration-date::before {
    color: rgba(255, 255, 255, .55) !important;
}

/* Buttons/badges inside the dark cards need to read against a colored card, not
   the sheen-on-white-bg look used elsewhere on the page. */
#widgets .btn, #widgets .badge {
    background-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .25) !important;
}
#widgets .btn:hover {
    background-color: rgba(255, 255, 255, .26) !important;
}

/* ----- Map controls — orange glossy pills, matching the sidebar's active state -- */
html body .leaflet-bar, html body .leaflet-control {
    background: var(--dg-panel-2) !important;
    border: 1px solid var(--dg-border) !important;
}
html body .leaflet-bar a {
    background: var(--dg-orange) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
html body .leaflet-bar a + a {
    border-top: 1px solid rgba(255, 255, 255, .15) !important;
}

html body .leaflet-popup-content-wrapper {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
}
/* .leaflet-popup-content is a SEPARATE inner div (wrapper > .leaflet-popup-
   content > .popup-content > .popup-header/.popup-body), with its own
   explicit "background:#fff" the wrapper fix above never reached — that's
   what was still showing through the header's transparent background. */
html body .leaflet-popup-content {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    box-shadow: none !important;
}
html body .leaflet-popup-tip {
    background: var(--dg-panel-2) !important;
}
/* History/marker click popup (.leaflet-popup-history etc) — its own inner
   elements each carry an explicit background/color
   (".popup-header{background:#f9f9f9}", ".popup-body{background:#fff;
   color:#595959}", ".popup-title{color:#202020}") that paints over the
   wrapper fix above, since a child's own background always shows regardless
   of its parent's. The address/lat/lng/speed/time table inside .popup-body
   already gets dark cell text from the site-wide "table th, table td" rule
   further down this file — only these three needed their own coverage. */
html body .popup-header {
    background: transparent !important;
    border-bottom: 1px solid var(--dg-border) !important;
}
html body .popup-body {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text-dim) !important;
}
html body .popup-title {
    color: var(--dg-text) !important;
}
html body .popup-header .nav-tabs > li > a {
    color: var(--dg-text-dim) !important;
    background-color: transparent !important;
}
html body .popup-header .nav-tabs > li > a:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .08) !important;
}
/* The compiled theme sets ".fa-times{color:red}" directly on the icon itself
   (not the <a> around it) — a child's own explicit color always wins over an
   inherited parent color regardless of !important, so the "a" fix above never
   reached it; the X was rendering red instead of matching the theme. */
html body .popup-header .fa-times {
    color: var(--dg-text-dim) !important;
}
html body .popup-header a:hover .fa-times {
    color: #fff !important;
}

/* ----- Scrollbars — the default light OS/browser scrollbar stood out against
   every dark panel this file touches (Objects list, tab bodies, and especially
   the bottom widget row's horizontal scrollbar). Thin, dark track with an
   orange-tinted thumb on hover, matching the sidebar's accent color. Firefox
   uses scrollbar-color/-width; everything else uses the ::-webkit- pseudo.

   ".scrollbox"/".table-responsive" added for the History "Data log" table
   (#messages_tab .table-responsive.scrollbox, Reports tables, etc.) — its
   own scrolling container, distinct from every selector already listed here,
   so its bottom (horizontal) and right (vertical) scrollbars were still the
   plain light OS default. */
html body #widgets .widgets-content,
html body #widgets .widget-body,
html body #sidebar-content,
html body #objects_tab .tab-pane-body,
html body .group-body,
html body .scrollbox,
html body .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--dg-panel-2) transparent;
}
html body #widgets .widgets-content::-webkit-scrollbar,
html body #widgets .widget-body::-webkit-scrollbar,
html body #sidebar-content::-webkit-scrollbar,
html body #objects_tab .tab-pane-body::-webkit-scrollbar,
html body .group-body::-webkit-scrollbar,
html body .scrollbox::-webkit-scrollbar,
html body .table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
html body #widgets .widgets-content::-webkit-scrollbar-track,
html body #widgets .widget-body::-webkit-scrollbar-track,
html body #sidebar-content::-webkit-scrollbar-track,
html body #objects_tab .tab-pane-body::-webkit-scrollbar-track,
html body .group-body::-webkit-scrollbar-track,
html body .scrollbox::-webkit-scrollbar-track,
html body .table-responsive::-webkit-scrollbar-track {
    background: transparent !important;
}
html body #widgets .widgets-content::-webkit-scrollbar-thumb,
html body #widgets .widget-body::-webkit-scrollbar-thumb,
html body #sidebar-content::-webkit-scrollbar-thumb,
html body #objects_tab .tab-pane-body::-webkit-scrollbar-thumb,
html body .group-body::-webkit-scrollbar-thumb,
html body .scrollbox::-webkit-scrollbar-thumb,
html body .table-responsive::-webkit-scrollbar-thumb {
    background: var(--dg-panel-2);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html body #widgets .widgets-content::-webkit-scrollbar-thumb:hover,
html body #widgets .widget-body::-webkit-scrollbar-thumb:hover,
html body #sidebar-content::-webkit-scrollbar-thumb:hover,
html body #objects_tab .tab-pane-body::-webkit-scrollbar-thumb:hover,
html body .group-body::-webkit-scrollbar-thumb:hover,
html body .scrollbox::-webkit-scrollbar-thumb:hover,
html body .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #ff7828;
    background-clip: padding-box;
}

/* =================================================================================
   MODALS — every modal on the site (Reports, Send command, Geofences, etc.) was
   left untouched until now, which produced a mismatch: the modal chrome stayed
   the theme's white, while its own .form-control inputs picked up the global
   dark-field rule above, so you'd get dark input boxes floating inside a white
   card. Bringing the whole modal shell into the same dark language fixes that.
   ================================================================================= */
html body .modal-content {
    background: var(--dg-panel) !important;
    color: var(--dg-text) !important;
    border: 1px solid var(--dg-border) !important;
}
html body .modal-header, html body .modal-footer {
    background: transparent !important;
    border-color: var(--dg-border) !important;
}
html body .modal-title,
html body .modal-body,
html body .modal-body label,
html body .modal-body .control-label,
html body .modal-body h1, html body .modal-body h2, html body .modal-body h3,
html body .modal-body h4, html body .modal-body h5 {
    color: var(--dg-text) !important;
}
html body .modal-body .text-muted,
html body .modal-body small {
    color: var(--dg-text-dim) !important;
}
html body .modal .close {
    color: var(--dg-text-dim) !important;
    opacity: .85;
    text-shadow: none !important;
}
html body .modal .close:hover {
    color: #fff !important;
    opacity: 1;
}
html body .modal hr,
html body .modal .divider,
html body .modal .panel,
html body .modal .well {
    border-color: var(--dg-border) !important;
    background: var(--dg-panel-2) !important;
}

/* Setup modal's Widgets/Dashboard tabs — each widget-picker box
   (MyAccountSettings/edit.blade.php's ".dashboard-widget", one per checkbox +
   drag handle) has its own hardcoded "background:#eee" in the compiled theme
   (light-orange.css), separate from the .panel/.well rule above since it's
   its own class, not either of those. Left unstyled it stays a light-grey
   card floating inside the otherwise-dark modal. */
html body .modal .dashboard-widget {
    background: var(--dg-panel-2) !important;
    border: 1px solid var(--dg-border) !important;
    border-radius: 8px !important;
}

/* Tab strip inside modals (e.g. Reports' Main / Generated reports / Scheduled
   reports logs) */
html body .modal .nav-tabs {
    border-color: var(--dg-border) !important;
}
html body .modal .nav-tabs > li > a {
    color: var(--dg-text-dim) !important;
    background: transparent !important;
    border-color: transparent !important;
}
html body .modal .nav-tabs > li.active > a,
html body .modal .nav-tabs > li.active > a:hover,
html body .modal .nav-tabs > li.active > a:focus {
    background: var(--dg-panel-2) !important;
    color: #fff !important;
    border-color: var(--dg-border) var(--dg-border) transparent !important;
}

/* Buttons inside modals — same dark/orange treatment as the sidebar's search
   row (Save/New/Cancel/Generate, Test FTP, etc.), generalized beyond that one
   #objects_tab scope now that modals need it too. */
html body .modal .btn-default {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    color: var(--dg-text) !important;
}
html body .modal .btn-primary {
    background-color: transparent !important;
    background-image: var(--dg-orange) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Bootstrap-select custom dropdowns ("Nothing selected" — Devices/Geofences) and
   any plain <select>/dropdown-menu inside a modal. */
html body .modal .bootstrap-select .dropdown-toggle,
html body .modal select.form-control,
html body .modal .dropdown-toggle.btn-default {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .modal .dropdown-menu {
    background: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
}
html body .modal .dropdown-menu > li > a {
    color: var(--dg-text) !important;
}
html body .modal .dropdown-menu > li > a:hover {
    background: rgba(255, 255, 255, .08) !important;
}
html body .modal .radio label, html body .modal .checkbox label {
    color: var(--dg-text) !important;
}

/* Typed-in text inside modal inputs was still showing dark — the earlier global
   field rule only covered ".form-control"/input[type=text]/[type=search], so
   anything of a different type (email, date/time picker fields, textarea) or
   missing the .form-control class outright fell through and kept the theme's
   default dark text color. Blanket bare-tag selectors here catch all of them
   regardless of type or class. */
html body .modal input,
html body .modal textarea,
html body .modal select {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
    caret-color: var(--dg-text);
}
html body .modal input::placeholder,
html body .modal textarea::placeholder {
    color: var(--dg-text-dim) !important;
}

/* Tables inside modals (Alerts list, Send command log, etc.) — Bootstrap's
   .table has its own explicit white background that none of the rules above
   touched, so it sat as a bright band inside an otherwise-dark modal. */
html body .modal table,
html body .modal .table {
    background: transparent !important;
    color: var(--dg-text) !important;
}
html body .modal table th,
html body .modal table td,
html body .modal .table > thead > tr > th,
html body .modal .table > tbody > tr > td {
    background: transparent !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .modal .table > tbody > tr:hover > td {
    background: rgba(255, 255, 255, .05) !important;
}
html body .modal table th .icon,
html body .modal .no-results {
    color: var(--dg-text-dim) !important;
}

/* The actual override culprit: light-orange.css sets
   ".table.table-list > thead > tr { background-color: #eee }" — on the ROW
   itself, not the header <th> cells. My th/td rules above never touched the
   <tr>, so with the cells transparent, that gray row fill was still showing
   through underneath. ".table-list" has 2 classes in its chain (0,2,2
   specificity); matching that class count and adding more type selectors
   (thead, tr) pushes mine ahead (0,2,4) without needing to out-class it.

   NOT scoped to .modal only — the same table-list markup is reused outside
   modals too (e.g. History's "Data log" tab inside #bottom-history), so the
   unscoped versions below cover those the .modal-anchored ones can't reach. */
html body .modal .table-list > thead > tr,
html body .modal .table.table-list > thead > tr,
html body .modal table thead tr,
html body .table-list > thead > tr,
html body .table.table-list > thead > tr,
html body table thead tr {
    background-color: transparent !important;
    color: var(--dg-text) !important;
}
html body .modal .table-list > tbody > tr:hover,
html body .modal .table.table-list > tbody > tr:hover,
html body .table-list > tbody > tr:hover,
html body .table.table-list > tbody > tr:hover {
    background-color: rgba(255, 255, 255, .05) !important;
}
html body table th, html body table td {
    background: transparent !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body table th .icon, html body .no-results {
    color: var(--dg-text-dim) !important;
}

/* =================================================================================
   GLOBAL UI PRIMITIVES — proactive sweep of the compiled theme's remaining
   explicit white/light-gray backgrounds (#fff, #f9f9f9, #eee, #f5f5f5) on shared
   Bootstrap/plugin components that appear throughout modals AND the main UI, not
   just the specific spots reported so far one at a time. Scoped broadly (not to
   one container id) since these are reusable widgets that can show up anywhere.
   ================================================================================= */

/* Plain Bootstrap panels — .panel{background-color:#fff} was never touched
   before (only got border-radius/shadow in the very first section of this
   file); .panel-footer/.well/.thumbnail share the same #f9f9f9. */
html body .panel, html body .plan, html body .well, html body .thumbnail,
html body .img-thumbnail {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .panel-heading, html body .panel-footer, html body .plan-footer {
    background-color: rgba(255, 255, 255, .04) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}

/* Bootstrap list-group — .list-group-item{background-color:#fff} was only ever
   given a hover transition, never an actual dark fill. */
html body .list-group-item, html body .list-group > li {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}

/* Custom checkbox/radio indicator squares/circles (::before/::after driven) —
   small but very visible as light squares dotted across dark panels/modals. */
html body .checkbox label::before, html body .checkbox-inline label::before,
html body .group .checkbox label::before, html body .table .checkbox label::before,
html body .radio label::after, html body .radio-inline label::after {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
}

/* bootstrap-select / select2 custom dropdown widgets, outside the .modal scope
   they were already covered in above (e.g. filters in the main Objects sidebar,
   Reports/Alerts pages outside a modal). */
html body .bootstrap-select > .dropdown-toggle,
html body .bootstrap-select.open > .dropdown-toggle,
html body .bootstrap-select .dropdown-menu.inner > li.dropdown-header,
html body .bootstrap-select .no-results {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .select2-container .select2-selection {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .select2-dropdown, html body .select2-results__option {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
}
html body .select2-results__option--highlighted {
    background-color: rgba(255, 255, 255, .1) !important;
}

/* Input-group addons (icon prefixes/suffixes glued to a .form-control). */
html body .input-group-addon {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text-dim) !important;
    border-color: var(--dg-border) !important;
}

/* Pagination (tables, DataTables) */
html body .pagination > li > a, html body .pagination > li > span,
html body .dataTables_paginate .paginate_button {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .pagination > .active > a, html body .pagination > .active > span,
html body .dataTables_paginate .paginate_button.current {
    background-color: rgba(255, 255, 255, .12) !important;
}

/* Date/time pickers — the actual calendar popup for fields like Reports'
   "Date from / Date to", not just the input box itself (already covered
   generically via the modal input rule). These render as a floating white
   card of their own, separate from the modal's own background. */
html body .datepicker, html body .datetimepicker, html body .daterangepicker,
html body .daterangepicker .calendar-table {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
}
html body .datepicker table tr td, html body .datepicker table tr th,
html body .datetimepicker table tr td, html body .datetimepicker table tr th {
    color: var(--dg-text) !important;
}
html body .datepicker table tr td.day:hover,
html body .datetimepicker table tr td.day:hover,
html body .datepicker table tr td span:hover,
html body .datetimepicker table tr td span:hover {
    background: rgba(255, 255, 255, .1) !important;
}
html body .daterangepicker select.yearselect,
html body .daterangepicker select.monthselect {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}

/* Address/geocoding autocomplete dropdown */
html body .autocomplete-dropdown, html body .autocomplete-suggestions {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .autocomplete-item:hover, html body .autocomplete-selected {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* Any .dropdown-menu anywhere, not just inside a .modal or the sidebar account
   menu — the theme's own ".dropdown-menu{background:#fff}" is completely
   unscoped, so every three-dot device-row menu, bulk-action gear menu, etc.
   outside those two specific contexts was still white. */
html body .dropdown-menu {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .dropdown-menu > li > a {
    color: var(--dg-text) !important;
}
html body .dropdown-menu > li > a:hover,
html body .dropdown-menu > li > a:focus,
html body .dropdown-menu > .active > a {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--dg-text) !important;
}

/* Leaflet hover tooltip (distinct from the click popup already covered) */
html body .leaflet-tooltip {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}

/* Alternate group-list component (e.g. device/geofence group management lists,
   distinct from the Objects sidebar's .group-body). */
html body .group-list > li:hover {
    background-color: rgba(255, 255, 255, .08) !important;
}

/* Events tab list (Tobuli/Views/Frontend/Events/index.blade.php's ".event-item"
   rows) — its own component, separate from the Objects sidebar's .group-body
   li this file already covers, with its own explicit "background-color:#f9f9f9"
   in the compiled theme that was never touched before, so it sat as a light
   card strip regardless of theme. */
html body .event-item {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
}
html body .event-item:hover {
    background-color: rgba(255, 255, 255, .08) !important;
}
html body .event-icon, html body .event-icon i {
    color: var(--dg-text-dim) !important;
}
html body .event-title, html body .event-device {
    color: var(--dg-text) !important;
}
html body .event-datetime, html body .event-speed {
    color: var(--dg-text-dim) !important;
}
html body .event-actions .btn-group .btn.icon.options {
    color: var(--dg-text-dim) !important;
}
html body .event-actions .btn-group .btn.icon.options:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    color: #ffa773 !important;
}

/* "multiexpand" bootstrap-select variant (a dropdown with its own mini-pagination
   footer for long option lists) — its .bs-pagination bar and the page-number
   links inside it carry their own explicit white/light fills separate from the
   plain .bootstrap-select rules above. */
html body .bootstrap-select.multiexpand .bs-pagination {
    background: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
}
html body .bootstrap-select.multiexpand .bs-pagination .nav-pagination .pagination > li > a,
html body .bootstrap-select.multiexpand .bs-pagination .nav-pagination .pagination > li > span {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .bootstrap-select.multiexpand .bs-pagination .nav-pagination .pagination > .active > span {
    background-color: rgba(255, 255, 255, .12) !important;
}
/* The dropdown's own outer border (open state) and inner scrollable option list —
   separate elements from the pagination bar above, each with their own
   #d9d9d9-family border in the compiled theme. */
html body .bootstrap-select.multiexpand.open > .dropdown-toggle,
html body .bootstrap-select.multiexpand .dropdown-menu,
html body .bootstrap-select.multiexpand .dropdown-menu.inner {
    border-color: var(--dg-border) !important;
    background-color: var(--dg-panel-2) !important;
}

/* =================================================================================
   PORTAL DROPDOWNS, SELECT2, AND DATE-RANGE PICKER — the actual root cause of
   "Reports modal dropdown still white": the new_design theme renders some
   dropdowns (Devices/Geofences pickers) through
   ".dropdown-menu-portal-container .dropdown-menu-portal", a class that gets
   appended OUTSIDE the .modal's DOM subtree entirely when opened — every
   ".modal .dropdown-menu"/".modal .bootstrap-select" rule above structurally
   cannot reach it, regardless of specificity, because it's not a descendant of
   .modal by the time it's shown. Needs its own unscoped rule. Same root issue
   for select2 (a different multi-select plugin, not bootstrap-select) and the
   daterangepicker's individual day cells, both confirmed still using explicit
   #fff/#eee fills nothing above touched.
   ================================================================================= */
html body .dropdown-menu-portal-container .dropdown-menu-portal {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
}
html body .dropdown-menu-portal-container .dropdown-menu-portal > li > a {
    color: var(--dg-text) !important;
}
html body .dropdown-menu-portal-container .dropdown-menu-portal > li > a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffa773 !important;
}

/* select2 (separate from bootstrap-select — used for some multi-selects, e.g.
   Reports' Devices/Geofences fields depending on which widget that form uses). */
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple,
html body .select2-dropdown {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    color: var(--dg-text) !important;
}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: var(--dg-border) !important;
    color: var(--dg-text) !important;
}
html body .select2-container--default .select2-results__option {
    color: var(--dg-text) !important;
}
html body .select2-container--default .select2-results__option--selected {
    background-color: rgba(255, 255, 255, .1) !important;
}
html body .select2-search__field {
    background-color: transparent !important;
    color: var(--dg-text) !important;
}

/* daterangepicker's individual day cells (off-month/in-range states) — the
   container itself was already dark, but each <td> carries its own explicit
   fill that showed through as light squares across the calendar grid. */
html body .daterangepicker td.off, html body .daterangepicker td.off.start-date,
html body .daterangepicker td.off.end-date {
    background-color: transparent !important;
    color: var(--dg-text-dim) !important;
}
html body .daterangepicker td.in-range {
    background-color: rgba(255, 255, 255, .1) !important;
    color: var(--dg-text) !important;
}
html body .daterangepicker td.active, html body .daterangepicker td.active:hover {
    background-color: #ff7828 !important;
    color: #fff !important;
}
html body .daterangepicker .ranges li {
    color: var(--dg-text) !important;
}
html body .daterangepicker .ranges li.active {
    background-color: #ff7828 !important;
    color: #fff !important;
}
html body .daterangepicker select.secondselect,
html body .daterangepicker select.hourselect,
html body .daterangepicker select.minuteselect,
html body .daterangepicker select.ampmselect {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}

/* Quick-filter pills (All/Online/Move/Stop/Idle/.../Expired) above the device
   list — NOT from the compiled theme at all, but an inline <style> block inside
   objects.blade.php itself (no !important there). Since that block is part of
   the page body and loads after this file's <link> in document order, a plain
   specificity tie would go to it; !important here is what actually wins. Active
   state recolored from the blade file's own blue (#337ab7) to the same orange
   used for the sidebar's active nav pill, for consistency. */
html body .dsf-pill {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text-dim) !important;
    border-color: var(--dg-border) !important;
}
html body .dsf-pill:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: var(--dg-border) !important;
    color: var(--dg-text) !important;
}
html body .dsf-pill.active {
    background: var(--dg-orange) !important;
    border-color: transparent !important;
    color: #fff !important;
}
html body .dsf-count {
    background: rgba(255, 255, 255, .1) !important;
    color: var(--dg-text-dim) !important;
}
html body .dsf-pill.active .dsf-count {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}
/* Same inline-<style> situation as .dsf-pill above — the filter row's own
   bottom border (#e8e8e8) and its left/right scroll-fade arrows (gradient
   fading to a light #fafafa, plus a #555 icon color) all come from the same
   block in objects.blade.php with no !important. */
html body .device-status-filters {
    border-bottom-color: var(--dg-border) !important;
}
html body .dsf-arrow {
    color: var(--dg-text-dim) !important;
}
html body .dsf-arrow:hover {
    color: #fff !important;
}
html body .dsf-arrow-left {
    background: linear-gradient(to right, var(--dg-panel) 55%, rgba(36, 19, 24, 0)) !important;
}
html body .dsf-arrow-right {
    background: linear-gradient(to left, var(--dg-panel) 55%, rgba(36, 19, 24, 0)) !important;
}

/* =================================================================================
   MAP TOOLBAR (.map-controls) — a separate component from Leaflet's own
   .leaflet-bar/.leaflet-control (zoom +/-, already covered above): this is the
   app's own custom overlay toolbar for fullscreen/layers/ruler/locate/etc,
   built from Bootstrap .btn-group-vertical markup, joined into segmented bars
   with background:#fff on the container and only the first/last button getting
   rounded corners. Split into individual glossy floating pills instead, with a
   visible gap between buttons, matching the rest of this file's button language.
   ================================================================================= */
html body .map-controls .btn-group-vertical {
    background: transparent !important;
    box-shadow: none !important;
    gap: 6px !important;
}
html body .map-controls .btn-group-vertical .btn {
    background: var(--dg-orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 12px rgba(0, 0, 0, .35) !important;
    transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
html body .map-controls .btn-group-vertical .btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 16px rgba(0, 0, 0, .45) !important;
}
html body .map-controls .btn-group-vertical .btn:active {
    transform: translateY(0);
}
html body .map-controls .btn-group-vertical .btn.active,
html body .map-controls .btn-group-vertical .btn[aria-pressed="true"] {
    background: var(--dg-panel-2) !important;
    box-shadow: inset 0 0 0 2px #ff7828, inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
/* Fallback for any map-toolbar button outside .btn-group-vertical entirely —
   e.g. #ruler-btn, whose icon uses a single combined class ("icon-gps-ruler")
   rather than a separate ".icon" class, so it never matched the site-wide
   icon-button catch-all (which keys on :has(.icon) specifically) either. */
html body .map-controls .btn,
html body #ruler-btn, html body #ruler-group .btn {
    background: var(--dg-orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 12px rgba(0, 0, 0, .35) !important;
}
html body .map-controls .btn:hover,
html body #ruler-btn:hover, html body #ruler-group .btn:hover {
    filter: brightness(1.08);
}

/* Tools modal (grid of Camera/Tasks/Maintenance/Drivers/Device Config cards) —
   Tobuli/Views/Frontend/Objects/tools/modal.blade.php's own inline <style>
   already sets "background:#fff !important" on ".tools-modal-wrapper
   .configuration-menu.tools-menu .item" (4 classes, 0,4,0 specificity). Since
   it's already !important, only an equal-or-greater specificity !important rule
   can beat it — matching its exact class chain plus an html/body prefix (which
   only adds type selectors, keeping the class count tied) is what wins here. */
html body .tools-modal-wrapper .configuration-menu.tools-menu .item {
    background: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    color: var(--dg-text) !important;
}
html body .tools-modal-wrapper .configuration-menu.tools-menu .item:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: #ff7828 !important;
    color: #ffa773 !important;
}
html body .tools-modal-wrapper .configuration-menu.tools-menu .item:hover .item__icon {
    color: #ffa773 !important;
}

/* =================================================================================
   ICON-BUTTON CATCH-ALL — the actual root cause behind several earlier "still
   white" icon-button reports (filter/three-dot/gear buttons etc.): the compiled
   theme has one big rule covering nearly every icon-only .btn-default/.btn-primary/
   plain <a>/<button> containing an .icon, EXCLUDING sidebar nav items via :not().
   Each ":not(.x)"/":has(.icon)" adds one class of specificity, so its real
   specificity is 6 classes + 1 type — far more than any plain-class selector
   above could beat. Only a selector matching that exact chain (copied verbatim,
   values swapped) reliably wins; a shorter equivalent loses on class count alone
   regardless of !important. */
body.new-design-active .btn-action:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active .btn-default:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active .btn-group-xs>.btn:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active .btn-group-xs>a.btn:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active .btn-primary:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active .btn-xs:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active a.btn-action:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active a.btn-default:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active a.btn-primary:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active a.btn-xs:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active a:has(.icon):not(.btn-default):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle),
body.new-design-active button:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle) {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
body.new-design-active .btn-action:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active .btn-default:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active .btn-group-xs>.btn:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active .btn-group-xs>a.btn:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active .btn-primary:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active .btn-xs:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active a.btn-action:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active a.btn-default:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active a.btn-primary:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active a.btn-xs:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active a:has(.icon):not(.btn-default):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover,
body.new-design-active button:has(.icon):not(.sidebar-collapse-btn):not(.sidebar-menu-item):not(.sidebar-menu-group-toggle):hover {
    background: rgba(255, 255, 255, .1) !important;
    color: var(--dg-text) !important;
}

/* Same catch-all, generalized: the compiled rule above only keys on ":has(.icon)"
   (a literal ".icon" class), but many icons in this app are single combined
   classes like "icon-gps-eye"/"icon-gps-ruler" with no separate ".icon" class at
   all — those never matched, on #ruler-btn, the widget address-preview "eye"
   button, and presumably others still to be found. ID-anchored (#widgets) rules
   already win these via specificity; this covers everywhere else. */
html body .btn:has([class*="icon-gps-"]),
html body a:has([class*="icon-gps-"]):not(.sidebar-menu-item):not(.dsf-pill),
html body button:has([class*="icon-gps-"]) {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .btn:has([class*="icon-gps-"]):hover,
html body a:has([class*="icon-gps-"]):not(.sidebar-menu-item):not(.dsf-pill):hover,
html body button:has([class*="icon-gps-"]):hover {
    background: rgba(255, 255, 255, .1) !important;
}

/* =================================================================================
   INPUT TEXT COLOR — global safety net + WebKit autofill fix. The typed-text
   color rule was only ever applied inside ".modal" or via ".form-control"/
   input[type=text|search]; a plain <input class="form-control" type="text"> on a
   non-modal page (e.g. a standalone form) could fall outside both. Separately,
   Chrome/Safari force their own black text on autofilled/browser-remembered
   fields via an internal -webkit-text-fill-color that a normal "color" rule
   cannot override — needs the dedicated :-webkit-autofill fix below.
   ================================================================================= */
html body input, html body textarea, html body select {
    color: var(--dg-text) !important;
    caret-color: var(--dg-text);
}
/* The compiled theme has several "input:focus{color:#555!important}" rules
   (dark gray) — a :focus pseudo-class counts as a class in specificity, which
   beats the plain type-only selector above regardless of !important on both
   sides, so typed text was reverting to dark the moment the field was
   focused. Repeating the rule with :focus explicitly re-wins that tie. */
html body input:focus, html body textarea:focus, html body select:focus {
    color: var(--dg-text) !important;
}
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill,
html body select:-webkit-autofill {
    -webkit-text-fill-color: var(--dg-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--dg-panel-2) inset !important;
    box-shadow: 0 0 0 1000px var(--dg-panel-2) inset !important;
    caret-color: var(--dg-text) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Map layer-switcher popup (base layers: Carto/Google/OSM/etc + any overlays) —
   a separate component from the .leaflet-control-layers toggle button itself
   (already covered by the generic .leaflet-control rule); this is the dropdown
   list it opens, never targeted before. */
html body .leaflet-control-layers .leaflet-control-layers-list {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    color: var(--dg-text) !important;
}
html body .leaflet-control-layers-list label,
html body .leaflet-control-layers-list span {
    color: var(--dg-text) !important;
}
html body .leaflet-control-layers-list label:hover {
    background: rgba(255, 255, 255, .08) !important;
}
html body .leaflet-control-layers-separator {
    background-color: var(--dg-border) !important;
}

/* Loading overlay(s) — main-page preloader (#loading, Layouts/partials/
   loading.blade.php) and any other AJAX-panel spinner reusing the shared
   ".loading" class (sidebar tab switches, bottom bar, etc.) — same
   "color-mix(in srgb,#fff,transparent 10%)" near-white fill as the earlier
   #widgets bug, just unscoped this time (no body.new-design-active prefix
   needed to beat it). The dot-spinner itself (.loader) is untouched — it's
   already orange via currentColor, not part of this bug. */
html body .loading, html body #loading {
    background: var(--dg-bg) !important;
}

/* Alert-type picker cards (Overspeed, etc., in the Add Alert modal's event-type
   grid) — styled via an INLINE style="background-color:#fff" attribute right on
   the element rather than any stylesheet rule. A plain inline style still loses
   to a stylesheet rule that carries !important, so this reaches it fine despite
   not being in any CSS file at all. */
html body .event-type-card {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
}
html body .event-type-card .card-title {
    color: var(--dg-text) !important;
}
html body .event-type-card:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: #ff7828 !important;
}

/* =================================================================================
   HISTORY — trip/stop cards in the sidebar list, and the entire bottom playback
   bar (#bottom-history: speed/altitude graph, play controls, data log). A whole
   module never touched before now; the sidebar's own search/date-range/button
   row above it already reads correctly since it reuses .tab-pane-header/.btn
   primitives covered earlier — only this module-specific markup was missing.
   ================================================================================= */
html body .history-cards .history-card {
    background: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    box-shadow: none !important;
}
html body .history-card-details,
html body .history-card-details * {
    color: var(--dg-text) !important;
}
/* .history is the outer container wrapping every card — a separate compiled
   rule from .history-card itself ("padding:5px 0;background-color:#f9f9f9"),
   never covered before, so its padding strip showed as a white band behind/
   around the (already-dark) cards. */
html body .history {
    background-color: var(--dg-panel) !important;
}
html body .history-card-datetime {
    color: var(--dg-text-dim) !important;
}
html body .history-cards .history-card .history-icon-badge {
    background: var(--dg-panel-2) !important;
    box-shadow: 0 0 0 1px var(--dg-panel-2) !important;
}
html body .history-cards .history-card .history-icon-start,
html body .history-cards .history-card .history-icon-end {
    background: rgba(255, 255, 255, .12) !important;
    color: var(--dg-text) !important;
}

/* Bottom playback bar container + its sub-panels (header tabs, graph controls) */
html body #bottom-history {
    background: var(--dg-panel) !important;
    color: var(--dg-text) !important;
}
html body #bottom-history .bottom-history-header,
html body #bottom-history .graph-controls,
html body #bottom-history .tab-content {
    background: transparent !important;
    color: var(--dg-text) !important;
}
html body #bottom-history-toggle-btn {
    background: var(--dg-orange) !important;
    color: #fff !important;
}
/* Speed/Altitude tabs, Graph/Data log toggle, playback speed ("x1") selector */
html body #bottom-history .nav-tabs > li > a,
html body #bottom-history .btn-default {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--dg-text-dim) !important;
    border-color: var(--dg-border) !important;
}
html body #bottom-history .nav-tabs > li.active > a,
html body #bottom-history .btn-default.active {
    background: var(--dg-orange) !important;
    color: #fff !important;
    border-color: transparent !important;
}
html body #bottom-history select,
html body #bottom-history .bootstrap-select > .dropdown-toggle {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
/* Speed graph axis/grid labels (0kph/1kph/-1kph, time marks along the bottom) */
html body #bottom-history .flot-text,
html body #bottom-history .graph-axis-label {
    color: var(--dg-text-dim) !important;
}

/* =================================================================================
   ECODRIVE — reuses .history-card (already dark from the History fix above) for
   its per-segment cards, but everything inside each card (header title, timeline
   connector, detail rows) and the separate .ecodrive-summary panel below the
   card list carry their own explicit light colors never touched until now.
   ================================================================================= */
html body .history-card-title,
html body .history-timeline-label, html body .history-timeline-value,
html body .history-detail-label, html body .history-detail-value,
html body .history-detail-more {
    color: var(--dg-text) !important;
}
html body .history-card-header .ecodrive-segment-info-icon {
    color: var(--dg-text-dim) !important;
}
/* Timeline connector line/dot are functional status color (drive=green etc via
   currentColor-ish inline classes), just needs its border to not read as a hard
   light ring against the dark card. */
html body .history-timeline-dot {
    border-color: var(--dg-panel-2) !important;
}

/* .ecodrive-summary panel (RAG score + stats + scores below the segment cards) */
html body .ecodrive-summary {
    background: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
}
html body .ecodrive-summary .ecodrive-header h3 {
    color: var(--dg-text) !important;
}
html body .ecodrive-summary .ecodrive-stats .ecodrive-stat-item,
html body .ecodrive-summary .ecodrive-scores {
    background: rgba(255, 255, 255, .05) !important;
    border-color: var(--dg-border) !important;
}
html body .ecodrive-stat-label, html body .ecodrive-stat-value,
html body .ecodrive-score-label, html body .ecodrive-score-value {
    color: var(--dg-text) !important;
}
/* RAG score badge (green/yellow/red) keeps its own status color — those already
   read fine (bright fill + dark/white text per color), left untouched. */

/* .history-card-details container itself (background:#f9f9f9) — the earlier fix
   only recolored the label/value text inside it, never the row's own card-within-
   card background, which is why it still read as a light block. */
html body .history-card-details {
    background: rgba(255, 255, 255, .05) !important;
}

/* .ecodrive-card — a separate component from .history-card, used on the
   Ecodrive "View details" page (Distance/Overspeed/etc summary tiles). */
html body .ecodrive-card {
    background-color: var(--dg-panel-2) !important;
    border-color: var(--dg-border) !important;
    box-shadow: none !important;
}
html body .ecodrive-card-header, html body .ecodrive-card-header i,
html body .ecodrive-card-value {
    color: var(--dg-text) !important;
}

/* =================================================================================
   DEVICE ROW REDESIGN — reworks the visual language of each device list row
   (Objects/tabs/objects.blade.php's rendered <li>, via item.blade.php) into a
   card-style layout: bold name, a status pill, a glowing accent, and a
   highlighted "stopped since" box. Deliberately CSS-ONLY — item.blade.php is
   unchanged. Every [data-device="..."] span below is exactly the element the
   app's JS live-updates on each GPS ping (name/status/time/speed refresh in
   place without a page reload); restructuring that markup would risk breaking
   those updates app-wide, since this same partial renders every device list in
   the app (Objects sidebar, Sharing, device pickers, ...). Everything here is
   pure re-layout/re-skin of the existing elements plus ::before/::after
   decoration, which JS can't see or touch.

   One honest gap versus the reference: its "Last Update / Location" column
   shows reverse-geocoded address text that this component has no data for at
   all (that lookup only happens in the widget/map popups) — showing a static
   "No Location" here would be fake, so that column is intentionally left out
   rather than faked.
   ================================================================================= */
html body .group-body li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto;
    align-items: start;
    column-gap: 10px;
    margin: 6px;
    row-gap: 2px;
    padding: 7px 10px !important;
    position: relative;
    overflow: hidden;
}
/* Glowing left accent bar, replacing the theme's plain orange border-left on
   the active/selected row. */
html body .group-body li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #f87171, #dc2626);
    box-shadow: 0 0 10px rgba(220, 38, 38, .7);
    opacity: 0;
}
html body .group-body li.active::before,
html body .group-body li.selected::before {
    opacity: 1;
}
/* Full glowing outline on the selected/active card (reference shows the whole
   card lit up, not just the left bar). */
html body .group-body li.active,
html body .group-body li.selected {
    box-shadow: 0 0 0 1px rgba(220, 38, 38, .55), 0 0 22px rgba(220, 38, 38, .22) !important;
    border-radius: 14px !important;
}

/* ----- Checkbox: just re-placed into the grid, appearance left alone --------
   Earlier attempts here rebuilt the checkbox as a custom circular button
   (hiding the native <input> via opacity:0 and drawing a fake circle+checkmark
   via the <label>), but that fought the compiled theme's OWN native checkbox
   skin (a separate, newer rule: "input[type=checkbox]{width:1.25rem;
   height:1.25rem;border-radius:.375rem;border:1.5px solid #e9e9e9}" +
   ":checked{background-color:#ff7828}") and lost — some WebView engines still
   let that native OS-level control skin paint through opacity:0, which is what
   produced the stray orange blob/border.

   The group-heading's own checkbox (Objects/groups.blade.php) uses this exact
   same ".checkbox"/<label> markup and is never touched by this file — it just
   renders the theme's native checkbox as-is, and that looks correct. So this
   now does the same for device rows: only grid placement/sizing here, zero
   appearance overrides, matching the group-heading checkbox exactly. */
html body .group-body li .checkbox {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    margin: 0 !important;
    padding: 0 !important;
}
/* Only the checkbox's own border removed here (the native theme rule is
   "input[type=checkbox]{border:1.5px solid #e9e9e9}") — scoped to this one
   input, so it can't touch the card's (<li>) own border/glow, which stays
   exactly as it is. Size/background/checked-color are still 100% native. */
html body .group-body li .checkbox input[type="checkbox"] {
    border: none !important;
}

/* ----- Name column: bold name + status pill + timestamp + duration box -----
   .name wraps name/status/time/time_text, but the last two need to span the
   FULL card width (checkbox-to-menu), not just this narrow middle column —
   "display:contents" drops .name's own box and lets its children become
   direct grid items of the <li> grid below, each placed on its own
   grid-row/-column. The div itself (and its onClick="app.devices.select(...)"
   handler) stays in the DOM/event tree exactly as before — display:contents
   only removes the box from layout/painting, not the element or its listener;
   clicking any child still bubbles through it. */
html body .group-body li .name {
    display: contents;
    cursor: pointer;
}
html body .group-body li .name [data-device="name"] {
    grid-column: 2 / -1; /* its own full-width top row — col 3 is free now that
                             .details/speed moved down onto the status row */
    grid-row: 1;
    min-width: 0; /* lets a 1fr grid track actually shrink to its column instead
                     of growing to fit this text's intrinsic (unbreakable) width */
    align-self: start;
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important; /* never cut the name short — this row now
                                      spans the full card width (checkbox to
                                      right edge), so there's room for it */
    text-overflow: unset !important;
    white-space: nowrap !important;
    margin-right: 0 !important;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
/* Status pill — already carries a real per-status background-color inline from
   getStatusColor(); just reshaping it into a rounded pill with a status dot,
   not recoloring it (that color is meaningful, functional data).

   The compiled theme's own rule for this element is
   "[data-device=status]{display:inline-block;width:8px;height:8px;
   border-radius:50%;...;text-indent:999999px;overflow:hidden}" — it's built to
   be an 8px color DOT with its real text (Online/Offline/...) pushed off-screen
   via text-indent, never meant to show as a labeled pill. That's why the status
   text wasn't rendering as a pill before: width/height/text-indent/overflow all
   needed an explicit reset (!important — the compiled rule has none of its own,
   but its 1-attribute-selector specificity still needed matching, not just a
   plain class rule). */
html body .group-body li .name [data-device="status"] {
    grid-column: 2 / -1; /* shares row 2 with .details/speed below — both are
                             placed in this same spanning cell, one pinned to
                             its start edge and the other (.details) to its
                             end edge, so they land side by side on one row */
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin-top: 2px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: fit-content !important;
    height: auto !important;
    text-indent: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    padding: 3px 10px 3px 8px !important;
    border-radius: 20px !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
    color: #0a0a0a !important; /* an earlier global rule
       (".group-body li [data-device]{color:var(--dg-text) !important}", meant
       for light text on this card's dark background) also matches this span
       and was winning over the plain (non-!important) color above — !important
       vs !important is required to actually override it. Dark text is fine
       against status colors like green/yellow; only white text was illegible
       on the light yellow "idle" background specifically. */
    opacity: .92;
}
html body .group-body li .name [data-device="status"]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a0a0a;
    opacity: .55;
    flex-shrink: 0;
}
/* [data-device="time"] holds "YYYY-MM-DD HH:MM:SS" as one text node — a small
   companion script (public/assets/custom/js.js, loaded the same zero-code-change
   way as this file via Appearance::assetFileExists('js')) splits it into the
   ".dg-date-col"/".dg-time-col" pair styled below, purely as a display
   decoration layered on top of the live-updated text (it re-splits after every
   JS update instead of racing it — see that file's comment for how). If that
   script hasn't run yet (JS disabled, or before DOMContentLoaded) this still
   degrades to plain "🕐 <text>", never blank. */
html body .group-body li .name [data-device="time"] {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    display: flex !important;
    align-items: center;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--dg-border);
    font-size: 10px;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    color: var(--dg-text-dim) !important;
}
html body .group-body li .name [data-device="time"]:not(:has(.dg-date-col))::before {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    margin-right: 5px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23dc2626%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpolyline%20points%3D%2212%207%2012%2012%2015.5%2014%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* "Stopped Xd Xh Xm" duration — the highlighted glowing box in the reference.
   The base theme's own rule here is
   "[data-device=time_text]{overflow:hidden;text-overflow:ellipsis;
   white-space:nowrap}" — built for a one-line-max sidebar label, which is
   exactly what was truncating "Stopped 1d 2h 6m 54s" down to "Stopped 1d 2".
   Needed its own explicit reset, same bug class as the name/status fixes
   above. */
html body .group-body li .name [data-device="time_text"] {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 8px;
    background: rgba(244, 63, 94, .1);
    border: 1px solid rgba(244, 63, 94, .3);
    color: #fda4af !important;
    font-size: 10px;
    font-weight: 600;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}
html body .group-body li .name [data-device="time_text"]::before {
    content: '';
    display: inline-block;
    width: 17px; height: 17px;
    flex-shrink: 0;
    border-radius: 5px;
    background-color: rgba(244, 63, 94, .18);
    border: 1px solid rgba(244, 63, 94, .35);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%223%22%20fill%3D%22%23fda4af%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
}

/* ----- Details: speed readout + menu, sharing row 2 with the status pill ---
   Placed in the SAME spanning grid cell as [data-device="status"] above (both
   "grid-column: 2 / -1; grid-row: 2;") — CSS grid doesn't force items in one
   cell to stack, so pinning this one to justify-self:end while status pins to
   :start puts them on opposite ends of the same row instead of overlapping,
   as long as their combined width fits (it does — a short pill + "0 kph"). */
html body .group-body li .details {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 30px; /* room for the menu button, absolutely positioned below */
}
html body .group-body li .details [data-device="speed"] {
    font-size: 18px;
    font-weight: 800;
    color: #fff !important;
    line-height: 1;
}
html body .group-body li .details [data-device="detect_engine"] {
    display: inline-flex;
    width: 18px; height: 18px;
    border-radius: 50%;
    align-items: center; justify-content: center;
}
/* Three-dot menu — pulled out of the flex row into the card's top-right corner
   via absolute positioning (its parent .btn-group can be anywhere in normal
   flow; position:absolute resolves against the nearest positioned ancestor,
   which is the <li> itself, not its immediate .details parent, so this doesn't
   need any DOM change). The dropdown plugin reads the button's live bounding
   rect when opening (data-position="fixed" in the markup already implies
   this), so relocating it via CSS doesn't affect where its menu opens. */
html body .group-body li .details .btn-group {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}
html body .group-body li .details .btn-group .btn {
    width: 28px; height: 28px;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ----- Date/Time split (built by custom/js.js) ------------------------------ */
html body .group-body li .name [data-device="time"] .dg-date-col,
html body .group-body li .name [data-device="time"] .dg-time-col {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
html body .group-body li .name [data-device="time"] .dg-icon {
    display: inline-block;
    width: 13px; height: 13px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
html body .group-body li .name [data-device="time"] .dg-icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23dc2626%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");
}
html body .group-body li .name [data-device="time"] .dg-icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23dc2626%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpolyline%20points%3D%2212%207%2012%2012%2015.5%2014%22%2F%3E%3C%2Fsvg%3E");
}
html body .group-body li .name [data-device="time"] .dg-col-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
html body .group-body li .name [data-device="time"] .dg-val {
    color: var(--dg-text) !important;
    font-weight: 600;
    font-size: 10px;
    white-space: nowrap;
}
html body .group-body li .name [data-device="time"] .dg-cap {
    color: var(--dg-text-dim) !important;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
html body .group-body li .name [data-device="time"] .dg-sep {
    width: 1px;
    align-self: stretch;
    background: var(--dg-border);
    margin: 0 2px;
    flex-shrink: 0;
}
html body .group-body li .name [data-device="time"] a {
    margin-left: auto;
    color: #ffa773 !important;
    font-size: 10px;
    white-space: nowrap;
}

/* =================================================================================
   INTERCOM WIDGET — the small floating bubble (intercom_widget.blade.php),
   appended into the same #conversations corner container as chat. Its outer
   ".conversation"/".panel" shell already inherits the dark theme from the
   MODALS/GLOBAL UI PRIMITIVES sections above; only the elements unique to this
   widget (channel row, talk button states, status line) need their own rules.
   ================================================================================= */
html body .intercom-widget .intercom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
html body .intercom-widget .intercom-row label {
    font-size: 12px;
    color: var(--dg-text-dim) !important;
    margin: 0;
}
html body .intercom-widget .intercom-channel {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border: 1px solid var(--dg-border) !important;
    border-radius: 6px !important;
    padding: 4px 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* The closed box takes background/color from the rule above, but the native
   dropdown list itself is a separate rendering surface some browsers only
   pick theme colors up for via the <option> elements' own color/background —
   without this, opening the dropdown still shows white rows with dark text
   even though the closed select looks right. */
html body .intercom-widget .intercom-channel option {
    background: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
}
html body .intercom-widget .intercom-talk-btn {
    width: 100%;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--dg-text) !important;
    border: 1px solid var(--dg-border) !important;
    border-radius: 10px !important;
    padding: 14px;
    font-weight: 700;
}
html body .intercom-widget .intercom-talk-btn.active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
html body .intercom-widget .intercom-status {
    font-size: 11px;
    color: var(--dg-text-dim) !important;
    margin-top: 10px;
    min-height: 14px;
}
html body .intercom-widget .intercom-status.ok {
    color: #4ade80 !important;
}
html body .intercom-widget .intercom-status.err {
    color: #f87171 !important;
}

/* =================================================================================
   LANGUAGE SELECTOR MODAL (Tobuli/Views/Frontend/Languages/index.blade.php) — this
   page has no <style> block of its own; .lang-card's white card fill and the
   no-results icon/text (set via inline style="color:#ccc"/"color:#999" right on
   the element) both come from the compiled theme, never covered before.
   ================================================================================= */
html body .lang-list-container {
    background: transparent !important;
}
html body .lang-card {
    background: var(--dg-panel-2) !important;
    border: 1px solid var(--dg-border) !important;
    border-radius: 10px !important;
    transition: background .15s ease, border-color .15s ease;
}
html body .lang-card:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: #ff7828 !important;
}
html body .lang-name {
    color: var(--dg-text) !important;
}
html body .lang-item-active .lang-card {
    border-color: #ff7828 !important;
    box-shadow: 0 0 0 1px rgba(255, 120, 40, .4) !important;
}
html body .lang-active-badge {
    background: var(--dg-orange) !important;
    color: #fff !important;
}
/* Inline style="color:#ccc"/"color:#999" on the icon/text — a stylesheet rule
   with !important still beats a plain inline style. */
html body .lang-no-results .icon {
    color: var(--dg-text-dim) !important;
}
html body .lang-no-results p {
    color: var(--dg-text-dim) !important;
}
/* Scrollable list area — same thin dark-track/orange-thumb treatment as the
   other scrollable panels (Objects list, widgets row, etc.) elsewhere in this file. */
html body .lang-list-container {
    scrollbar-width: thin;
    scrollbar-color: var(--dg-panel-2) transparent;
}
html body .lang-list-container::-webkit-scrollbar {
    width: 8px;
}
html body .lang-list-container::-webkit-scrollbar-track {
    background: transparent !important;
}
html body .lang-list-container::-webkit-scrollbar-thumb {
    background: var(--dg-panel-2);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html body .lang-list-container::-webkit-scrollbar-thumb:hover {
    background: #ff7828;
    background-clip: padding-box;
}

/* =================================================================================
   AUTH PAGES — Login, Registration, Forgot/Reset Password (Tobuli/Views/Frontend/
   Login|Registration|PasswordReminder/*.blade.php). None of these have their own
   <style> block; they all share the same ".panel > .panel-background +
   .panel-body" card markup and ".login-input"/".login-submit-btn"/
   ".login-divider"/".registration-link" classes from the compiled theme. The
   earlier generic ".panel{background:var(--dg-panel-2)}" rule (GLOBAL UI
   PRIMITIVES section above) covers the outer card, but .panel-background is a
   SEPARATE decorative div with its own explicit light fill sitting on top of it
   (same "child's own background wins" pattern as every other card in this file),
   and the password/email inputs here use type="password"/type="email" — outside
   the type="text"/"search" list the earlier global input-background rule covers —
   so both were still showing through white. Styled as a proper glossy glass card
   (matching the reference look used throughout the rest of this file), not just
   recolored flat, since these are the very first screen a user sees. */
html body .center-vertical .panel,
html body .panel.login-panel {
    background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%), var(--dg-panel) !important;
    border: 1px solid var(--dg-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5) !important;
}
/* No !important here, deliberately: Appearance has a real admin-configurable
   "banner" feature for this exact element (Frontend/Layouts/frontend.blade.php
   -> "login_page_panel_background_color"/"login_page_panel_transparency"
   settings, emitted as "body.sign-in-layout .panel-background { background:
   ...; opacity: ...; }" only when the admin has actually set one). That
   selector's 2 classes already out-specify this rule's 1, so when an admin
   background is configured it wins on its own and shows through — this only
   supplies a sane dark fallback for installs that haven't set one, rather than
   forcibly overriding a real customization feature. */
html body .panel-background {
    background: var(--dg-panel);
}
html body .panel-body {
    background: transparent !important;
    color: var(--dg-text) !important;
}
html body .sign-in-text {
    color: var(--dg-text) !important;
}
html body .login-divider {
    border-color: var(--dg-border) !important;
}
html body .form-label,
html body .password-label-wrapper .form-label {
    color: var(--dg-text-dim) !important;
}
html body .login-input,
html body .panel-body input[type="password"],
html body .panel-body input[type="email"] {
    background-color: var(--dg-panel-2) !important;
    color: var(--dg-text) !important;
    border-color: var(--dg-border) !important;
}
html body .password-toggle-btn {
    background: transparent !important;
    color: var(--dg-text-dim) !important;
    border: none !important;
}
html body .password-toggle-btn:hover {
    color: var(--dg-text) !important;
}
html body .remember-me-group .checkbox label {
    color: var(--dg-text-dim) !important;
}
html body .forgot-password-link,
html body .registration-link,
html body .external-login-title {
    color: #ffa773 !important;
}
html body .forgot-password-link:hover,
html body .registration-link:hover {
    color: #fff !important;
}
/* Sign in / Register / Remind me — same orange glossy treatment as every other
   primary action in this file (map controls, sidebar active state, etc.), since
   Bootstrap's default .btn-primary blue was never touched by the earlier
   .modal-scoped/#objects_tab-scoped btn-primary rules — this page is neither. */
html body .login-submit-btn {
    background-color: transparent !important;
    background-image: var(--dg-orange) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--dg-orange-glow) !important;
}
html body .login-submit-btn:hover {
    filter: brightness(1.08);
}
html body .login-submit-btn:disabled {
    opacity: .5;
    filter: none;
}

/* =================================================================================
   JQUERY UI DIALOG — the "Follow" window (opened from the map's Follow action)
   is a jQuery UI .ui-dialog, a completely different widget system from every
   Bootstrap .modal covered above, so none of those rules reach it. Several
   competing compiled rules set its titlebar to #f9f9f9/rgba(255,255,255,.7)/
   #965704, none scoped or !important — matching plain class selectors here
   (no extra specificity needed) still wins on source order since this file
   loads last, and !important locks it in regardless of any close tie.
   ================================================================================= */
html body .ui-dialog.ui-widget.ui-widget-content {
    background: var(--dg-panel) !important;
    border: 1px solid var(--dg-border) !important;
    color: var(--dg-text) !important;
}
html body .ui-dialog-titlebar.ui-widget-header {
    background: var(--dg-panel-2) !important;
    border-bottom-color: var(--dg-border) !important;
}
html body .ui-dialog-title {
    color: var(--dg-text) !important;
}
html body .ui-dialog-content {
    color: var(--dg-text) !important;
}
/* The close button's "×" text node is mis-encoded by the server response
   (renders as "×"), a backend/response-charset bug CSS can't fix at the
   source — hiding the broken glyph and drawing a real "×" via ::after is a
   silent, purely visual workaround, same "CSS-only, non-!important-code-
   touching" spirit as the rest of this file. Also recolored for the dark
   titlebar — it was #000 text with a white text-shadow (invisible either way
   against a dark background, on top of being unreadable already). */
html body .ui-dialog-titlebar-close {
    font-size: 0 !important;
    color: var(--dg-text-dim) !important;
    text-shadow: none !important;
    opacity: .85 !important;
}
html body .ui-dialog-titlebar-close::after {
    content: "\00d7";
    font-size: 20px;
    line-height: 1;
}
html body .ui-dialog-titlebar-close:hover {
    color: #fff !important;
    opacity: 1 !important;
}