/* ── App-wide tokens ─────────────────────────────────────────────────
   --brcol: the brighter container tone, sourced from the per-boat-events
   card surface (.evb-group in events_boat.css). Originally the Standard-
   theme token; the theme system is gone (single theme, Jul 2026) and the
   brighter Live-panel surfaces it powered are now the default. */
:root {
    --brcol: #6f75a045;
}

/* Fix Tailwind preflight breaking Leaflet marker icons */
.leaflet-container img {
    max-width: none !important;
}

/* Tree-view toggle — hidden across all viewports for now. The button
   elbowed the mobile search bar and there's no production use case
   for the tree layout yet. Easy to re-enable by removing this rule. */
#boat_view_toggle,
.boat-view-toggle {
    display: none !important;
}

.popup.settings_popup {
    position: fixed;
    background: rgb(28 28 42);
    border-radius: 0;
    width: 55%;
    right: 0;
    left: auto;
    bottom: 0;
    top: 0;
    box-shadow: 0 0 30px rgb(23 47 113 / 66%);
    z-index: 5000;
    margin: 0;
}

.settings_popup .portal-intro-menus-wrapper {
    background: #252537;
}

.settings_popup .dataTable td {
    overflow: visible;
}

.settings_popup .kpinc-select {
    width: 200px;
}

.settings_popup tr.settings-input-edited {
    background: #29ffc612;
}

.settings_popup tr.edit-mode-on {
    background: #ff8f130f;
}

.settings_popup .settings-boats-buttons-edit-container {
    width: 120px;
    text-align: left;
}

.settings_popup .boat-name-edit-container {
    width: 180px;
    max-width: 180px;
    ;
    overflow: hidden;
}

.settings_popup #settings_boat_list_table thead {
    display: none;
}

.settings_popup .settings-boat-type {
    background: transparent;
    color: #f6b12c;
    font-family: inherit;
    height: 40px;
    line-height: 20px;
    outline: none;
    padding: 5px 0;
    transition: all 0.15s ease-in-out;
    width: 200px;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
    min-width: 120px;
    letter-spacing: 0.02rem;
    text-align: left;
    text-transform: capitalize;
}

.settings_popup .edit-mode-on .settings-name-input {
    background: transparent;
    color: #f6b12c;
    font-family: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 20px 0 10px;
    transition: all 0.15s ease-in-out;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
    border-bottom: 1px solid #594139;
    min-width: 120px;
}

.settings_popup .settings-boat-type-name {
    padding-left: 15px;
    padding-top: 5px;
    color: #90c4ff;
}

.settings_popup .settings-type-icon {
    height: 28px !important;
}

.settings_popup .settings-edit-cancel-button {
    display: none;
    height: 40px;
    width: 33px;
    line-height: 40px;
    text-align: center;
    font-weight: 600;
    margin-left: 10px;
    border-radius: 8px;
    border: 1px solid #ff407d;
    background: #ff217312;
    color: #ff407d;
    padding: 0px;
    cursor: pointer;
}

.settings_popup .settings-edit-save-button {
    display: none;
    height: 40px;
    width: 60px;
    line-height: 40px;
    text-align: center;
    margin-left: 0;
    border-radius: 8px;
    border: 1px solid #2be193;
    background: #00805014;
    color: #2be193;
    padding: 0px;
    cursor: pointer;
}

.settings_popup .edit-mode-on .settings-edit-cancel-button,
.settings_popup .edit-mode-on .settings-edit-save-button {
    display: inline-block;
    vertical-align: top;
}

.settings_popup .settings-input-edited .settings-name-input,
.settings_popup .settings-input-edited .settings-boat-type {
    background: transparent;
    color: #61ff5a;
    font-family: inherit;
}

.settings_popup .settings-edit-button {
    height: 35px;
    width: 87px;
    color: #3ee2cf;
    line-height: 35px;
    margin-left: 20px;
    background-image: url(../images/icons/edit_icon2.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 13px 9px;
    cursor: pointer;
    padding-right: 20px;
    border: 1px solid #3ee2cf5e;
    border-radius: 10px;
    margin-right: 10px;
    text-align: right;
    transition: border 0.5s;
}

.settings_popup .settings-edit-button:hover {
    border: 1px solid #3ee2cf;
    transition: border 0.5s;
}

.settings_popup .settings-name-input {
    color: #03bdc2;
    line-height: 40px;
    margin-left: 10px;
}

.settings_popup .dataTable td {
    padding: 8px 3px !important;
}

.settings_popup .kpinc-select .custom-select {
    height: 40px;
    line-height: 40px;
}

.settings_popup .dark-theme .dataTables_filter {
    display: block;
}

.settings_popup input[type="search"] {
    font-size: 13px !important;
    border-radius: 4px !important;
}

#inet_fleet_popup {
    /* Matches the Events popup width (35%) — see #events_popup.arc-popup. */
    width: 35%;
}
/* Same subtle black hairline under the header band as Fleet Stats
   (user call, 30 Jul). */
#inet_fleet_popup .arc-popup-header {
    border-bottom: 1px solid #0000001c;
}

#inet_module_table .inet-wifipass {
    min-width: 120px;
}

.dark-theme #inet_module_table.dataTable th {
    color: #bdbed0;
    background: #303045;
}

.dark-theme #inet_module_table.dataTable th:first-child {
    border-top-left-radius: 5px;
}

.dark-theme #inet_module_table.dataTable th:last-child {
    border-top-right-radius: 5px;
}


#inet_module_table .inet-time-box {
    width: 70px;
    background: #00000052;
    margin-left: 10px;
    font-size: 11px;
}

/* Fleet inet view selector — Status / Wifis. Mirrors the battery module's
   trip-battery toggle pills (spacey-marine cyan accent). */
.inet-fleet-view-toggle {
    display: flex;
    gap: 10px;
    margin: 0 0 16px;
}
.inet-fleet-view-toggle .inet-view-pill {
    padding: 7px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: #95a1b9;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.inet-fleet-view-toggle .inet-view-pill:hover {
    background: rgba(34, 211, 238, 0.06);
    color: #fff;
}
.inet-fleet-view-toggle .inet-view-pill.inet-view-pill-selected {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.4);
    color: #22D3EE;
}

#internet_sensor_popup .table-dark-highlight-box {
 padding: 8px 15px !important;
 text-align: left;
}



/* OFFLINE row — `40 min` + reason message render INLINE after the
   OFFLINE pill, overflowing visually into the empty Signal / Noise /
   Exp. Speed columns to the right. All offline tds need
   `overflow: visible` so the inline-flex container's overflowing
   contents aren't clipped at column boundaries; `white-space: nowrap`
   keeps everything on one line. */
#inet_module_table tr.row-offline td {
    overflow: visible !important;
    white-space: nowrap;
}
#inet_module_table .inet-issue-container {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
    vertical-align: middle;
    margin-left: 6px;
}
#inet_module_table .inet-issue-container > * {
    flex-shrink: 0;
}
/* Override the inline `white-space:normal; word-break:break-word`
   on the warning span — those let it wrap to multiple lines and
   stretched the row tall. */
#inet_module_table .inet-issue-container .inet-time-box {
    white-space: nowrap !important;
    word-break: normal !important;
}

#inet_module_table tr.row-offline {
    background: #ff00530a;
}

#inet_module_table tr.row-offline td {
    border-bottom: 1px solid #ff003e1c !important;
}

#inet_per_boat_module_table.dataTable tr.inet-row-title td {
    padding-top: 50px !important;
    font-size: 18px !important;
    color: #c4d3f2;
}

#inet_per_boat_module_table.dataTable td:first-child {
    text-transform: capitalize;
}

#inet_per_boat_module_table.dataTable thead {
    display: none;
}



#inet_module_table tr.row-offline.offline-poor-coverage {
    /* border: 1px solid red !important; */
}

#inet_errors_popup .inet-error.inet-error-nodb {
    background: #4a587a26;
    /* padding: 4px 8px; */
    /* border: 1px solid #5e69846e; */
    color: #8589a8;
}

#inet_errors_popup .inet-error.inet-error-rms {
    background: #7a5a4a26;
    /* padding: 4px 8px; */
    /* border: 1px solid #f3a32a99; */
    color: #f5b333;
}

#inet_errors_popup .inet-error.inet-error-uptime {
    background: #2e262a;
    color: #ff702b;
}

.settings_popup #inet_module_table tr.row-offline .inet-more-button {
    color: #ffa819;
    border: 1px solid #ff9a2c5e;
}

#inet_errors_popup .inet-error {
    display: table;
    background: #321a29;
    padding: 4px 8px;
    /* border: 1px solid #cc0000; */
    margin: 8px 0;
    border-radius: 3px;
}

#inet_errors_popup .inet-error::before {
    content: "";
    display: block;
}

#inet_details_popup,
#inet_errors_popup {
    z-index: 5001;
}

.settings_popup #inet_module_table .settings-boat-type {
    width: auto !important;
}

.settings_popup .inet-more-button {
    height: 30px;
    width: 75px;
    color: #3ee2cf;
    line-height: 30px;
    margin-left: 20px;
    cursor: pointer;
    padding-left: 8px;
    border: 1px solid #3ee2cf5e;
    border-radius: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 10px !important;
    transition: border 0.5s;
}

.settings_popup .inet-more-button:hover {
    border: 1px solid #3ee2cf;
    transition: border 0.5s;
}

.big-button {
    height: 38px;
    width: 123px;
    color: #e23e5c;
    line-height: 38px;
    margin-left: 20px;
    cursor: pointer;
    padding-left: 8px;
    border: 1px solid #ff4b6c;
    border-radius: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px !important;
    transition: border 0.5s;
}

.settings_popup .inet-troubleshoot-button {
    display: none;
}

.share-container {
    padding: 20px;
    border: 1px solid #3b3b5091;
    background: #ffffff05;
    border-radius: 10px;
}

.sharePopup .popup_content {
    padding: 40px;
}

.ds-top {
    position: fixed;
    left: 0;
    right: 0;
    height: 65px;
    background-color: rgb(30, 30, 47);
    text-align: center;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    z-index: 500;
    transition: left 0.2s;
    box-sizing: initial !important;
}

.ds-top .portal-intro-menus-container a {
    float: left;
}

.disable_clicks {
    pointer-events: none;
}

.enable_clicks {
    pointer-events: auto;
}

/* Top menubar buttons — scoped to .ds-top so the in-popup tabs that
   also use `.menu-buttons` (BoatDetails popup, alerts/settings/trips
   popups) keep their own existing styling. */
.ds-top .menu-buttons {
    font-size: 0.55em;
    height: 32px;
    color: #a7b2c8;
    background: #9d9dcb29;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1;
    padding: 8px 16px;
    margin: 10px 10px;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ds-top .menu-buttons .menu-button-icon,
.ds-top .menu-buttons svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.3;
    flex-shrink: 0;
}

/* Hover only on hover-CAPABLE devices (capability scope, not a width
   scope): on touch, :hover sticks to the last tapped element until the
   next tap elsewhere — the Account tab stayed cyan after its popover
   closed (user call). Touch keeps :active press feedback (≤640 block)
   and the JS-driven .is-open selected state. */
@media (hover: hover) {
    .ds-top .menu-buttons:hover {
        background: rgba(34, 211, 238, 0.08);
        color: #22D3EE;
    }
    .ds-top .menu-buttons:hover .menu-button-icon,
    .ds-top .menu-buttons:hover svg {
        color: #22D3EE;
    }
}

/* Active state — same visual language as hover but slightly stronger.
   No JS-driven active class exists today; once one is added, this
   styles it consistently. */
.ds-top .menu-buttons.active,
.ds-top .portal-intro-menus-container a.active .menu-buttons {
    background: rgba(34, 211, 238, 0.12);
    color: #22D3EE;
}

/* Events button with CRITICAL warnings today — the WHOLE item reads red
   (icon + label), not just the badge (user call, 23 Jul). Toggled by
   paintTodayCounter (.events-crit). Hover keeps its cyan override. */
.ds-top .menu-buttons.events-crit {
    color: #F87171;
}
.ds-top .menu-buttons.events-crit .menu-button-icon,
.ds-top .menu-buttons.events-crit svg {
    color: #F87171;
}
.ds-top .menu-buttons.events-crit:hover,
.ds-top .menu-buttons.events-crit:hover .menu-button-icon,
.ds-top .menu-buttons.events-crit:hover svg {
    color: #22D3EE;
}

.charter_details_popup .portal-intro-menus-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    gap: 2px;
}

.ds-x-button-container {
    display: none;
    color: white;
    float: left;
    height: 65px;
    line-height: 65px;
    width: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

.menu-button {
    display: block;
    width: 50px;
    height: 65px;
    box-sizing: border-box !important;
    padding: 25px 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.menu-button span {
    display: block;
    background: rgb(193, 211, 222);
    width: 25px;
    height: 2px;
    border-radius: 3px;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.ds-menu-button-container {
    color: white;
    float: right;
    height: 65px;
    line-height: 65px;
    /* border-left: 1px solid #26345c; */
}

.popup-view-mode {
    width: 40%;
}

.charters-container.popup-view-mode {
    left: 0;
    /* Map's right edge must meet the popup's left edge. The right popups
       (arc-popup + charter_details/alerts/settings) are 55% wide at this
       base breakpoint, so inset the map by 55% — NOT a fixed 400px, which
       only lined up at one viewport width and left a gap everywhere else. */
    right: 55%;
    /* CRITICAL: the bare `.popup-view-mode { width: 40% }` rule ALSO matches
       this container (it carries the popup-view-mode class), giving it
       left:0 + right:55% + width:40% all at once. On a position:fixed box
       that's over-constrained, so the browser IGNORES `right` and sizes from
       left+width — which (a) made `right` un-transitionable (the map snapped),
       and (b) sized the map to 40% while the popup is 55%, leaving a gap.
       Force width:auto here so left+right alone drive the box and `right`
       becomes the animatable, layout-controlling property. */
    width: auto;
    /* Ease the right inset in step with the boat-details slide-in (same 0.28s
       / cubic-bezier as .popup-slide-in) so the map shrinks AS the popup slides
       in over it — without this the map jumped to half-width instantly while
       the popup was still sliding, exposing an empty strip. */
    transition: right 0.28s cubic-bezier(0.32, 0.72, 0.2, 1);
}

/* Events popup is a STATIC 500px wide → the map fills the rest. Overrides the
   %-based inset above (and the per-breakpoint values below) at all widths. */
.charters-container.popup-view-mode-events {
    right: 620px !important;
    width: auto;
}

/* Fleet Inet popup is 35% wide (see #inet_fleet_popup) — inset the map to match
   so its right edge meets the panel (overrides the default 55% inset). */
.charters-container.popup-view-mode-inet {
    right: 35% !important;
    width: auto;
}

.charters-container.map-view-mode {
    left: 0 !important;
    width: 100% !important;
}

/* Bottom-sheet popups (trip details / battery / engine) drive a CSS var
   --popup-bottom-h on :root from popupDrag.js. The map container reads
   it via bottom-inset so it sits flush above whatever the popup's
   current height is. body.popup-bottomsheet-open is added on
   enablePopupDrag() so the rule only kicks in while a drag popup is
   open — outside that, the container reverts to its normal bottom: 0.

   trip-popup-active is the legacy/scoped variant that also matters
   for the trips workflow; we keep it consuming the same var. */
.charters-container.trip-popup-active,
body.popup-bottomsheet-open .charters-container.map-view-mode {
    bottom: var(--popup-bottom-h, 480px) !important;
    transition: bottom 0.22s cubic-bezier(0.32, 0.72, 0.2, 1);
}
/* While the user is actively dragging, kill all the transitions so the
   map shrinkage tracks the pointer 1:1. body.popup-drag-active is
   toggled by popupDrag.js on pointerdown / pointerup. */
body.popup-drag-active .charters-container.trip-popup-active,
body.popup-drag-active .charters-container.map-view-mode,
body.popup-drag-active .popup.trip_details_popup,
body.popup-drag-active .popup.battery-module,
body.popup-drag-active .popup.engine-module {
    transition: none !important;
}

.charters-right-menu.map-view-mode {
    height: 0;
    width: 0;
}

/* SLIDER */
div#arconmar-slider {
    width: 75% !important;
    margin: -50px auto;
    height: 25px;
    background: #1e1e2fd9;
    border: 1px solid black;
}

.arconmarLoaderContainer {
    text-align: center;
    padding: 20px;
}

/* ─── Per-section loader for boat details (Live / Trips / Alerts / Stats)
   Sits inside each tab container; absolutely positioned so it covers the
   tab area without affecting layout. Toggled by tab-switch handler in
   BoatDetails.js — shown when the tab activates, hidden once that
   section's render commits. Live hides immediately on the next tick
   (no async fetch). The other three hide inside their .then() callbacks.
   .is-loading on the tab container is the toggle hook. */
.boat-details-category-container {
    position: relative;
}
/* The loader must cover the ENTIRE popup content area (everything below the
   header) — not just the section container's intrinsic box, which only sizes
   to its content and left a gap at the bottom + a stray border-radius. Anchor
   it to .popup_content (the full-height absolute content area) by making the
   active container fill that area, then the loader's inset:0 fills everything.
   Matches the Events popup's .ev-loader (translucent overlay, no radius). */
.boat-details-section-loader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 30;
    align-items: center;       /* centre spinner both axes */
    justify-content: center;
    /* OPAQUE — fully covers content behind it. SAME surface as the boat
       details popup (#3d4056) so the loader blends in instead of flashing
       a blueish slab. */
    background: #3d4056;
}
.boat-details-category-container.is-loading {
    /* Fill the whole content area so the inset:0 loader spans top→bottom of the
       popup, not just a 70vh slab. position:absolute against .popup_content
       (which is the full-height absolute content region). */
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.boat-details-category-container.is-loading .boat-details-section-loader {
    display: flex;
}
.boat-details-section-loader .arconmarLoader {
    width: 48px;
    height: 48px;
}
.boat-details-section-loader .arconmarLoader:after {
    width: 48px;
    height: 48px;
    border-color: #1bd1c2 transparent #1bd1c2 transparent;
}

/* ─── CANONICAL POPUP LOADER ─────────────────────────────────────────────
   ONE loader pattern for every popup. A full-fill overlay that covers the
   entire CONTENT area (everything below the header) with an opaque surface,
   and a spinner centred on BOTH axes inside it. Drop a
   `<div class="arc-loader"><div class="arconmarLoader"></div></div>` as the
   first child of any popup's content area, and give that content area
   `position: relative`. Toggle visibility with the `.is-visible` class
   (default hidden). Replaces the scattered per-popup loaders. */
.arc-loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    align-items: center;       /* vertical centre */
    justify-content: center;   /* horizontal centre */
    /* SOLID overlay (user call: loaders must not be transparent) — inside
       arc popups it matches the content bg, elsewhere a dark fallback. */
    background: var(--arc-content-bg, #23253a);
}
/* Headers cast a soft shadow once the popup content below them has been
   scrolled (class toggled by the global scroll listener in
   charterFleetScript.js). */
.arc-popup-header,
.popup_header {
    transition: box-shadow 0.18s ease;
}
.arc-popup-header.popup-header-scrolled,
.popup_header.popup-header-scrolled {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.arc-loader.is-visible {
    display: flex;
}
.arc-loader .arconmarLoader {
    width: 48px;
    height: 48px;
}
.arc-loader .arconmarLoader:after {
    width: 48px;
    height: 48px;
    border-color: #1bd1c2 transparent #1bd1c2 transparent;
}

.arconmar-slider-buttons-container {
    margin-left: 30px;
}

/* TIMESTAMP BOX */
div#slider-timestamp {
    margin: 35px auto !important;
    background: black !important;
    color: #66e3dd;
    padding: 5px;
}

/* RANGE SLIDER */
.ui-slider-range.ui-corner-all.ui-widget-header {
    background: #25cdff57;
}

.slider.leaflet-control {
    width: 100%;
}

#boatdetails_popup.map-view-mode,
#crash_sensor_popup.map-view-mode,
#trip_details_shared.map-view-mode,
#trip_details_popup.map-view-mode {
    width: 0 !important;
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

#boat_list_table.dataTable td {
    font-size: 12px;
}


#boat_list_table th:nth-child(2),
#boat_list_table th:nth-child(3) {
    text-align: left !important;
}

#boat_list_table td:nth-child(3) {
    text-align: left !important;
}

#boat_list_table td:nth-child(3) {
    text-align: left !important;
    padding-left: 0px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

#boat_list_table td:nth-child(2) {
    text-align: left !important;
    padding-left: 0px !important;
    padding-right: 30px !important;
    font-weight: 500;
    color: #4c5877 !important;
    /* Hug content: 1% is below min-content, so the column collapses to the
       widest .bt-name-inner (capped below). Without this the 100%-wide
       table hands its slack to this unconstrained column — the "space
       right of the ellipsis" bug. Location (nth-3) is the greedy column. */
    width: 1%;
    /* Floor = the .bt-name-inner cap — a short-name fleet can't collapse
       the column (min-width on a TD IS honoured by auto table layout,
       unlike max-width). User call, 23 Jul; 130 → 110px (user paste, 15 Aug). */
    min-width: 110px;
}
#boat_list_table td.boat-location-td {
    width: 99%;
}

/* Name cap lives on the inner block (BoatTable.js render), NOT the td:
   max-width on a TD is ignored by auto table layout — which is why the
   old fixed width:150px existed. Inner element honours it, so the column
   shrink-wraps short names and long ones cut at 130px. */
#boat_list_table .bt-name-inner {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Phones: −10px on the cap (user call, 24 Jul) — the approaching-state chip
   in the NEXT cell was getting cut off. (≤390 has its own tier further down:
   105 → 95, same −10.) */
@media (max-width: 640px) {
    #boat_list_table .bt-name-inner { max-width: 90px; }
}

.dark-mode .charters-right-menu #boat_list_table td:nth-child(2) {
    color: #cad9ff !important;
}

.dark-mode .charters-right-menu #boat_list_table tr .boat_location_container {
    color: #8a97ba;
}

.dark-mode .charters-right-menu #boat_list_table {
    background: #2b2c3f;
}

/* (dark-mode SPD rules removed with the SPD column, 23 Jul.) */

#boat_list_table tr {
    cursor: pointer;
}

#boat_list_table tr:hover td {
    background: #f5f6f8;
}

.dark-mode #boat_list_table tr:hover td {
    background: #1e1e2f;
}

#boat_list_table.dataTable tr.boatSelected {
    background: #f5f6f8 !important;
}

.dark-mode #boat_list_table.dataTable tr.boatSelected {
    background: #1e1e2f !important;
}

/* #boat_list_table.dataTable tr.shown td {
    border-bottom: 1px solid #d1d1da !important;
} */


#boat_list_table {
    border-top: 1px solid #222133;
    background: white;
}

#boat_list_table tr:hover td.childRow-generalClass {
    background: white;
    cursor: auto;
}

#boat_list_table .boat_zoom_to {
    display: inline-block;
    vertical-align: top;
    height: 49px;
    width: 50px;
    background-image: url(../images/icons/location.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

#boat_list_table .boat_zoom_to.boat_zoom_to_selected {
    background-image: url(../images/icons/location_selected.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.1);
    transition: transform 0s, background 0s;
}

#boat_list_table .boat_zoom_to.boat_zoom_to_selected:hover {
    transition: transform 0s, background 0s;
}

/* (SPD column rules removed — user call 23 Jul: the boat-list cell is now a
   stacked BATTERY column only; speed lives in the cruise card / boat details.) */

#boat_list_table .boat-table-battery-column {
    padding: 1px 10px;
    color: #7f95bf;
    margin-right: 5px;   /* 10 → 5 (user paste, 23 Jul) */
    font-weight: 500;
}

/* Stacked per-bank battery rows — service on top, engine underneath when
   installed. Vertical battery icon + value; the row's inline zone colour
   (dynamic, per bank ladder) tints BOTH via currentColor. */
#boat_list_table .bt-batt-row {
    display: flex;
    align-items: center;
    /* Chip pinned LEFT, value pinned RIGHT — a short value ("0.8") no
       longer drags the chip rightward (user call, 23 Jul). */
    justify-content: space-between;
    gap: 5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
#boat_list_table .bt-batt-row + .bt-batt-row {
    margin-top: 3px;
}
/* Bank tag chip (SV / EN) — §9.6 tag-chip form, borderless (user call).
   NEUTRAL slate by default; only a bank in the float-to-top alert band
   (<11.5V) takes the row's zone colour (.bt-batt-chip-crit → inherit). */
/* ONE combined pill per bank — "SV 13.2" together (user call, 29 Jul),
   zone-tinted via currentColor (the row's inline colour); -na rows
   (offline / low-role / DISCONNECTED) sit on the muted slate → gray pill. */
#boat_list_table .bt-batt-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    line-height: 1;
    padding: 3px 7px;
    margin: 2px 0;
    border-radius: 5px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
#boat_list_table .bt-batt-pill-tag {
    flex-shrink: 0;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #bcd3ffe0;   /* user paste, 7 Aug (was #7f95bf) */
}
#boat_list_table .bt-batt-pill-tag-crit {
    color: inherit;   /* the row's zone colour (red band at <11.5V) */
}
#boat_list_table .bt-batt-val {
    flex-shrink: 0;
}
/* No-data / low-role rows ("//") — muted slate, not a zone colour. */
#boat_list_table .bt-batt-row-na {
    color: #7f95bf;
}
/* Disconnected bank (sub-1V reading): a tiny Lucide-unplug glyph in the
   value slot instead of the "disc" word (user call, 29 Jul). Same mask
   technique as the row chevron below; background = currentColor so it
   inherits the -na muted slate. */
#boat_list_table .bt-batt-disc-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    opacity: 0.9;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 5 3-3'/%3E%3Cpath d='m2 22 3-3'/%3E%3Cpath d='M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z'/%3E%3Cpath d='M7.5 13.5 10 11'/%3E%3Cpath d='M13.5 7.5 11 10'/%3E%3Cpath d='m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 5 3-3'/%3E%3Cpath d='m2 22 3-3'/%3E%3Cpath d='M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z'/%3E%3Cpath d='M7.5 13.5 10 11'/%3E%3Cpath d='M13.5 7.5 11 10'/%3E%3Cpath d='m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#boat_list_table td:has(.boat-table-battery-column) {
    vertical-align: middle;
}

/* Disconnected boats: the battery readings are stale — hide the column; the
   unplug icon + "last reading" text in the location cell carry the story.
   Keys off the offline icon's live jQuery show()/hide() (inline display). */
#boat_list_table tr:has(.boat_device_offline_icon[style*="block"]) .boat-table-battery-column {
    display: none !important;
}

/* Every boat row gets the same right-pointing "this row opens" chevron the
   events feeds use (Lucide chevron-right as a mask, brighter tone — user
   call). Sits at the right edge of the last cell, vertically centered. */
#boat_list_table tbody td:last-child {
    position: relative;
    padding-right: 22px !important;
}
#boat_list_table tbody td:last-child::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: #98a2bd;
    opacity: 0.9;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}

#boat_list_table .boat-zoom-button-td {
    /* background: #545474; */
    font-size: 0.6rem !important;
}

.charter_details_popup .component-box.sensor-box {
    display: none;
    position: relative;
}

#boat_list_table .boat_details {
    display: inline-block;
    margin-right: -32px;
    vertical-align: top;
    height: 49px;
    width: 0;
    background-image: url(../images/icons/more.svg) !important;
    background-size: 21px 28px !important;
    background-repeat: no-repeat !important;
    background-position: 5px 11px !important;
    transition: margin-right 0.2s;
}

#boat_list_table .boat_details_show {
    margin-right: 0;
    width: 32px;
}

.speed_wave_icon {
    width: 29px;
    height: 24px;
    background-image: url(../images/icons/speed_wave.svg);
    background-size: 35px !important;
    background-repeat: no-repeat !important;
    background-position: center -5px !important;
}

.boat_location_icon {
    width: 20px;
    height: 24px;
    background-image: url(../images/icons/marker.svg);
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

#boat_list_table .boat_location_icon {
    float: left;
    width: 20px;
    height: 24px;
    background-image: url(../images/icons/marker.svg);
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

#boat_list_table .boat_device_offline_icon {
    display: none;
    float: left;
    width: 20px;
    height: 24px;
    background-image: none !important;
    align-items: center;
    justify-content: center;
    color: #6c7591;
}

#boat_list_table .boat_device_offline_icon[style*="display: block"],
#boat_list_table .boat_device_offline_icon[style*="display:block"] {
    display: flex !important;
}

#boat_list_table .boat_device_offline_icon::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: #6c7591;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 5 3-3'/%3E%3Cpath d='m2 22 3-3'/%3E%3Cpath d='M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z'/%3E%3Cpath d='M7.5 13.5 10 11'/%3E%3Cpath d='M10.5 16.5 13 14'/%3E%3Cpath d='m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 5 3-3'/%3E%3Cpath d='m2 22 3-3'/%3E%3Cpath d='M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z'/%3E%3Cpath d='M7.5 13.5 10 11'/%3E%3Cpath d='M10.5 16.5 13 14'/%3E%3Cpath d='m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#boat_list_table .boat_device_offline_text {
    display: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 26px;
    color: #6c7591;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 24px;
    max-width: calc(100% - 20px);
}

/* Disconnected boats: speed/battery cells grey out instead of going red,
   matching the muted offline text in the location cell. */
#boat_list_table .boat-table-cell-disconnected {
    color: #6c7591 !important;
}

/* Sailing boats: the Lucide "wind" glyph (same icon as the Live cruise
   card's Sails mode — user call), tinted cyan via CSS mask (same technique
   as the offline unplug icon above). */
.boat_location_icon.boat_location_icon_moving {
    background: #22D3EE !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 19.6A2 2 0 1 0 14 16H2'/%3E%3Cpath d='M17.5 8a2.5 2.5 0 1 1 2 4H2'/%3E%3Cpath d='M9.8 4.4A2 2 0 1 1 11 8H2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 19.6A2 2 0 1 0 14 16H2'/%3E%3Cpath d='M17.5 8a2.5 2.5 0 1 1 2 4H2'/%3E%3Cpath d='M9.8 4.4A2 2 0 1 1 11 8H2'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 13px;
    mask-size: 13px;
    -webkit-mask-position: left center;
    mask-position: left center;
}

.boat_location_icon.boat_location_icon_docked {
    background-image: url(../images/icons/anchor_light.png) !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

.boat_location_icon.boat_location_icon_home {
    background-image: url(../images/icons/port_dark.png) !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

.boat_location_icon.boat_location_icon_moving_HD {
    background-image: url(../images/icons/boat_location_moving.svg) !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

.boat_location_icon.boat_location_icon_docked_HD {
    background-image: url(../images/icons/boat_location_docked.svg) !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

.boat_location_icon.boat_location_icon_home_HD {
    background-image: url(../images/icons/boat_location_home.svg) !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

/* GPS sensor box: lay the location icon to the LEFT of the location
   text (Zadar / Primošten / ...) instead of stacked. Smaller icon
   here than on the map/table so it doesn't dominate the sensor box. */
#gps_sensor .chart-container-boat-movement {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
}
#gps_sensor .chart-container-boat-movement .ht10 {
    display: none;
}
#gps_sensor .boat_location_icon {
    max-width: 12px;
    max-height: 12px;
    width: 12px !important;
    height: 12px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Sensor-box bottom-row text — single 13px / 500 rhythm for every
   value (speed knots, location text, alarm-state labels, signal dBm).
   Targets the whole bottom slot so descendants inherit; the rule
   above .text-alarm-state's own (0.95rem/700) by specificity, so its
   global usage in trip-details popup keeps its own size. */
.sensor-box .sensor-box-mobile-right,
.sensor-box .sensor-box-mobile-right .text-alarm-state {
    font-size: 13px;
    font-weight: 500;
}
#gps_sensor .boat-info-movement {
    max-width: 80px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#boat_list_table tr .boat_location_container {
    float: left;
    color: #8485a0;
    font-size: 12px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
}

#boat_list_table .boat_details:hover {
    transform: scale(1.1);
    transition: transform 0.3s, background 0.8s;
    cursor: pointer
}

#boat_list_table .boat_zoom_to:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    cursor: pointer
}


#boat_list_table td.boat-zoom-button-td {
    height: 49px;
    width: 40px;
    padding: 0 !important;
}


#boat_list_table thead {
    display: none;
}


.close-button {
    float: left;
    text-align: left;
    display: block;
    padding-left: 10px;
    padding-right: 25px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* width: 130px; */
    height: 65px;
    line-height: 65px;
    color: #603dc5;
    font-size: 14px;
    box-sizing: border-box !important;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color .5s, background .3s !important;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.ds-home-logo-container {
    margin-left: 10px;
    height: 65px;
    width: 50px;
    float: left;
    background: url(../images/logo.svg);
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s, transform 0.3s;
}

.ds-user-login-container.logout-button-style {
    background: none;
    color: #00dac6;
}

.ds-user-login-container {
    width: auto;
    line-height: 28px;
    background: #46e3c1;
    float: right;
    height: 28px;
    margin-top: 21px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 400;
    margin-right: 18px;
}

.logout-icon.float-left {
    width: 30px;
    height: 28px;
    margin-left: 2px;
    background-image: url(../images/icons/logout_green.svg);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center 6px !important;
}

.portal-intro-menus-container {
    height: 65px;
    line-height: 65px;
    float: left;
    margin-left: 10px;
    color: #E7DEFF;
    /* letter-spacing: 2px; */
    /* font-weight: 300 !important; */
    font-size: 20px;
    /* left: 0; */
    line-height: 65px;
    /* right: 20px; */
    z-index: 1000000;
    /* width: 600px; */
}

.portal-intro-menus-dividers {
    display: inline-block;
    width: 45px;
    opacity: 0;
}

.dt-buttons {
    margin-bottom: -60px;
    padding-top: 25px;
    padding-left: 25px;
    width: 235px !important;
    float: none !important;
    display: flex;
}

.dataTable {
    border-spacing: 0 !important;
    font-family: Roboto !important;
    font-size: 14px !important;
    line-height: 2 !important;
    color: #464f56 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.dataTable td {
    /* background-color: #fff!important; */
    border-top: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgb(246 247 255) !important;
    border-left: none !important;
    padding: 15px !important;
    padding-right: 50px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden;
    white-space: nowrap;
    height: auto;
    font-size: 14px;
}

.dark-mode .dataTable td {
    padding: 18px 8px 18px 18px !important;
    border-bottom: 1px solid rgb(49 49 67) !important;
}

.dark-mode .module-mode .dataTable td {
    padding: 8px !important;
    border-bottom: 1px solid rgb(37 37 52) !important;
    font-size: 12px;
}

.dark-mode .module-mode .dataTable thead th,
.dark-mode .module-mode .dataTable thead td {
    font-size: 12px !important;
}

.accounts-panel #inet_module_table.dataTable th {
    font-size: 12px !important;
}

table.dataTable thead th {
    font-weight: 500;
    text-align: left !important;
}

table.dataTable thead th:first-child {
    text-align: left !important;
}

table.dataTable thead th,
table.dataTable thead td {
    padding: 10px 18px;
    font-size: 16px;
    border-bottom: none !important;
}

table.dataTable tbody td:first-child {
    text-align: left !important;
    padding-right: 10px !important;
}

table.dataTable tbody td {
    text-align: right !important;
}

table.dataTable thead th:first-child {
    text-align: left !important;
}

table.dataTable thead th {
    text-align: right !important;
}

td:first-child {
    border-left: none !important;
    color: #6f7690;
    font-weight: 500;
    text-align: left;
    background-size: 40px;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: 10px 5px;
    /* font-size: 14px; */
}

td:last-child {
    text-align: right;
    /* font-size: 14px; */
}

th:first-child {
    border-left: none !important;
    border-top: none !important;
    font-weight: 500;
    /* font-size: 14px; */
}

th:last-child {
    text-align: right !important;
}

.component-box.charters-component-box {
    box-shadow: none;
    border-radius: 0;
    margin: 0 auto;
    border-spacing: 0;
    background: white;
}

.charters-container {
    margin-top: 65px;
    position: fixed;
    left: 400px;
    right: 0;
    bottom: 0;
    top: 0;
}

.shared-routes-container .dataTable thead {
    display: none;
}

.shared-routes-container .dataTable tr.trip_selected {
    display: none;
}

.shared-routes-container .charters-container {
    margin-top: 0;
}

.shared-routes-container .mainboats-popup {
    top: 0;
}

.shared-routes-container .popup-view-mode {
    width: 60%;
}

.charters-right-menu {
    position: fixed;
    right: 0;
    width: 400px;
    bottom: 0;
    top: 65px;
    background: #fbfbfd;
    z-index: 500;
    box-shadow: 0 0 10px rgba(14, 58, 103, 0.24);
}

.dark-mode .charters-right-menu {
    position: fixed;
    left: 0;
    width: 400px;
    background: #28273b;
    border-top: 1px solid #1e1e2f;
    z-index: 500;
    box-shadow: 0px 5px 10px rgb(14 58 103 / 49%);
}

#charter-map {
    height: 100%;
    /* Sea-blue base so a tile gap (mid zoom/pan, before tiles load) shows water,
       not Leaflet's default gray. The .leaflet-container below also gets it —
       that's the element actually behind the tiles. */
    background: #96d9fe;
}

.unlimited-inet-text {
    font-size: 12px;
    color: #7560ff;
    font-weight: 500;
}

.charter-right-menu-content {
    height: 100%;
    overflow: auto;
}

td .type_sailboat {
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/type_sailboat.svg) !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.dark-theme td .type_sailboat {
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/type_sailboat.svg) !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

td .type_yacht {
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/type_yacht.svg) !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

td .type_catamaran {
    height: 28px;
    width: 28px;
    opacity: 0.93;
    background-image: url(../images/icons/type_catamaran.svg) !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.dark-theme td .type_yacht {
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/type_yacht.svg) !important;
    background-size: 26px 26px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

td .type_superyacht {
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/type_superyacht.png) !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.dark-theme td .type_superyacht {
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/type_superyacht_dark.png) !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

td .alarm_warning_cell {
    display: none;
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/warning_icon.svg) !important;
    background-size: 38px 38px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

td .alarm_critical_cell {
    display: none;
    height: 28px;
    width: 28px;
    background-image: url(../images/icons/critical_icon.svg) !important;
    background-size: 38px 38px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

td .alarm_disconnected_cell {
    display: none;
    height: 28px;
    width: 28px;
    color: #6c7591;
}

td .alarm_disconnected_cell i,
td .alarm_disconnected_cell svg {
    width: 16px;
    height: 16px;
}

td .boat_type_icon.boat-type-icon-disconnected {
    filter: grayscale(1) opacity(0.35) !important;
}

td.boat_type {
    padding-left: 25px !important;
    padding-right: 15px !important;
    width: 30px !important;
}

input[type="search"] {
    border: none !important;
    box-shadow: 0 6px 8px rgba(102, 119, 136, 0), 0 1px 4px rgba(38, 51, 64, 0.29);
    /* background: #e2e2ea; */
    border-radius: 4px !important;
    border-bottom: 2px solid #7a81de !important;
}

.charter-events-alarms-alerts-icons {
    height: 55px;
    width: 80px;
    background-image: url(../images/icons/warning_big.svg) !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Alerts count — compact red pill that hugs the bell icon. Solid
   tinted bg, no border, light red text. Visually subordinate to the
   "Alerts" label so the bar doesn't scream at the user. */
span.alerts-module-alerts-count {
    background: rgb(248 113 113 / 16%);
    border: none;
    border-radius: 999px;
    color: #f77e83;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    padding: 0px 7px;
    margin-left: 0px;
    line-height: 1.4;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

/* Events-button TODAY counter (replaces the old Alerts counter). A small
   notification badge anchored to the TOP-RIGHT CORNER of the Events button
   (like the old alerts badge), overhanging the corner — NOT inline after the
   label (which wrapped/looked awful on mobile). White by default; red when any
   of today's events is a critical alert. */
/* DESKTOP: inline badge sitting just to the right of the "Events" label
   (the original alerts-badge alignment). Mobile overrides this to a corner
   badge over the stacked icon (see the ≤640 rule). */
.events-today-count {
    margin-left: 7px;
    min-width: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dfe5f2;
    background: rgb(148 148 200 / 18%);
}
.events-today-count.events-today-count-crit {
    color: #ff7777;
    font-weight: 700;
    background: #dc656542;
    border: 1px solid #c63c3c00;
}
/* Anchor for the corner badge — the Events button must be the positioned
   ancestor. (.menu-buttons is the button box in both the top bar and the
   mobile bottom nav.) */
.charter-trips-module .menu-buttons {
    position: relative;
    overflow: visible;
}

.charter-alerts-module.alerts-module-has-alerts .charter-events-alarms-alerts-icons {
    height: 55px;
    width: 80px;
    background-image: url(../images/icons/shield_critical.svg) !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* When alerts > 0: keep the "Alerts" label in the regular soft slate,
   only the bell icon and the count badge carry the red tone. Stops the
   whole word from screaming. Scoped to .ds-top so popup tabs that
   reuse these classes are unaffected. */
.ds-top .charter-alerts-module.alerts-module-has-alerts .charter-events-alarms-title .menu-button-icon,
.ds-top .charter-alerts-module.alerts-module-has-alerts .charter-events-alarms-title svg {
    color: #F87171;
}
.ds-top .charter-alerts-module.alerts-module-has-alerts .charter-events-alarms-title:hover {
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
}
.ds-top .charter-alerts-module.alerts-module-has-alerts .charter-events-alarms-title:hover .menu-button-icon,
.ds-top .charter-alerts-module.alerts-module-has-alerts .charter-events-alarms-title:hover svg {
    color: #fca5a5;
}

.charter-events-module {
    background: rgb(31, 31, 49);
    border-bottom: 1px solid #222133;
    position: fixed;
    font-size: 11px;
    bottom: 30px;
    right: 30px;
    width: 500px;
    height: 100px;
    z-index: 500000;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s;
    -webkit-font-smoothing: subpixel-antialiased;
}

.charter-events-module.charter-events-module-min:hover {
    transform: scale(1.04);
    transition: transform 0.3s;
}

.charter-events-module-maxed-header-title {
    float: left;
    margin: 20px 0 20px 20px;
    height: 30px;
    line-height: 30px;
    color: #b1bfe1;
}

.charter-events-module-maxed-close {
    background: #29293c;
    color: #67ddf8;
    border: 1px solid #2e758b;
    border-radius: 5px;
    font-weight: 500;
    width: auto;
    text-align: center;
    padding: 7px 12px;
    float: right;
    margin: 20px 20px 20px 0;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.3s;
}

.charter-events-module-maxed-close:hover {
    background: #1e1e2f;
    transition: background 0.3s;
}

.charter-events-module.charter-events-module-min {
    cursor: pointer;
}

.charter-events-module-maxed-header {
    display: none;
}

.charter-events-module-min-click-object {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.charter-events-module.charter-events-module-maxed {
    font-size: 13px;
    height: auto;
    width: 350px;
    right: 0;
    top: 65px;
    bottom: 0;
    border-radius: 0;
    background: #29293dfc;
    padding-bottom: 65px;
}

.charter-events-module-maxed-header {
    background: #28273b;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #00000024;
}

.charter-events-module.charter-events-module-maxed .charter-events-news-gradient {
    opacity: 0;
}

.charter-events-module.charter-events-module-maxed .charter-events-news {
    width: 100%;
    overflow: auto;
    padding: 0 30px 30px 30px;
}

.charter-events-module.charter-events-module-maxed .charter-events-news-empty {
    margin-top: 20px;
}

.charter-events-module.charter-events-module-maxed .news-container {
    padding: 7px 0;
    border-bottom: 1px solid #343546;
}

.charter-events-module.charter-events-module-maxed .charter-events-alarms {
    width: 0 !important;
    opacity: 0;
    transition: width 0.7s, opacity 0.3s;
}

.charter-events-module.charter-events-module-maxed .news-container .news-component.news-component-time {
    min-width: 110px;
    border-right: 1px solid #242f41;
    word-spacing: -1px;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

.news-container.news-status-tripfinished {
    color: #4cf3bc;
}

.news-container.news-status-tripstarted {
    color: #47b0ff;
}

.news-container.news-status-approachstarted {
    color: #47b0ff;
}

.lat-lon-display {
    color: #9deb3d;
    font-size: 14px;
}

.lat-lon-display-first {
    margin-top: 5px;
    margin-bottom: 0px;
    border-top: 1px solid #555664;
    padding-top: 5px;
}

.custom_arconmar_path_marker {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

.charter-playback-container {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    padding: 30px 60px;
    z-index: 50000;
}

.charter-playback-module-exit {
    position: absolute;
    width: 80px;
    text-align: center;
    /* margin-left: -75px; */
    left: 60px;
    top: -40px;
    color: #f74f65;
    background: #1f1f31;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.48);
    transition: background 0.5s;
}

.charter-playback-module-exit:hover {
    background: #303043;
    transition: background 0.5s;
    cursor: pointer;
}

.charter-playback-module {
    background: rgb(31, 31, 49);
    position: relative;
    font-size: 11px;
    height: 60px;
    z-index: 50000;
    border-radius: 5px;
    box-shadow: 0px 2px 13px rgba(19, 21, 42, 0.7);
    overflow: hidden;
    transition: height 0.3s, width 0.3s, font-size 0.3s;
}

.arconmar-playback-features-container {
    width: 90px;
    height: 60px;
    color: #a0a9ca;
    padding: 12px;
    text-align: left;
    border-right: 1px solid #2e2d3f;
}

/* .arconmar-playback-features-container {
    position: fixed;
    top: 100px;
    left: 60px;
    border-radius: 5px;
    background: #1f1f31;
    width: 120px;
    height: 150px;
    color: #a0a9ca;
    padding: 20px;
    text-align: left;
    border-right: none;
    box-shadow: 0px 2px 13px rgb(19 21 42 / 75%);
} */

#arconmar-playback-speed-display {
    color: #ff9131;
}

#arconmar-playback-voltage-display {
    color: #28d690;
}

.arconmar-playback-speed-icon.inline-block {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background-image: url(../images/icons/speed.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.arconmar-playback-voltage-icon.inline-block {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background-image: url(../images/icons/battery.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.arconmar-playback-play-pause-container {
    width: 60px;
    height: 60px;
    border-right: 1px solid #2e2d3f;
    cursor: pointer;
}

.arconmar-playback-time-container {
    width: 140px;
    height: 60px;
    color: #a0a9ca;
    padding: 12px;
    text-align: center;
    border-right: 1px solid #2e2d3f;
}

.arconmar-playback-time-slider-container {
    height: 60px;
    padding: 20px;
    border-right: 1px solid #2e2d3f;
}

#arconmar-playback-time-slider {
    background: linear-gradient(90deg, rgb(54 125 255) 0%, rgb(39 224 255) 35%, rgb(32 223 188) 100%);
    border: 1px solid #333447;
    height: 20px;
    box-shadow: 0 -1px 5px #0f112073 inset;
}

.arconmar-playback-speed-slider-container {
    color: #4ad5ff;
    font-weight: 400;
    width: 80px;
    height: 60px;
    line-height: 60px;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.5s;
}

.arconmar-playback-speed-slider-container:hover {
    background: #303043;
    transition: background 0.5s;
}

#arconmar-playback-play-pause {
    width: 60px;
    height: 60px;
    transition: background 0.5s;
}

#arconmar-playback-play-pause:hover {
    background: #303043;
    transition: background 0.5s;
}

.arconmar-playback-speed-selector {
    display: none;
    position: absolute;
    bottom: 130px;
    right: 75px;
    height: 250px;
    z-index: 5000000;
    border-radius: 5px;
    background: #1f1f31;
    padding: 20px;
    box-shadow: 0px 2px 13px rgba(19, 21, 42, 0.7);
}

#arconmar-playback-speed-slider {
    height: 210px;
    background: linear-gradient(rgba(2, 0, 36, 1) 0%, rgba(43, 43, 145, 1) 35%, rgba(0, 212, 255, 1) 100%);
    border: 1px solid #313447;
}

.arconmar-playback-play-icon {
    height: 60px;
    width: 60px;
    background-image: url(../images/icons/playback_play.svg) !important;
    background-size: 50px 50px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.arconmar-playback-stop-icon {
    height: 60px;
    width: 60px;
    background-image: url(../images/icons/playback_stop.svg) !important;
    background-size: 50px 50px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* vertical slider style */
.arconmar-playback-speed-selector .ui-slider-handle.ui-corner-all.ui-state-default {
    height: 20px;
    background: #bac9df;
    border: none;
    cursor: pointer;
    top: auto;
    outline: none;
}

/* horizontal slider style */
.ui-slider-handle.ui-corner-all.ui-state-default {
    height: 30px;
    background: #ddeafe;
    border: none;
    cursor: pointer;
    top: -6px;
    outline: none;
}

.map-side-button {
    background-color: #24283c;
    color: #afb0ca;
    position: absolute;
    font-size: 11px;
    z-index: 50000;
    border-radius: 5px;
    transition: transform 0.3s;
    box-shadow: 0 0 10px rgba(23, 21, 58, 0.47);
    width: 26px;
    height: 26px;
    right: 18px;
}

.map-center-button {
    background-image: url(../images/icons/map_center.svg) !important;
    background-size: 14px 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    top: 115px;
}

.map-layers-button {
    background-image: url(../images/icons/layers.png) !important;
    background-size: 14px 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    top: 80px;
}

.map-side-button:hover {
    transform: scale(1.2);
    transition: transform 0.3s;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
   MAP LAYERS SELECTOR — standardized popover (user call, 4 Aug).
   Chrome comes from .arc-dropdown (#242434 surface, black-tint border,
   12px radius, the shared shadow) — same surface as the settings menu and
   every events popover. Three control types, three affordances:
     · MAP     → segmented selector, exactly one active
     · LAYERS  → on/off switch (mirrors the cruise Engine-overlay toggle)
     · utility → Center map, plain action row under a hairline
   position:FIXED (not absolute): the map lives in .charters-container,
   which is position:fixed and therefore always establishes a stacking
   context — trapping this menu's z-index BELOW root-level popups (trip
   details = 5100). Viewport-anchored, so its z-index reaches the root.
   Map.js sets top/right inline against the button's live rect.
   ══════════════════════════════════════════════════════════════════════ */
.map-layers-selector {
    display: none;
    position: fixed;
    z-index: 5000000;
    top: 80px;
    right: 60px;
    width: 210px;
    padding: 10px;
}

/* Section head — the app-standard pattern (§9.5): small cyan icon +
   uppercase letter-spaced meta label. */
.map-layers-selector .mls-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 8px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.7);
}
.map-layers-selector .mls-head i,
.map-layers-selector .mls-head svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.map-layers-selector .mls-head:not(:first-child) { padding-top: 12px; }

/* ── Segmented map-type selector ── */
.map-layers-selector .mls-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(15, 17, 27, 0.5);
}
.map-layers-selector .mls-seg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #95a1b9;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.map-layers-selector .mls-seg-btn i,
.map-layers-selector .mls-seg-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
/* Active map type — the ONE selected surface. */
.map-layers-selector .mls-seg-btn.map-layers-container-selected {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
    color: #22D3EE;
}

/* ── On/off layer toggle (Fuel stations) ── */
.map-layers-selector .mls-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(15, 17, 27, 0.5);
    color: #95a1b9;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.map-layers-selector .mls-toggle-icon { width: 14px; height: 14px; flex-shrink: 0; }
.map-layers-selector .mls-toggle-label { flex: 1; }
.map-layers-selector .mls-toggle-switch {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    transition: background 0.18s ease;
}
.map-layers-selector .mls-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #8b93b8;
    transition: transform 0.18s ease, background 0.18s ease;
}
/* ON — .map-layers-container-selected is the state class Map.js toggles. */
.map-layers-selector .mls-toggle.map-layers-container-selected {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
    color: #22D3EE;
}
.map-layers-selector .mls-toggle.map-layers-container-selected .mls-toggle-switch {
    background: rgba(34, 211, 238, 0.35);
}
.map-layers-selector .mls-toggle.map-layers-container-selected .mls-toggle-knob {
    transform: translateX(13px);
    background: #22D3EE;
}

/* ── Hairline + utility row ── */
.map-layers-selector .mls-sep {
    height: 1px;
    margin: 12px 2px 10px;
    background: rgba(148, 148, 200, 0.12);
}
.map-layers-selector .mls-util {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #95a1b9;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.map-layers-selector .mls-util i,
.map-layers-selector .mls-util svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Hover lifts lighting only, never geometry (§9.11) — pointer devices only,
   so a tap on touch doesn't leave a stuck hover state. */
@media (hover: hover) {
    .map-layers-selector .mls-seg-btn:hover,
    .map-layers-selector .mls-util:hover { background: rgba(34, 211, 238, 0.07); color: #cfe9f2; }
    .map-layers-selector .mls-toggle:hover { border-color: rgba(34, 211, 238, 0.22); }
    .map-layers-selector .mls-seg-btn.map-layers-container-selected:hover,
    .map-layers-selector .mls-toggle.map-layers-container-selected:hover { color: #22D3EE; }
}

/* PRO LOCK — Fuel Stations for STANDARD: dimmed label, lock glyph where the
   switch would be; the row still opens the PRO popover (Map.js guard). */
.map-layers-selector .mls-toggle.map-layer-locked { opacity: 0.6; }
.map-layers-selector .mls-toggle-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 17px;
}
.map-layers-selector .mls-toggle-lock i,
.map-layers-selector .mls-toggle-lock svg {
    width: 13px;
    height: 13px;
    color: rgba(34, 211, 238, 0.7);
}

/* ── Themed alert/fuel single markers ── dark disc + Lucide glyph naming the
   event (battery / bilge / smoke / fuel), replacing the red/yellow boat
   markers on warning + fuel-stop clicks (user call — mirrors the battery
   module's chart-hover marker look). Tone class colours the glyph + ring. */
.alert-map-marker {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 18, 30, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 14px rgba(34, 211, 238, 0.08);
}
.alert-map-marker i,
.alert-map-marker svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}
.alert-map-marker-crit {
    border: 2px solid rgba(248, 113, 113, 0.85);
    color: #F87171;
}
.alert-map-marker-warn {
    border: 2px solid rgba(251, 191, 36, 0.85);
    color: #FBBF24;
}

/* ── Trip-map micro markers — guest-app 3.3 style (user call): dark disc,
   tinted ring + glow, Lucide glyph. Replaces the low-res station / crash /
   night PNG sprites — vector, crisp at any DPI. Sized by the divIcon box. */
.trip-map-marker {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 17, 27, 0.85);
}
.trip-map-marker i,
.trip-map-marker svg { flex-shrink: 0; }
/* Route stop (marina / anchorage) — CYAN, the app accent (user call, 4 Aug;
   was purple). */
.trip-map-marker-stop {
    border: 1px solid rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.28);
}
.trip-map-marker-stop svg { width: 13px; height: 13px; color: #22D3EE; }
.trip-map-marker-stop-sm {
    border: 1px solid rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.22);
}
.trip-map-marker-stop-sm svg { width: 9px; height: 9px; color: #22D3EE; }
/* Overnight/anchorage moon — soft indigo. */
.trip-map-marker-night {
    border: 1px solid rgba(148, 148, 255, 0.5);
    box-shadow: 0 0 12px rgba(125, 99, 255, 0.25);
}
.trip-map-marker-night svg { width: 14px; height: 14px; color: #a8b0ff; }
/* Impact — red, bigger, stronger ring. */
.trip-map-marker-crash {
    border: 1.5px solid rgba(248, 113, 113, 0.7);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.35);
}
.trip-map-marker-crash svg { width: 20px; height: 20px; color: #F87171; stroke-width: 2.2; }
/* Fuel-station visit — amber (persistent trip-route markers). */
.trip-map-marker-fuel {
    border: 1px solid rgba(251, 191, 36, 0.55);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}
.trip-map-marker-fuel svg { width: 12px; height: 12px; color: #FBBF24; }
/* Home base (live 7-day route in the Cruise popup) — green, the boat's port. */
.trip-map-marker-home {
    border: 1px solid rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.28);
}
.trip-map-marker-home svg { width: 13px; height: 13px; color: #34D399; }
/* Battery-tinted station discs (Batteries tab, user call 12 Aug): while the
   battery module is active, each stop disc paints in the zone color of that
   stop's LOWEST SUSTAINED voltage — charge tone = shore charging, red =
   dangerously drained while parked. --bm-stop-v-color is the per-marker
   dynamic value set by battery_details._tintStationMarkers; the module's
   park handler strips the class so the Route tab keeps plain cyan discs. */
.trip-map-marker.trip-map-marker-batt {
    /* Quieter fill, the GLYPH carries the zone color (user call, 14 Aug) —
       same ladder as the module's main voltage chart (getVoltageColor).
       Border plain black + thicker glyph stroke (user call, 14 Aug v2). */
    background: color-mix(in srgb, var(--bm-stop-v-color, #22D3EE) 18%, #0b0e16);
    border: 1px solid #000;
    box-shadow: 0 0 12px color-mix(in srgb, var(--bm-stop-v-color, #22D3EE) 40%, transparent);
}
.trip-map-marker.trip-map-marker-batt svg {
    color: var(--bm-stop-v-color, #22D3EE);
    stroke-width: 2.6;
}
/* Cell-damage tier (lowest): SOLID red disc + white glyph — the tint/glyph
   treatment wasn't alarming enough for the worst state (user call, 14 Aug). */
.trip-map-marker.trip-map-marker-batt.trip-map-marker-batt-dmg {
    background: #FF0000;
}
.trip-map-marker.trip-map-marker-batt.trip-map-marker-batt-dmg svg { color: #fff; }

/* ── Station-popup battery block (battery module context, user call 14 Aug) ──
   Appended under the station popup's Arrival/Depart rows by
   _tintStationMarkers, in the events battery-popover row language: tiny
   uppercase bank head with icon, label/value rows, values tinted by the
   stop's zone color (--bm-stop-v-color, inline per-instance var). */
/* Station popup head — [Station] gray pill + orange place name (user call,
   14 Aug; replaces the legacy "Station"/"station" title lines). Shared by
   the Route tab and the Batteries tab (same markers, same popup). */
.trip-station-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    text-align: left;
}
.trip-station-pop-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.75);
    background: rgb(148 161 185 / 22%);
}
.trip-station-pop-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #FB923C;
}

.bm-stop-pop {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 148, 200, 0.18);
    text-align: left;
}
.bm-stop-pop-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bm-stop-v-color, #22D3EE);
}
.bm-stop-pop-head i,
.bm-stop-pop-head svg { width: 13px; height: 13px; color: var(--bm-stop-v-color, #22D3EE); }
.bm-stop-pop-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
    font-size: 0.72rem;
}
.bm-stop-pop-lbl { color: #8a92ab; font-weight: 500; }
.bm-stop-pop-val {
    color: var(--bm-stop-v-color, #22D3EE);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
/* Dense view (phones, toggled by TripsViz when >8 route markers are in the
   current bounds): shrink the discs so the route stays readable; zooming
   into a sparser view restores full size. Scales around the anchor centre. */
/* Continuous zoom scaling (user call, 6 Aug): --trip-marker-scale is set on
   the map container by updateTripMarkerDensity — 1× at zoom ≤10 growing
   0.2×/level to 3× at maxZoom 20. Scale lives on the INNER disc (the wrap
   carries Leaflet's own translate3d — scaling it would break positioning).
   The phone dense shrink compounds via calc(). */
.trip-map-marker {
    transform: scale(var(--trip-marker-scale, 1));
    transition: transform 0.15s ease;
}
.trip-markers-dense .trip-map-marker {
    transform: scale(calc(var(--trip-marker-scale, 1) * 0.78));
}

/* (Legacy .map-layers-container center-map rules removed — the redesigned
   menu owns this row as .mls-util, shown at every breakpoint.) */

.charter-events-news {
    height: 100%;
    color: #8e97ab;
    line-height: 1.5;
    width: 390px;
    padding: 18px 20px 0 20px;
    transition: width 0.3s;
}

.news-component.news-component-type {
    text-transform: capitalize;
}

.news-component {
    display: inline-block;
    padding-right: 4px;
}

.news-container.news-status-warning .news-component.news-component-status {
    color: #ffbe00;
    font-weight: 500;
}

.news-container.news-status-resolved .news-component.news-component-status {
    color: #3ce699;
    font-weight: 500;
}

.news-container.news-status-critical .news-component.news-component-status {
    color: #ff3a3a;
    font-weight: 500;
}

.news-container .news-component.news-component-name {
    color: #cadaff;
}

.news-container .news-component.news-component-time {
    color: #4bccdc;
    min-width: 97px;
    border-right: 1px solid #387b8d;
    margin-right: 8px;
    word-spacing: -1px;
}

.news-container .news-component.news-component-sailedout-icon {
    width: 20px;
    height: 16px;
    background-image: url(../images/icons/wave.png) !important;
    background-size: 11px !important;
    background-repeat: no-repeat !important;
    background-position: 1px 1px !important;
    vertical-align: middle;
    margin-left: 5px;
}

.news-container .news-component.news-component-returnedhome-icon {
    width: 20px;
    height: 16px;
    background-image: url(../images/icons/returned.png) !important;
    background-size: 11px !important;
    background-repeat: no-repeat !important;
    background-position: 1px 1px !important;
    vertical-align: middle;
    margin-left: 5px;
}

.news-container .news-component.news-component-fuel-station-icon {
    width: 20px;
    height: 16px;
    background-image: url(../images/icons/fuel_station.svg) !important;
    background-size: 13px !important;
    background-repeat: no-repeat !important;
    background-position: 1px 1px !important;
    vertical-align: middle;
    margin-left: 5px;
}

.charter-events-news-gradient {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 355px;
    background: linear-gradient(rgba(37, 41, 60, 0) 0%, rgba(30, 30, 48, 0.94) 77%);
    background: -webkit-linear-gradient(rgba(37, 41, 60, 0) 0%, rgba(30, 30, 48, 0.94) 77%);
}

.charter-events-alarms {
    height: 100%;
    float: left;
    font-size: 13px;
    font-weight: 400;
    color: #aab5ce;
    line-height: 1.5;
    text-align: center;
    width: 100px;
    padding: 10px;
    border-right: 1px solid #2d2e3f;
    transition: width 0.7s, opacity 0.3s;
}

.charter-events-alarms-icons {
    height: 55px;
    width: 80px;
    background-image: url(../images/icons/events.svg) !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.charter-events-mobile-max-button {
    display: none;
    height: 100%;
    float: right;
    font-size: 13px;
    font-weight: 400;
    color: #aab5ce;
    line-height: 1.5;
    text-align: center;
    width: 100px;
    padding: 10px;
    border-right: 1px solid #2d2e3f;
    transition: width 0.7s, opacity 0.3s;
}

.charter-events-mobile-max-button .charter-events-max-icons {
    height: 45px;
    width: 45px;
    background-image: url(../images/icons/events.svg) !important;
    background-size: 27px 27px !important;
    background-repeat: no-repeat !important;
    background-position: center;
}

.subTableContainer {
    height: 140px;
}

.charter_details_popup .boat_Details_popup_menu {
    text-align: center;
    width: 100%;
    height: 80px;
    /* height: 50px; */
    position: relative;
    background: #28273b;
    border-bottom: 1px solid rgb(0 0 0 / 14%);
}

.sensor-box {
    transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
    /* Equal-height flex-column box. BoatDetails.js sets `display:
       inline-flex` for sensors the boat has (and `display: none` for
       the others) — so the JS show/hide works the same, but now the
       inner layout is a flex column.

       Children stack: title+icon at top, middle column (flex:1)
       grows to fill the box, right column pinned to the bottom.
       The middle column itself is a flex column with content pushed
       to its bottom — so GPS's location pin + caption and Inet's
       signal bars sit directly above the bottom state label, all
       aligned across the sensor row.

       Mobile sets its own sizing via the .ow-accounts overrides
       further down. */
    height: 235px;
    vertical-align: top;
    position: relative;
    flex-direction: column;
    align-items: stretch;
}
.sensor-box > .sensor-box-mobile-left {
    flex: 0 0 auto;
}
.sensor-box > .sensor-box-mobile-middle {
    flex: 1 1 auto;
    min-height: 0;
}
/* Bottom slot: fixed 80px region pinned to the bottom of the sensor
   box. Content inside bottom-aligns via flex-end so labels of varying
   heights all sit on the same baseline across boxes. */
.sensor-box > .sensor-box-mobile-right {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    padding-bottom: 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

.sensor-box-arrow {
    background-image: url(../images/icons/menu_dropdown.svg);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: center;
    height: 18px;
    width: 78%;
    left: 11%;
    bottom: -18px;
    opacity: 0.8;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #191b274f;
    border-bottom: 1px solid #c0c4ff29;
    position: absolute;
}

.sensor-desktop-title {
    color: #cbdef6;
    font-weight: 500;
}

.trip-cell-arrow-down {
    background-image: url(../images/icons/down_arrow_fat.svg);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: right;
    width: 25px;
    margin-left: 16px;
    height: 100%;
}

.no-crash-text {
    color: #33d993;
    font-size: 22px;
}

.no-crash-div {
    min-height: 170px;
    background: #1c1d29;
    color: #b9bac9;
    padding: 30px 30px 15px 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

/* Crash + Events popups use the standardized arc-popup shell but ALSO keep a
   drag handle on phones, so they're bottom-ANCHORED resizable sheets (map stays
   partially visible on top + resizes as the user drags) rather than the
   full-screen arc-popup default. Override the arc-popup mobile rule
   (top:0; height:100svh) so enablePopupDrag owns the inline height/top. */
@media (max-width: 640px) {
    #crash_sensor_popup.arc-popup,
    #events_popup.arc-popup {
        top: auto !important;
        height: auto;                 /* enablePopupDrag sets the inline height */
        /* Square top corners — the popup has overflow:hidden, so a top
           border-radius clipped the drag handle's corners and let the map/page
           background show through the rounded gap (the sheet doesn't "round
           around" the map). Flat top edge sits flush over the map. */
        border-radius: 0;
    }
}

.crash-details-container {
    height: auto;
    background: #151520;
    display: none;
}

.crash-sensor-list-item.trip-data-row:first-child {
    border-top: none;
    margin-top: 0;
}

/* (Content padding comes from arc-popup-content — no container padding here.) */

/* ── Impact list — Arconmar surface style ─────────────────────────────────
   Translucent dark panel, cyan-accented section heading, clean rows with a
   colour-coded severity chip. Replaces the old grey column-header bar. */
#boat-crash-list {
    background: rgba(25, 27, 39, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid #9494c833;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(64, 87, 126, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Section heading: small cyan icon + uppercase letter-spaced label + hairline */
.crash-list-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12);
}
.crash-list-heading-icon {
    width: 14px;
    height: 14px;
    color: rgba(34, 211, 238, 0.65);
}
.crash-list-heading-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.7);
}

.no-crash-text-small {
    font-weight: 300;
    margin-top: 35px;
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.crash-sensor-list-item.trip-data-row {
    background: transparent;
    border-top: 1px solid rgba(148, 148, 200, 0.10);
    border-bottom: none;
    padding: 13px 18px;
    transition: background 0.18s ease;
    /* FLEX row — severity group left, date right, on ONE line. The old layout
       used float:right on the date which dropped it to a second line on narrow
       phones (the "date falling out of rows" bug). Flex keeps them on one row;
       the left group shrinks instead of shoving the date off. */
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Left group (severity icon + label + force) — takes the slack, can shrink. */
.crash-sensor-list-item .trip-data-cell-status {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    float: none;
    margin: 0;
}
/* Date cell — fixed to the right, never shrinks/wraps. */
.crash-sensor-list-item .trip-data-cell-time.float-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    float: none;
    margin: 0;
    white-space: nowrap;
}

.crash-sensor-list-item.trip-data-row-selected {
    background: rgba(34, 211, 238, 0.06);
}

.crash-sensor-list-item.trip-data-row-selected .trip-cell-arrow-down {
    background-image: url(../images/icons/up_arrow_fat.svg);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: right;
}

.crash-sensor-list-item.trip-data-row:hover {
    background: rgba(34, 211, 238, 0.05) !important;
    transition: background 0.18s ease;
    cursor: pointer;
}

.crash-sensor-list-item .alarm_type_text {
    /* float removed — the status cell is now a flex row (see above), so the
       severity label + force align via flex, not floats. */
    float: none;
}

.crash-sensor-list-item .trip-data-cell-time {
    color: #acb7d0;
    font-size: 14px;
}

.crash-sensor-list-item .trip-data-cell-critical {
    margin-right: 10px;
}

.crash-details-info-container {
    padding: 20px;
    height: auto;
}

.crash-details-info-left-box {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.crash-details-info-right-box {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    display: inline-block;
}

.crash-details-impact-force-value {
    font-size: 50px;
    color: orange;
}

.crash-details-impact-force-name {
    margin-right: 20px;
}

#crash-details-impact-chart-container {
    width: 85%;
    height: 33px;
    margin-top: 11px;
    margin-left: -7px;
    margin-bottom: 40px;
}

.crash-details-speed-change-value {
    font-size: 50px;
    color: #4183ff;
}

.crash-details-impact-force-name,
.crash-details-speed-change-name {
    color: #b1bcd5;
    vertical-align: bottom;
    margin-bottom: 8px;
    font-size: 22px;
    margin-left: 7px;
    font-weight: 300;
}

.crash-details-sub-title {
    font-size: 20px;
    color: #ababbe;
    margin-bottom: 12px;
    font-weight: 300;
    border-bottom: 1px solid #303045;
    width: 80%;
    padding-bottom: 10px;
}

.crash-details-speed-box {
    color: #9696a2;
    font-weight: 300;
    margin: 8px 0;
    margin-left: 1%;
}


/* Crash popup shell + header inherit from .popup.settings_popup and
   the standard .portal-intro-menus-wrapper header treatment — same
   look as the internet sensor popup. Crash-specific shell/header
   overrides (background lightening, 70px gradient bar) were removed
   for parity. */

span.speed-before-value {
    color: #31bcb8;
    font-weight: 400;
    font-size: 20px;
}

span.speed-after-value {
    color: #7b95ff;
    font-weight: 400;
    font-size: 20px;
}

span.impact-severity-value {
    font-weight: 400;
    font-size: 18px;
}

.crash-severity-value-low {
    color: #ffaa27;
}

.crash-severity-value-med {
    color: #ff6d14;
}

.crash-severity-value-high {
    color: #f03030;
}

.crash-chart-title {
    text-align: left;
    margin-top: 30px;
    margin-left: 20px;
    color: #717183;
    font-size: 12px;
}

/* Shown in place of the force chart when flespi returned no
   acceleration.array for the impact (aged-out example crashes, or a real
   impact without accelerometer data). */
.crash-force-chart-empty {
    padding: 28px 20px;
    text-align: center;
    color: #5b6478;
    font-size: 0.8rem;
}

/* Impact popup — content background matches the boat-details popup shell
   (user call, 27 Jul). Overriding the arc var keeps the header band and the
   rest of the arc chrome untouched. */
#crash_sensor_popup.arc-popup {
    --arc-content-bg: #3d4056;
}
/* Fleet Internet — boat-details surface (user call, 5 Aug); the arc var
   carries it so the header band + chrome stay untouched. */
#inet_fleet_popup.arc-popup {
    --arc-content-bg: #3d4056;
}
/* Internet DETAILS popup — the app-wide bright token instead (user call,
   6 Aug). --brcol is translucent, so it needs an opaque base under it:
   paint the shell's base #3d4056 and let the content var layer --brcol
   on top. */
#internet_sensor_popup.arc-popup {
    background: #3d4056;
    --arc-content-bg: var(--brcol);
}

.alarm_type_text.crash-probability-cell {
    width: 150px;
}

.alarm_type_text.crash-gravity-force-cell {
    color: #acb7d0;
}

span.crash-force-value {
    font-weight: 500;
    color: #ff993f;
    margin-left: 5px;
}

#crash-details-force-chart-container {
    height: 150px;
}

#crash-details-speed-chart-container {
    height: 150px;
}

.crash-display-title {
    color: #ffa502;
    font-size: 12px;
    padding-bottom: 2px;
    border-bottom: 1px solid #50515f;
    margin-bottom: 7px;
}

/* ═══════════════════════════════════════════════════════════════════
   INTERNET SENSOR POPUP — Stats-style rebuild
   -------------------------------------------------------------------
   Legacy `.component-box.dark-theme` / `.inet-box-title.f-purewhite`
   / per-id slabs etc. were replaced by a clean Stats-page surface:
   warm popup body (#3d4056, same as boat-details popup), 4 translucent
   `.stats-panel` quadrant cards inside a `.stats-grid` 2-col layout,
   dark `.popup_header` band, JS keeps writing to `.inet-params-content`
   inside each panel.
   ═══════════════════════════════════════════════════════════════════ */

/* Popup shell — override the .popup.settings_popup near-black base
   (specificity 0,2,0) with id+popup+settings_popup chain (0,3,0). */
/* Now on the shared arc-popup shell (.arc-popup-*); chrome (header band,
   title, meta chip, close X, body bg, position) is owned by popupShell.css.
   The ONE thing we must keep: this popup has two entry paths —
     1. Boat-details Live → opens on .popup_overlay (z-index 4999).
     2. Fleet inet popup → opens nested, on .popup_overlay_2 (z-index 5001).
   The base .arc-popup z-index is 5000, BEHIND overlay_2 — so from path 2 the
   popup would be hidden behind the blue overlay. Bump above 5001. */
#internet_sensor_popup.arc-popup {
    z-index: 5010 !important;
    /* Same width as the fleet inet popup (#inet_fleet_popup, 35%). The
       ≤1024 .arc-popup width:100% rule still takes over on phones. */
    width: 35%;
}

/* Cards stack in ONE column (card under card) — the popup is a narrow
   35% panel now, so the old 2-col .stats-grid squeezed both cards. The
   panels themselves use the shared `.stats-panel` rule. */
#internet_sensor_popup .stats-grid {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

/* The four quadrant panels' header label is also `.inet-box-title`
   so the JS "Signal (last known)" rewrite still works. The base
   `.stats-panel-header-label` styling already gives us
   uppercase / letter-spaced / cyan — just need to make sure JS can
   replace the .html() without breaking layout. */
#internet_sensor_popup .stats-panel .inet-box-title .f-pink,
#internet_sensor_popup .stats-panel .inet-box-title .text-tiny {
    font-size: 0.55rem;
    color: #F87171;
    letter-spacing: 0.08em;
    margin-left: 4px;
}

/* Parameter rows inside each panel. JS writes
   <div class="inet-param-line">
     <span class="inet-param-label">Status</span>:
     <span class="inet-param-value">…</span>
   </div>
   We restyle these as Stats-style label / value rows with dashed
   separators between them. */
#internet_sensor_popup .inet-params-content {
    display: flex;
    flex-direction: column;
}
#internet_sensor_popup .inet-param-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(148, 148, 200, 0.10);
    font-size: 0.78rem;
    color: #95a1b9;
}
#internet_sensor_popup .inet-param-line:last-child {
    border-bottom: none;
}
#internet_sensor_popup .inet-param-label {
    color: #95a1b9;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
#internet_sensor_popup .inet-param-value {
    color: #d6dbe7;
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-align: right;
}

/* Offline duration row — the "970 days" value lives in an .inet-time-box
   carrying the legacy `wd80` (80px) width, which forces long values to
   wrap onto two lines. Inside this popup let the box size to its content
   and stay on a single line. */
#internet_sensor_popup .inet-issue-container {
    white-space: nowrap;
}
#internet_sensor_popup .inet-issue-container .inet-time-box {
    width: auto !important;
    min-width: 0;
    white-space: nowrap !important;
    word-break: normal !important;
}

/* Offline reason row (empty-label `offline_text` line) — its value is a
   bare .inet-time-box DIRECT child of .inet-param-value (the duration box
   above is nested inside .inet-issue-container, so the direct-child
   selector leaves it alone). Render the reason as a pill on a slightly
   darker surface than the panel so it reads as an explanatory note, not a
   live stat, and let it wrap / align left since it's a full sentence. */
#internet_sensor_popup .inet-param-line:has(> .inet-param-value > .inet-time-box) .inet-param-value {
    text-align: left;
    white-space: normal;
}
#internet_sensor_popup .inet-param-value > .inet-time-box {
    display: inline-block;
    padding: 5px 12px !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

/* WiFi name + password — keep their accent colors but at Stats weight. */
#internet_sensor_popup .inet-param-value.f-blue {
    color: rgba(34, 211, 238, 0.9);
}
#internet_sensor_popup .inet-param-value.f-bold {
    font-weight: 700;
}

/* Signal bars inside the value column — sized to match the row's
   x-height so they sit on the value baseline. */
#internet_sensor_popup .inet-param-value .signal-bars {
    height: 13px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
}
#internet_sensor_popup .inet-param-value .signal-bars .bar {
    width: 4px;
    margin-left: 2px;
}
/* Signal Ranking row — value collapses to bar width so the bars hug
   the right edge of the panel like every other value. */
#internet_sensor_popup .inet-param-value:has(.signal-bars) {
    display: inline-flex;
    justify-content: flex-end;
    min-width: 0;
}

/* (Weekly data-usage chart panel removed with the RMS usage fetch.) */

/* ═══ Crash popup retained selectors (unchanged from before) ═══ */
.crash-popup-chart-parent {
    height: 90%;
    width: 100%;
}

#crash-popup-chart-container {
    width: 100%;
    height: 400px;
}

#crash-popup-chart-container .arconmarLoader {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

/* Global #internet-popup-chart-container rule removed — replaced by
   the id-scoped variant inside `#internet_sensor_popup` above so the
   chart container picks up the Stats-panel transparent background
   instead of a flat #151520 slab. */

#internet.alarm-state-style-CRITICAL .internet-consumption-main-number {
    color: #a4aac1;
}

#internet.alarm-state-style-CRITICAL.data-consumed-CRITICAL .internet-consumption-main-number {
    color: #ff4b1c;
}

#internet.alarm-state-style-CRITICAL .inet-package-title {
    color: #ff4b1c;
}

#internet.alarm-state-style-CRITICAL .internet-sensor-image {
    background-image: url(../images/icons/router_critical.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.internet-signal-display {
    height: 5px;
    background: #454d58;
    border-radius: 5px;
    max-width: 100px;
    margin: 0 auto;
}

.signal-box {
    height: 5px;
    border-radius: 5px;
    width: 0;
}

.signal-box.signal-box-green {
    background: #00dd80;
}

.signal-box.signal-box-yellow {
    background: #ffb645;
}

.signal-box.signal-box-red {
    background: #ff4b1c;
}

.internet-signal-display-strenght {
    display: inline-block;
    font-size: 11px;
}

.internet-signal-display-text {
    display: inline-block;
}

.internet-no-signal-display-text {
    display: inline-block;
}


.sensor-loader {
    box-sizing: border-box;
    position: absolute;
    height: 120px;
    left: 0;
    right: 0;
    background: #191b27;
    z-index: 100000;
    transition: background 0.3s;
}

.sensor-loader .arconmarLoader {
    margin-top: 20px;
}

/* trips_fleet_popup chrome (header band + portal-intro children)
   removed from these shared selectors — owned by the .arc-popup
   shell now. alerts/settings still use the legacy markup until
   migrated. */
.alerts_fleet_popup .alerts_fleet_popup_menu,
.settings_popup .settings_popup_menu {
    text-align: center;
    width: 100%;
    height: 80px;
    position: relative;
    background: #2b2b42;
}

.alerts_fleet_popup .menu-buttons:first-child,
.settings_popup .menu-buttons:first-child {
    border-left: 1px solid #212131;
}

.alerts_fleet_popup .portal-intro-menus-wrapper,
.settings_popup .portal-intro-menus-wrapper {
    text-align: center;
}

.charter_details_popup .portal-intro-menus-container,
.alerts_fleet_popup .portal-intro-menus-container,
.settings_popup .portal-intro-menus-container {
    float: none;
    margin-left: 0;
    font-size: 0;
    text-align: left;
}

.charter_details_popup .portal-intro-menus-dividers,
.alerts_fleet_popup .portal-intro-menus-dividers,
.settings_popup .portal-intro-menus-dividers {
    display: none;
}

.charter_details_popup .component-box,
.alerts_fleet_popup .component-box,
.settings_popup .component-box,
.trips_fleet_popup .component-box {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    min-width: 120px;
    max-width: 160px;
    border: 1px solid #9494c866;
    box-shadow: 0 0 15px rgb(64 87 126 / 34%);
    border-radius: 10px;
    margin: 10px;
    border-spacing: 0;
    background: #191b27b5;
    color: #a4aac1;
    font-size: 15px;
    padding: 15px;
}

/* #internet.component-box {
    display: block;
    min-width: 100%;
} */

.popup.alerts_fleet_popup, .popup.trips_fleet_popup, .popup.fleet_stats_popup  {
    position: fixed;
    background: rgb(28 28 42);
    z-index: 5000;
    margin: 0;
    left: auto;
    right: 0;
    width: 60%;
    box-shadow: 0 0 30px rgb(23 47 113 / 66%);
}
/* Fleet Stats matches the boat-details popup width (user call, 27 Jul —
   60% overlapped the map, whose popup-view-mode inset is 55%). The map's
   right edge now meets this popup's left edge exactly, same as boat
   details; the ≥1919px block below drops both to 50% in step. */
.popup.fleet_stats_popup {
    width: 55%;
}

/* Mobile (≤ 1024px): trips / alerts / stats fleet popups go full-width
   — 60% leaves a useless gutter on the left that doesn't add value on
   smaller screens. !important wins over any per-page inline/JS-injected
   width style. */
@media only screen and (max-width: 1024px) {
    .popup.alerts_fleet_popup,
    .popup.trips_fleet_popup,
    .popup.fleet_stats_popup {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
}

.popup.alerts_fleet_popup thead tr,
.popup.trips_fleet_popup thead tr {
    box-shadow: none !important;
}

.popup.alerts_fleet_popup thead th,
.popup.trips_fleet_popup thead th {
    background: #12121e;
}

.popup.alerts_fleet_popup thead th:first-child {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.popup.alerts_fleet_popup thead th:last-child {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.popup.alerts_fleet_popup td {
    background-color: none;
}

.popup.alerts_fleet_popup td:first-child {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.popup.alerts_fleet_popup td:last-child {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

/* "Seen" rows: NO row-wide opacity (that washes the whole row).
   The eye icon in the first cell carries the "already viewed" signal;
   the body text is just slightly desaturated so it still reads as
   "less important" without going translucent. `.alerts_row_seen` has
   no global rule on purpose — the desaturation lives in the scoped
   selectors below. (Per-boat alerts table removed — fleet only now.) */
.alerts_fleet_popup #alerts_list_table tbody tr.alerts_row_seen,
.alerts_fleet_popup #alerts_list_table tbody tr.alerts_row_seen td {
    color: #7e879d !important;
}

.alert_unseen_mark {
    width: 8px;
    height: 8px;
    background-color: #ff5344;
    border-radius: 50%;
    box-shadow: 0 0 5px #ff0077f0;
    vertical-align: middle;
}

/* Eye icon for seen alerts — small, muted slate so it reads as
   "already viewed" without competing with the row's other data. */
.alert_seen_icon {
    width: 14px;
    height: 14px;
    color: rgba(123, 123, 147, 0.7);
    stroke-width: 1.75;
    vertical-align: middle;
    display: inline-block;
}
.alert_seen_icon svg {
    width: 14px;
    height: 14px;
}

/* Eye icon fades + scales in when a row is marked seen live (the user just
   viewed the page). Applied by updateAlertsTableForSeen(). */
.alert_seen_icon-fadein,
.alert_seen_icon-fadein svg {
    animation: alert-seen-fadein 0.55s ease both;
}
@keyframes alert-seen-fadein {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* Legacy class — kept for any stragglers (e.g. backend-templated
   markup) that still emit the old dot. Eye icon is the new default. */
.alert_seen_mark {
    width: 8px;
    height: 8px;
    background-color: #7b7b93;
    border-radius: 50%;
    box-shadow: 0 0 5px #4a3a41;
    vertical-align: middle;
}


.popup.alerts_fleet_popup tr {
    background: #2f2f3e !important;
    transition: background 0.2s;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.52);
}

.popup.alerts_fleet_popup tr:hover{
    background: #363649 !important;
    transition: background 0.2s;
    cursor: pointer;
}

.popup.alerts_fleet_popup .dataTable {
    /* padding: 10px; */
    border-collapse: separate !important;
    border-spacing: 0px 10px !important;
    vertical-align: center;
}

/* Tracker-offline banner — translucent dark surface, faint red border
   (red carries the meaning, not the background). Sized to content +
   padding, centered. Spacey-Marine surface language: glass-like, calm,
   not an alarm shouting at you. */
/* Tracker-offline banner — uses the urgent red urgent-card palette from
   the battery module's "Possible cell damage" overlay
   (bg-red-500/10 + border-red-500/40 + text-red-400). Reads as
   "something here needs your attention, not just informational". */
.device_offline_banner {
    display: none; /* JS flips to flex when needed */
    align-items: flex-start;
    gap: 12px;
    max-width: 560px;
    margin: 22px auto 8px auto;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgb(239 68 68 / 23%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.device_offline_banner_icon {
    width: 18px;
    height: 18px;
    color: #F87171;
    flex-shrink: 0;
    margin-top: 1px;
    stroke-width: 1.75;
}
.device_offline_banner_text {
    flex: 1;
    min-width: 0;
}
.device_offline_banner_title {
    color: #F87171;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 3px;
}
.device_offline_banner_sub {
    color: rgba(248, 113, 113, 0.75);
    font-size: 0.8rem;
    line-height: 1.45;
}
.device_offline_banner_sub .lastMessageTime {
    color: #F87171;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.popup.charter_details_popup {
    position: fixed;
    background: #3d4056;
    z-index: 4500;
    width: 55%;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    margin: 0;
    box-shadow: 0 0 30px rgba(23, 47, 113, 0.66);
    border-radius: 1px;
    border-top-right-radius: 1px;
    /* FLEX COLUMN — header (the Live|Trips|Events|Stats menu) takes its own
       natural height, content flows right after it. Replaces the legacy
       `popup_header{height:0;absolute}` + `popup_content{top:80px}` pattern
       that hardcoded the content offset and could never match the real header
       height across breakpoints (it differs desktop vs phone). With flow
       layout the drag handle (16px, already a flex-shrink:0 first child) and
       the header are simply consumed by the column — NO top: arithmetic. */
    display: flex;
    flex-direction: column;
}
.popup.charter_details_popup > .popup_header {
    position: relative;     /* was absolute height:0 — now a real flow item */
    height: auto;
    width: auto;
    flex-shrink: 0;
    z-index: 1;             /* above content for the close button, no absolute */
}
.popup.charter_details_popup > .popup_content {
    position: relative;     /* was absolute top:80px — now flows after header */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex: 1;
    min-height: 0;          /* let it shrink so internal overflow:auto scrolls */
}

/* Focus effect while the Internet details popup floats over boat details
   (Live-tab open path): blur + darken the popup behind so the eye stays on
   the inet cards; interaction off until the inet popup closes. The filter
   transition lives ON this state class (not on the id selector — that would
   outrank popupDrag's `.popup.charter_details_popup { transition: height }`
   and break the phone sheet snap): blur eases IN, and on close the class
   drops → base height-only transition → the un-blur is instant, which reads
   as focus snapping back. Height transition is re-declared here so a toned
   sheet still snaps smoothly. */
#boatdetails_popup.bd-toned-down {
    filter: blur(3px) brightness(0.55);
    pointer-events: none;
    user-select: none;
    transition: filter 0.25s ease, height 0.22s cubic-bezier(0.32, 0.72, 0.2, 1);
}

/* Slide-in on open. The popup is shown via jQuery .show() (a display flip,
   which can't be transitioned), so BoatDetails.js adds .popup-slide-in right
   after .show() and removes it on animationend. Desktop = slide from the right
   edge (the panel is right-anchored); mobile bottom-sheet = slide up from the
   bottom. Only `transform`/`opacity` animate, so the drag's inline height/top
   styles are untouched and the popup settles at transform:none. */
.popup.charter_details_popup.popup-slide-in {
    animation: charter-details-slide-in-right 0.28s cubic-bezier(0.32, 0.72, 0.2, 1) both;
}
@keyframes charter-details-slide-in-right {
    from { transform: translateX(100%); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes charter-details-slide-in-up {
    from { transform: translateY(100%); opacity: 0.4; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* TRIP DETAILS POPUP — styles moved to trip_details_popup.php (Tailwind + scoped <style>) */
/* Brighter content surface adopted from the retired Standard theme. */
#trip_details_popup .popup_content { background: #30354f; }

/* Boat-details popup tabs (Live / Trips / Alerts / Stats) — pill style
   matching .ds-top .menu-buttons but taller for the popup header. */
.charter_details_popup .menu-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #b1bcd3;
    /* Brighter inactive pill — user paste, 7 Aug. */
    background: rgb(170 178 220 / 22%);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.8px;
    height: 44px;
    padding: 0 22px;
    margin: 0 6px;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    line-height: 1;
}

.charter_details_popup .menu-buttons:hover {
    background: rgba(34, 211, 238, 0.08);
    color: #22D3EE;
}

.alerts_fleet_popup .menu-buttons,
.settings_popup .menu-buttons {
    display: inline-block;
    color: white;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 300;
    letter-spacing: 0.1px;
    background: #41415a57;
    padding: 0px 35px;
    border-right: 1px solid #212131;
    height: 80px;
    line-height: 80px;
    margin-top: 0;
    border-bottom: 2px solid transparent;
    transition: border 0.4s, opacity 0.3s, color 0.5s;
    cursor: pointer;
}

.perboat-alarms-filter-buttons-container .perboat-alarms-details-buttons {
    background: #222634;
    display: inline-block;
    width: auto;
    font-size: 14px;
    border-bottom: 1px solid #1b1e29;
    border-right: 1px solid #1b1e29;
    border-left: 1px solid #222634;
    padding: 18px 20px;
    color: #9da9c3;
    font-weight: 400;
}

.perboat-alarms-filter-buttons-container .perboat-alarms-details-buttons-selected {
    background: #171a25;
    border-right: 1px solid #0c0e15;
    border-left: 1px solid #0c0e15;
    color: #c1cce4;
}

.perboat-alarms-filter-buttons-container .perboat-alarms-details-buttons:first-child {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.perboat-alarms-filter-buttons-container .perboat-alarms-details-buttons:last-child {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-right: none;
}

.perboat-alarms-details-buttons:hover {
    background: #171a25;
    transition: background 0.3s;
    cursor: pointer;
}

/* (#alerts_list_table_perboat rules removed Jul 2026 — the per-boat Alerts
   table died when the Events tab replaced it; id exists nowhere in PHP/JS.) */

.alerts_fleet_popup .menu-buttons,
.settings_popup .menu-buttons {
    background: none;
    font-weight: 500;
    font-size: 14px;
    color: #afb1d8;
}

.charter_details_popup .boat-details-buttons-selected {
    color: #22D3EE !important;
    background: rgba(34, 211, 238, 0.12) !important;
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.08), inset 0 0 22px rgba(34, 211, 238, 0.03);
}

.alerts_fleet_popup .fleet-alarms-details-buttons-selected {
    border-bottom: 2px solid #68cfcf !important;
    color: white !important;
    opacity: 1 !important;
    background: #25253a;
}

.charter_details_popup img {
    width: 50px;
}

.charter_details_popup .c100 {
    font-size: 70px;
    margin: 0 auto !important;
    background-color: #293c42;
}

.charter_details_popup .c100:after {
    background-color: #12141f;
}

.charter_details_popup .separator {
    border-bottom: 1px solid rgba(188, 186, 202, 0.12);
    margin: 10px 0 10px 0;
}

/* Legacy close-button position. trips_fleet_popup OUT (arc-popup
   shell owns its close). */
.charter_details_popup .popup_close_button,
.alerts_fleet_popup .popup_close_button,
.settings_popup .popup_close_button,
.fleet_stats_popup .popup_close_button {
    position: absolute;
    top: 5px;
    right: 10px;
}

.charter_details_popup .c100>span {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0px;
    top: 0px;
    width: 5em;
    line-height: 70px;
    font-weight: 500;
    font-size: 14px;
}

.charter_details_popup .alarm-state-style-WARNING .c100>span,
.charter_details_popup .alarm-state-style-WARNING .text-alarm-state {
    /* color now set by JS via inline style from battery zone config */
}

.charter_details_popup .alarm-state-style-WARNING .c100.blue .bar,
.charter_details_popup .alarm-state-style-WARNING .c100.blue .fill {
    /* border-color now set by JS via inline style from battery zone config */
}

.charter_details_popup .alarm-state-style-CRITICAL .c100 {
    font-size: 70px;
    margin: 0 auto !important;
    background-color: #44211a;
}

.charter_details_popup .alarm-state-style-CRITICAL .c100.blue .bar,
.charter_details_popup .alarm-state-style-CRITICAL .c100.blue .fill {
    /* border-color now set by JS via inline style from battery zone config */
}

.charter_details_popup .alarm-state-style-CRITICAL .c100>span,
.charter_details_popup .alarm-state-style-CRITICAL .text-alarm-state {
    /* color now set by JS via inline style from battery zone config */
}

.component-box.alarm-state-style-CRITICAL {
    box-shadow: 0 0 10px #da1414;
}

.component-box.alarm-state-style-WARNING {
    box-shadow: 0 0 10px #feb201;
}

.safe-sensor-image {
    background-image: url(../images/icons/shield.svg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.component-box.alarm-state-style-WARNING .safe-sensor-image {
    background-image: url(../images/icons/shield_warning.svg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.component-box.alarm-state-style-CRITICAL .safe-sensor-image {
    background-image: url(../images/icons/shield_critical.svg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.sensor-phone-title {
    display: none;
}

.sensor-image {
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.gps-sensor-image {
    background-image: url(../images/icons/gps.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.speed-sensor-image {
    background-image: url(../images/icons/speed.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* ── Reactive battery-shaped SOC icon (top slot of Battery sensor boxes) ──
   Outer wrapper is a flex column: silhouette icon on top, voltage text
   beneath with a fixed gap (no absolute positioning — breathing room
   stays consistent regardless of voltage text length). --soc drives the
   fill width, --zone-color tints everything; both set inline by
   updateBatteryInfo() in api_updates.js. */
.battery-soc-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0 auto;
    /* Slot-wide so the icon centers visually inside the sensor box. */
    width: 70px;
}
.battery-soc-top .battery-soc-icon {
    position: relative;
    width: 60px;
    height: 30px;
    border: 2px solid var(--zone-color, #9CA3AF);
    border-radius: 5px;
    background: rgba(15, 19, 30, 0.4);
    box-sizing: border-box;
}
.battery-soc-top .battery-soc-icon::after {
    /* battery terminal cap on the right */
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 14px;
    background: var(--zone-color, #9CA3AF);
    border-radius: 0 2px 2px 0;
}
.battery-soc-top .battery-soc-fill {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: calc(var(--soc, 0) * 1%);
    max-width: calc(100% - 4px);
    background: var(--zone-color, #9CA3AF);
    opacity: 0.45;
    border-radius: 2px;
    transition: width 0.4s ease, background 0.3s ease;
}
.battery-soc-top .battery-soc-voltage {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--zone-color, #9CA3AF);
    white-space: nowrap;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   BATTERY BANK (prototype)
   ───────────────────────────────────────────────────────────────────────
   Wide container that sits under the sensor-box row in boat details.
   4 slots: 2 active (Service + Engine) wired live from boatList, 2
   inactive placeholders. Spacey-marine arconmar styling: translucent
   dark surface, cyan accent, subtle inner glow on active slots.
   Icons are VERTICAL battery silhouettes (cap on top, fill grows up) —
   different from the horizontal silhouettes in the existing sensor
   boxes, on purpose: a bank reads as a column of cells.
   ═══════════════════════════════════════════════════════════════════════ */
/* Shared spacey-marine surface — used by every translucent container
   on the boat-details prototype (Battery Bank, Engine panel, Boat
   Systems, Safety). Per-container CSS only sets layout (flex, padding
   overrides) on top of this. Background ratio is intentionally low so
   the page bg shows through behind the glass blur. */
/* Shared surface treatment. NOTE: `backdrop-filter: blur()` was removed
   intentionally — it causes the panels to flash / repaint on scroll
   (the browser pauses backdrop work when the element is off-screen,
   then re-runs it when it scrolls back in). Without blur the surface
   stays stable; the translucent bg + cool glow already carry the depth.
   If we ever want the blur back, gate it behind `@media (prefers-reduced-motion: no-preference) and (min-width: 1200px)` or similar. */
.battery-bank-container,
.engine-panel,
.systems-panel {
    /* Brighter surface adopted from the retired Standard theme (single
       theme now) — BRcol + dark border instead of the old 38% dark wash. */
    background: var(--brcol);
    border: 1px solid #00000045;
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(64, 87, 126, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 18px 22px 22px;
}

.battery-bank-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12);
}
.battery-bank-header-icon {
    width: 14px;
    height: 14px;
    color: rgba(34, 211, 238, 0.65);
}
.battery-bank-header-label {
    color: rgba(34, 211, 238, 0.7);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.battery-bank-header-meta {
    margin-left: auto;
    color: #6c7591;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.battery-bank-slots {
    display: flex;
    gap: 14px;
}
.battery-bank-slot {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 14px 16px;
    border-radius: 10px;
    background: rgba(15, 17, 27, 0.6);
    border: 1px solid rgba(148, 148, 200, 0.12);
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Active slot: glow tinted by the slot's zone color. JS sets
   --zone-color on the slot from BATTERY_CONFIGS — green / yellow /
   orange / red depending on voltage band. color-mix lets the glow
   carry the same hue at low alpha so an alerting battery (orange /
   red voltage) draws the eye via shadow, while safe (green/cyan)
   batteries stay quiet. Border still cool-slate at rest so the card
   doesn't look painted; tinted border + stronger glow on hover. */
.battery-bank-slot.battery-bank-slot-active {
    border-color: rgb(0 0 0 / 7%);   /* user paste, 7 Aug */
    background: rgba(25, 27, 41, 0.75);
    box-shadow:
        0 0 24px color-mix(in srgb, var(--zone-color, #22D3EE) 22%, transparent),
        inset 0 0 30px color-mix(in srgb, var(--zone-color, #22D3EE) 5%, transparent);
    cursor: pointer;
}
.battery-bank-slot.battery-bank-slot-active:hover {
    border-color: color-mix(in srgb, var(--zone-color, #22D3EE) 50%, transparent);
    box-shadow:
        0 0 32px color-mix(in srgb, var(--zone-color, #22D3EE) 36%, transparent),
        inset 0 0 30px color-mix(in srgb, var(--zone-color, #22D3EE) 8%, transparent);
}

/* Live-tab tap chevrons (user call, 15 Aug) — a PHONE-only affordance; the
   base state is hidden everywhere, the ≤640 sensors block reveals them. */
.live-click-chev { display: none; }

/* Inactive / empty slots: faded, no interaction */
.battery-bank-slot.battery-bank-slot-inactive,
.battery-bank-slot.battery-bank-slot-empty {
    opacity: 0.5;
}
.battery-bank-slot.battery-bank-slot-empty {
    border-style: dashed;
}

/* Navigation + Tracker cards dim when the tracker is dark — last-known data
   + coloured fonts preserved, just greyed to signal stale. (The battery bank
   slot instead reuses the full DISCONNECTED treatment — see updateBatteryInfo
   — because a stale voltage reading is meaningless when the device is dark.) */
.systems-group.systems-group-stale {
    opacity: 0.5;
}

/* Disconnected slot — same fade as inactive but with a barely-there red
   tint on the silhouette (--zone-color is set inline by JS). The voltage
   readout reads "—" and the SVC/ENG tag stays muted via the existing
   inactive rules. Reads as "this slot exists, but it isn't measuring
   anything right now." Not an alarm. */
.battery-bank-slot.battery-bank-slot-disconnected {
    border-style: dashed;
    border-color: rgba(248, 113, 113, 0.18);
    cursor: pointer;
}
/* Disconnected slot IS clickable (opens the battery module history), so it
   gets a hover affordance like the active slot — but neutral/slate, not the
   zone-colour glow (it's not a live, alarming reading). Lift it out of the
   inactive 0.5 fade on hover so it reads as interactive. */
.battery-bank-slot.battery-bank-slot-disconnected:hover {
    opacity: 0.8;
    border-color: rgba(148, 148, 200, 0.4);
    background: rgba(25, 27, 41, 0.75);
    box-shadow:
        0 0 24px rgba(64, 87, 126, 0.22),
        inset 0 0 30px rgba(148, 148, 200, 0.05);
}
/* Disconnected slot — two-line text layout mirrors the
   "Slot 3 / Not installed" empty-slot pattern:
     • voltage line  → matches .battery-bank-slot-empty-label  (top, larger)
     • state line    → matches .battery-bank-slot-empty-sub    (bottom, small uppercase)
   That way the disconnected and empty slots line up vertically. */
.battery-bank-slot.battery-bank-slot-disconnected .battery-bank-slot-voltage {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5b6478;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 3px;
    margin-top: 0;
}

/* Disconnected sensor box (Bat service / Bat engine card on Boat Details).
   Same neutral palette — no urgent red border. Battery icon's --zone-color
   carries a faint red set by JS so the silhouette is visually distinct
   from a "battery is genuinely dead" state. */
.sensor-box.sensor-box-disconnected {
    border-color: rgba(148, 148, 200, 0.18);
}
.sensor-box.sensor-box-disconnected .text-alarm-state {
    color: #9CA3AF !important;
}

/* Tag chip — SVC / ENG. Now sits BELOW the voltage (was above the
   silhouette). Grey palette, no cyan — keeps the silhouette + voltage
   as the dominant visual elements. */
.battery-bank-slot-tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #7f87a2;
    padding: 2px 0;
    background: none;
    border: none;
    margin-bottom: 22px;
}
.battery-bank-slot-empty .battery-bank-slot-tag,
.battery-bank-slot-inactive .battery-bank-slot-tag {
    color: #5b6478;
}
/* Empty slot: keep the tag's height in the layout so the silhouette and
   voltage rows align with the wired slots, but visually erase it (no
   pill border, no text). */
.battery-bank-slot-empty .battery-bank-slot-tag {
    visibility: hidden;
}

/* Battery state label — sits under the voltage as a rounded pill tinted
   with the slot's --zone-color (set on the slot by JS from the battery
   zone config). Background uses color-mix so any zone color produces a
   consistent low-alpha pill, no border. */
.battery-bank-slot-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zone-color, #5b6478);
    background: color-mix(in srgb, var(--zone-color, #5b6478) 12%, transparent);
    border-radius: 999px;
    padding: 7px 13px;
    line-height: 1;
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: center;
}
.battery-bank-slot-inactive .battery-bank-slot-state {
    visibility: hidden;
}

/* Disconnected slot: state pill becomes the "Not installed"-style sub
   label (small uppercase). No pill background, no border — it's a
   plain text caption now, paired with the voltage label above.
   NOTE: the slot also carries .battery-bank-slot-inactive, whose rule
   `visibility: hidden`s the state element — re-show it here (this rule is
   more specific) so "DISCONNECTED" actually renders. */
.battery-bank-slot-disconnected .battery-bank-slot-state {
    visibility: visible;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.6rem;
    font-weight: 400;
    color: #5b6478;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Disconnected slot: drop the trailing "V" unit so the voltage cell can
   show the bare voltage / "…" string cleanly. */
.battery-bank-slot-disconnected .battery-bank-slot-voltage-unit {
    display: none;
}

/* Vertical battery silhouette (cap on top, fill grows upward).
   Uses the same --soc / --zone-color CSS vars as .battery-soc-icon so
   updateBatteryBankSlot() in JS can drive both with one assignment. */
.battery-bank-slot-icon {
    position: relative;
    width: 36px;
    height: 72px;
    border: 1.5px solid var(--zone-color, #9CA3AF);
    border-radius: 6px;
    background: rgba(8, 10, 18, 0.5);
    box-sizing: border-box;
    margin-bottom: 4px;
}
.battery-bank-slot-icon::before {
    /* battery terminal cap on top */
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 3px;
    background: var(--zone-color, #9CA3AF);
    border-radius: 2px 2px 0 0;
}
.battery-bank-fill {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: calc(var(--soc, 0) * 1%);
    max-height: calc(100% - 4px);
    background: var(--zone-color, #9CA3AF);
    opacity: 0.5;
    border-radius: 3px;
    transition: height 0.4s ease, background 0.3s ease;
}

/* Voltage readout — full-size capital V (same size + color as the
   number, both tinted by the active zone via --zone-color). Tabular
   numerals so the digit doesn't dance on live updates. Sits CLOSE to
   the silhouette above, FAR from the SERVICE/ENGINE tag below — the
   voltage visually belongs to the silhouette (it's reading the same
   thing); the tag is a separate identity label. */
.battery-bank-slot-voltage {
    margin-top: 6px;
    margin-bottom: 7px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--zone-color, #d6dbe7);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.battery-bank-slot-voltage-unit {
    font-weight: 700;
    color: var(--zone-color, #d6dbe7);
    margin-left: 2px;
    letter-spacing: 0;
}

/* Inactive (sensor wired but no live data yet): dim the voltage block. */
.battery-bank-slot-inactive .battery-bank-slot-voltage,
.battery-bank-slot-inactive .battery-bank-slot-voltage-unit {
    color: #5b6478;
}

/* Empty (sensor NOT installed): remove the voltage + state divs from
   the layout entirely. The empty-label + empty-sub appended by JS
   take their place under the silhouette. Without this rule the
   leftover "—V" voltage row + the faint grey state pill sit under the
   silhouette alongside the empty label, breaking visual parity with
   the pre-defined empty Slot 3 / Slot 4 (which have no voltage/state
   divs in their markup at all). */
.battery-bank-slot-empty .battery-bank-slot-voltage,
.battery-bank-slot-empty .battery-bank-slot-state {
    display: none;
}

/* Empty-slot label + sub */
.battery-bank-slot-empty-label {
    font-size: 0.8rem;
    color: #5b6478;
    font-weight: 600;
    margin-bottom: 3px;
}
.battery-bank-slot-empty-sub {
    font-size: 0.6rem;
    color: #5b6478;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Mobile (≤640px): stack slots into a 2×2 grid */
@media (max-width: 640px) {
    .battery-bank-slots {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .battery-bank-container {
        padding: 14px 14px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ENGINE SENSOR (prototype) — bridges Battery Bank and Boat Systems.
   Single graphical card showing derived engine state. Click opens the
   engine_details_popup with the on/off timeline chart.
   ═══════════════════════════════════════════════════════════════════════ */
/* Flex column so the engine-card child can claim the remaining
   vertical space. Surface treatment comes from the shared rule
   higher in this file. Engine-safety-grid stretches both panels
   to equal height; this lets the card INSIDE stretch too, matching
   the height of the Bilge / Impact tiles in the neighbouring Safety
   panel instead of hugging its own content. */
.engine-panel {
    display: flex;
    flex-direction: column;
}
.engine-panel > .engine-card {
    flex: 1;
}
.engine-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12);
}
.engine-panel-header-icon {
    width: 14px;
    height: 14px;
    color: rgba(34, 211, 238, 0.65);
}
.engine-panel-header-label {
    color: rgba(34, 211, 238, 0.7);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.engine-panel-header-meta {
    margin-left: auto;
    color: #6c7591;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* The cruise card itself — big live value (speed / Parked / In base) on
   the left, SAILS + ENGINE mode tiles on the right. */
.engine-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    min-height: 150px;
    border-radius: 10px;
    background: rgb(35 38 54);
    border: 1px solid rgb(148 148 200 / 12%);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.engine-card:hover {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.08), inset 0 0 22px rgba(34, 211, 238, 0.03);
}
/* Left block: the STATEMENT — tiny "RUNNING ON" / "STATUS" meta-label,
   then icon + big mode word (Sails / Engine / Parked / In base), then a
   muted context line (location / no-sensor note). */
.engine-card-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px 7px;
    min-width: 0;
    /* The popup root carries .f-center — labels/subs must read left. */
    text-align: left;
}
.cruise-mode-label {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6c7591;
}
.cruise-mode-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.cruise-mode-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    transition: color 0.3s ease, background 0.3s ease;
}
.cruise-mode-icon i, .cruise-mode-icon svg { width: 20px; height: 20px; }
/* All four state icons are pre-rendered; the card's state class picks one. */
.cruise-mode-icon i, .cruise-mode-icon svg { display: none; }
.engine-card-sail .cruise-icon-sail,
.engine-card-motor .cruise-icon-motor,
.engine-card-parked .cruise-icon-anchor,
.engine-card-muted .cruise-icon-anchor,
.engine-card-home .cruise-icon-home { display: block; }
.cruise-mode-word {
    font-size: 1.3rem;   /* 1.5 → 1.3 (user paste, 23 Jul) */
    font-weight: 650;
    line-height: 1.1;
    color: #d6dbe7;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
/* Context (location / base) sits INLINE right of the mode word, separated
   by a dot — "Parked · Rogoznica" (user call; was stacked underneath). */
.engine-card-sub-text {
    font-size: 0.78rem;
    color: #6c7591;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.engine-card-sub-text:empty { display: none; }
.engine-card-sub-text::before {
    content: '·';
    margin-right: 7px;
    color: #5b6478;
    font-weight: 600;
}

/* "Not installed" upsell pill (amber, little warning icon) — shown on the
   cruise card via .engine-card-nosensor; hover carries the ns-tip tooltip. */
.ns-pill {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 15px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgb(251 191 36 / 9%);
    color: rgba(251, 191, 36, 0.8);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
}
.ns-pill i, .ns-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.engine-card-nosensor .ns-pill { display: inline-flex; }

/* Tooltip content (Tippy renders at <body> — global, unprefixed classes). */
.ns-tip { padding: 2px 1px; text-align: left; }
.ns-tip-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #d6dbe7;
    margin-bottom: 4px;
}
.ns-tip-body {
    font-size: 0.74rem;
    line-height: 1.5;
    color: #95a1b9;
}
.ns-tip-cta {
    margin-top: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(34, 211, 238, 0.85);
}

/* Every not-installed surface that carries the upsell reads as "hover me". */
.battery-bank-slot-empty[data-ns-tip],
.systems-safety-card-missing[data-ns-tip],
.systems-internet-empty[data-ns-tip] { cursor: pointer; }

/* [↗ OPEN] cursor tip on the Live tab's clickable surfaces (bindOpenTips —
   Tippy renders at <body>, so global unprefixed classes like .ns-tip).
   Tiny badge: cyan glyph + uppercase OPEN (§9.5 language); the dark
   arrowless box chrome is the `open-tip` tippy theme in style.css. */
.open-tip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.open-tip i, .open-tip svg {
    width: 10px;
    height: 10px;
    color: rgba(34, 211, 238, 0.75);
}
.open-tip-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.75);
}

/* Right block: the SPEED — dominant tabular number + muted kn suffix
   (§9.8), tone-matched to the mode; dimmed slate while stopped. */
.cruise-speed {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
}
.cruise-speed-value {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    color: #5b6478;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.cruise-speed-unit {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c7591;
}

/* State tones — SAIL cyan (wind icon), MOTOR amber (spinning cog), PARKED
   purple anchor (boat-list anchored tone), IN BASE slate home, NO-GPS dim.
   Full opacity everywhere but muted — these are live reads. */
.engine-card-sail .cruise-mode-icon { color: #22D3EE; background: rgba(34, 211, 238, 0.1); }
.engine-card-sail .cruise-mode-word { color: #22D3EE; }
.engine-card-sail .cruise-speed-value { color: #22D3EE; }
.engine-card-motor .cruise-mode-icon { color: #fb923c; background: rgba(251, 146, 60, 0.1); }
.engine-card-motor .cruise-mode-word { color: #fb923c; }
.engine-card-motor .cruise-speed-value { color: #fb923c; }
.engine-card-motor .cruise-icon-motor {
    animation: engine-cog-spin 4s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes engine-cog-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.engine-card-parked .cruise-mode-icon { color: #b5a6f7; background: rgba(146, 124, 255, 0.09); }
.engine-card-parked .cruise-mode-word { color: #b5a6f7; }
.engine-card-home .cruise-mode-icon { color: #95a1b9; background: rgba(149, 161, 185, 0.08); }
.engine-card-home .cruise-mode-word { color: #95a1b9; }
.engine-card-muted { opacity: 0.5; }
.engine-card-muted .cruise-mode-icon { color: #5b6478; background: rgba(148, 148, 200, 0.06); }
.engine-card-muted .cruise-mode-word { color: #5b6478; }

/* Mobile: keep the row (statement left, speed right), tighter padding. */
@media (max-width: 640px) {
    .engine-card { padding: 16px 18px; min-height: 120px; }
    .cruise-mode-word { font-size: 1.3rem; }
    .cruise-speed-value { font-size: 2rem; }
    .engine-panel { padding: 14px 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOAT SYSTEMS PANEL (prototype)
   ───────────────────────────────────────────────────────────────────────
   Stat-list redesign of the existing sensor boxes — Navigation, Safety,
   Connectivity — laid out as three sibling cards inside a single
   translucent panel. Each row is "label left, value right" with
   color-coded values + tabular numerals (live data discipline from
   design_principles.md section 9). Sits below the Battery Bank in the
   boat details popup; existing sensor boxes untouched per scope.
   ═══════════════════════════════════════════════════════════════════════ */
/* .systems-panel surface comes from the shared rule near the top of
   this file; only layout-specific rules live here. */

.systems-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12);
}
.systems-header-icon {
    width: 14px;
    height: 14px;
    color: rgb(34 211 238 / 78%);
}
.systems-header-label {
    color: rgb(48 228 255 / 70%);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.systems-header-meta {
    margin-left: auto;
    color: #6c7591;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.systems-grid {
    display: grid;
    /* No base grid-template-columns — every .systems-grid in markup carries
       a -2col / -3col modifier that sets it. */
    gap: 14px;
}
/* New 2-col grid for Navigation + Internet (Safety extracted out). */
.systems-grid.systems-grid-2col {
    grid-template-columns: 1fr 1fr;
}
/* 3-col grid: Navigation | Tracker | Internet. Tracker is narrower
   (compact 2-stat card) so it gets less horizontal space. */
.systems-grid.systems-grid-3col {
    grid-template-columns: 1.1fr 0.7fr 0.9fr;
}

/* Engine-safety row — equal-width 2-col grid so Safety doesn't sprawl.
   Each safety card (Bilge / Impact) sits in a tight 2-col sub-grid
   inside its panel, matching the compact aspect ratio it had when it
   lived inside Boat Systems. Engine + the two safety tiles end up the
   same height because the row's `align-items: stretch` plus the
   engine-card `flex: 1` claim the same vertical space. */
.engine-safety-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: stretch;
}
/* Safety panel sitting beside Engine in the row needs to be a flex
   column too so its inner .systems-safety-grid (with `flex: 1`) can
   stretch the Bilge / Impact tiles to fill the available height. */
.engine-safety-grid > .safety-panel {
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    .engine-safety-grid {
        grid-template-columns: 1fr;
    }
    .systems-grid.systems-grid-2col,
    .systems-grid.systems-grid-3col {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1100px) and (min-width: 769px) {
    /* Tablet: 3-col collapses to 2-col with Internet wrapping below. */
    .systems-grid.systems-grid-3col {
        grid-template-columns: 1fr 1fr;
    }
    .systems-grid.systems-grid-3col > .systems-internet-host {
        grid-column: 1 / -1;
    }
}

.systems-group {
    background: rgba(25, 27, 41, 0.75);
    border: 1px solid rgb(0 0 0 / 7%);   /* user paste, 7 Aug */
    border-radius: 10px;
    padding: 16px 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
    /* Flex column so children (.systems-group-header + .systems-safety-grid
       or .systems-group-rows) can claim the remaining height — needed for
       the safety cards to stretch to the full group height. The systems-grid
       parent already stretches all groups to the tallest one's height
       (grid default align-items: stretch). */
    display: flex;
    flex-direction: column;
}
/* No hover state on .systems-group cards — they aren't clickable
   containers (only specific inner widgets are, like the Internet sensor
   tile, fuel-station row, status chip). A border/shadow lift on hover
   implied interactivity that doesn't exist. */

.systems-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(148, 148, 200, 0.10);
}
.systems-group-icon {
    width: 13px;
    height: 13px;
    color: rgba(34, 211, 238, 0.65);
    flex-shrink: 0;
}
.systems-group-label {
    color: rgb(45 172 197);   /* user paste, 7 Aug */
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* No flex:1 — label sits flush next to its icon, the status dot
       pushes to the right end via margin-left:auto. */
}
/* Navigation-title last-message tag — shows "- 4 weeks ago" to the right
   of the Navigation label when the tracker is disconnected. Same critical
   red as the Tracker card's last-message row. Sits between the label and
   the status dot (the dot keeps margin-left:auto and pushes to the edge). */
.systems-nav-lastmsg {
    margin-left: 8px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #F87171;
    white-space: nowrap;
}
.systems-group-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5b6478;
    margin-left: auto;
    flex-shrink: 0;
    margin-left: auto;
}
.systems-group-status-ok {
    background: #34D399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}
.systems-group-status-warning {
    background: #FB923C;
    box-shadow: 0 0 8px rgba(251, 146, 60, 0.5);
}
.systems-group-status-critical {
    background: #F87171;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}
.systems-group-status-muted {
    background: #5b6478;
}

/* INTERNET — single column inside the standard .systems-group dark
   card: title row on top, selectable wifi sensor card in the middle,
   metadata rows (Status / SSID / pass / package) stacked below. */
.systems-internet-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* LEFT — selectable sensor card with the dynamic wifi icon. Mirrors
   the safety-card surface (bg rgb(35 38 54) + 1px slate border) so
   it visually reads as "click me" alongside Engine / Bilge / Impact. */
.systems-internet-sensor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 18px 12px 14px;
    min-height: 110px;
    width: 150px;
    margin: 10px auto 0 auto;
    border-radius: 10px;
    background: rgb(69 59 148 / 26%);
    border: 1px solid rgb(148 148 200 / 8%);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.systems-internet-sensor:hover {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.08), inset 0 0 22px rgba(34, 211, 238, 0.03);
}
.systems-internet-sensor:hover .systems-group-wifi {
    color: #22D3EE;
}
.systems-internet-sensor-icon-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.systems-internet-sensor-caption {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(141 127 255);   /* the wifi bars' purple (user call, 18 Aug — was slate) */
    margin-top: 8px;
}

/* Tracker icon — passive display block, same vertical footprint as
   .systems-internet-sensor (matching min-height + padding) so both
   cards line up in the 3-col grid. No surface, no border, no hover. */
.systems-tracker-icon-block {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 12px 14px;
    min-height: 150px;
}

/* ── Cruise↔Tracker swap (user experiment) ─────────────────────────────
   Cruise now lives in the TOP systems grid (vertical card), Tracker in the
   bottom row beside Safety (horizontal card). */
/* Vertical cruise card — NO inner chrome (the .systems-group host IS the
   card — user call): transparent, borderless. KNOTS on top (dominant,
   centred), the RUNNING ON statement block at the bottom. State styling
   (tones, ns-pill) still rides the engine-card-* classes. */
.engine-card-vertical {
    flex-direction: column;
    align-items: stretch;
    /* flex-start, NOT space-between — ALL slack lives in ONE place (the
       statement block's margin-top:auto below), so the gaps around the
       Parked/Sailing word and the ns-pill stay fixed (user call, 23 Jul:
       "enormous vertical space between no engine sensor and parked"). */
    justify-content: flex-start;
    flex: 1;
    min-height: 0;
    gap: 14px;
    background: transparent;
    border: none;
    /* Roomier inside (user call). */
    padding: 12px 10px 12px;
}
/* Vertical card: the context line ("at Cres" / base name) stacks UNDER the
   mode word (user call), no dot separator. Icon + mode word LEFT-aligned
   (user call, 27 Jul — was centered per the 23 Jul call) — context line
   left-aligns under them; phones keep the inline left layout below (≤640). */
.engine-card-vertical .cruise-mode-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Full width — as a shrink-to-fit flex item the inner
       justify-content was invisible (the row hugged its content). */
    width: 100%;
}
.engine-card-vertical .engine-card-sub-text {
    display: block;
    width: 100%;
    margin-top: -2px;
    text-align: left;
}
/* THE Parked↔pill gap culprit (user call, 23 Jul): this display:block sits
   LATER in the file than the base `.engine-card-sub-text:empty{display:none}`
   (same specificity), so an EMPTY sub-text — which is every state except
   no-GPS now — still rendered as a full-width wrapped flex line inside the
   mode row, dragging in the row's 11px cross-axis gap. Re-assert the hide. */
.engine-card-vertical .engine-card-sub-text:empty { display: none; }
.engine-card-vertical .engine-card-sub-text::before { content: none; }
/* Pill sits tight under the mode word — the main block's 12px gap alone
   separates them (was +10px on top of it; user call 23 Jul: reduce). */
.engine-card-vertical .ns-pill { margin-top: 0; }
/* Idle speed (parked / in base, <0.1kn): plain dimmed "0 kn" — not "0.0",
   not a dash (user call). Phones hide the whole block instead (below). */
.cruise-speed-idle .cruise-speed-value { opacity: 0.4; }
.cruise-speed-idle .cruise-speed-unit { opacity: 0.4; }
.engine-card-vertical:hover {
    border: none;
    box-shadow: none;
}
.engine-card-vertical .cruise-speed {
    order: -1;              /* knots first */
    align-self: center;
    margin: 14px 0 0;       /* slack sink moved to the statement block below */
}
/* Statement block: never grows, children packed tight (12px gap only),
   centered as a unit. margin-top:auto is THE slack sink —
   knots stay dominant on top, the statement sits at the card bottom, and
   nothing can open up between the mode word and the pill. Flex column
   re-asserted so the pill centers by flex (not by the popup root's
   .f-center text-align). */
.engine-card-vertical .engine-card-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-height: 0;
    gap: 12px;
    margin-top: auto;
}
.engine-card-vertical .cruise-speed-value {
    font-size: 3.4rem;
}
/* Desktop cruise card: unit reads "· knots ·" UNDER the value (user call,
   23 Jul) — lighter weight, centred middle dots either side. Word-swap
   spans (.cruise-unit-kn / -knots) — the ≤640 block flips back to the
   inline "kn". */
.cruise-unit-knots { display: none; }
.engine-card-vertical .cruise-speed {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.engine-card-vertical .cruise-unit-kn { display: none; }
.engine-card-vertical .cruise-unit-knots { display: inline; }
.engine-card-vertical .cruise-speed-unit {
    font-weight: 400;
    margin-bottom: 10px;
}
.engine-card-vertical .cruise-unit-knots::before {
    content: '·';
    margin-right: 7px;
}
.engine-card-vertical .cruise-unit-knots::after {
    content: '·';
    margin-left: 7px;
}
/* Cruise header — its own identity tone (user call): warm orange icon+title,
   like Internet's purple. */
.systems-group[data-systems-group="cruise"] .systems-group-icon,
.systems-group[data-systems-group="cruise"] .systems-group-label {
    color: rgb(45 172 197);   /* user paste, 7 Aug (was warm orange) */
}
/* The whole systems-group card is the click target (user call) — hover glow
   moves from the inner card to the group. */
.systems-group[data-systems-group="cruise"] { cursor: pointer; }
.systems-group[data-systems-group="cruise"]:hover {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.08), inset 0 0 22px rgba(34, 211, 238, 0.03);
}
/* Tracker card — the .systems-group column holds an (phone-only) inner
   header + a HORIZONTAL body: big glyph LEFT, the two stat rows RIGHT.
   Keeps the chrome + data-tracker-state red tint / stale dimming hooks. */
.tracker-card {
    gap: 0;
    padding: 18px 26px;
}
.engine-panel > .tracker-card { flex: 1; }
/* Inner header is the PHONE title (like Navigation/Cruise/Internet cards);
   desktop uses the outer panel header instead. */
.tracker-card .tracker-card-inner-header { display: none; }
.tracker-card-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    flex: 1;
    min-width: 0;
}
.tracker-card .systems-tracker-icon-block {
    min-height: 0;
    padding: 6px 4px;
    flex: 0 0 auto;
}
.tracker-card .systems-tracker-icon,
.tracker-card .systems-tracker-icon svg {
    width: 74px;
    height: 74px;
}
.tracker-card .tracker-card-meta {
    flex: 1;
    min-width: 0;
}
.systems-tracker-icon,
.systems-tracker-icon svg {
    width: 56px;
    height: 56px;
    color: #6c7591;
    stroke-width: 1.4;
}
/* When tracker is offline / power-cut, tint the icon red so the issue
   reads at a glance — same idiom as the Internet card's .is-offline. */
.systems-group[data-systems-group="tracker"][data-tracker-state="critical"] .systems-tracker-icon {
    color: #F87171;
}

/* OFFLINE STATE — when inet status === 'OFFLINE', the .is-offline
   class flips on the sensor card. Border + wifi icon glow red so
   the issue is visible at a glance. */
.systems-internet-sensor.is-offline {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.05);
    box-shadow: 0 0 16px rgba(248, 113, 113, 0.08), inset 0 0 22px rgba(248, 113, 113, 0.03);
}
.systems-internet-sensor.is-offline .systems-group-wifi {
    color: #F87171;
}
.systems-internet-sensor.is-offline:hover {
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.14), inset 0 0 22px rgba(248, 113, 113, 0.05);
}
.systems-internet-sensor.is-offline .systems-internet-sensor-caption {
    color: #F87171;
}

/* RIGHT — metadata rows. Transparent column; rows inherit the global
   .systems-stat-row styling from the navigation group above. */
.systems-internet-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* Big dynamic wifi-strength icon — sits in the sensor card. Class
   .wifi-icon-dynamic + .wifi-level-N updated by inet.js's
   $('.wifi-icon-dynamic') selector in lockstep with any other copy. */
.systems-group-wifi {
    width: 56px;
    height: 56px;
    color: rgb(141 127 255);
    transition: color 0.18s ease;
    stroke-width: 1.4;
}

/* Internet group label + header icon — purple accent (the inet sensor's tone). */
.systems-group-internet .systems-group-label {
    color: #7462ff;
}
.systems-group-internet .systems-group-icon {
    color: #7462ff;
}
/* Internet Status row (replaced the Package row — all packages are
   unlimited). Tones mirror the fleet-inet row dots. */
.systems-inetstatus {
    font-weight: 700;
}
.systems-inetstatus-online { color: #34d399; }
.systems-inetstatus-offline { color: #ff5775; }
.systems-inetstatus-inactive { color: #facc15; }

.systems-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    gap: 12px;
}
.systems-stat-row + .systems-stat-row {
    border-top: 1px solid rgba(148, 148, 200, 0.05);
}
.systems-stat-label {
    color: #adbedf;   /* user paste, 7 Aug */
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* Value side wrapper — holds the icon + the value cell on one flex
   line, right-aligned in the row. The icon sits to the left of the
   value so the eye reads "[icon] 0.0 kn" as a single chunk. */
.systems-stat-value-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    justify-content: flex-end;
}
/* Small icon left of the value. Inherits muted slate from the row's
   default text color — no cyan tint. Matches the value's x-height. */
.systems-stat-value-icon,
.systems-stat-value-icon svg {
    width: 12px;
    height: 12px;
    color: #6c7591;
    stroke-width: 1.6;
    flex-shrink: 0;
}
.systems-stat-value {
    color: #b3bfd9f5;
    font-size: 0.8rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}
/* Position row holds the full DMS coordinate pair on a single line
   (lat, lon). Smaller, lighter, muted slate — sits visually below
   Location which is the primary "where am I" read. */
.systems-stat-value[data-systems-row="position"] {
    font-size: 0.75rem;
    letter-spacing: 0;
    font-weight: 500;
    color: #67718c;
}
/* WiFi password — softer weight than other values (it's reference
   info, not a live stat). Now holds value + a copy button, so lay it out
   as a right-aligned inline row. */
.systems-stat-value[data-systems-row="wifi-pass"] {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    overflow: visible;            /* let the copy button + tooltip show */
}
.systems-stat-value[data-systems-row="wifi-pass"] .systems-wifipass-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Copy button — small icon-only target; mirrors the inet WIFIS copy button.
   position:relative anchors the "Copied" tooltip. */
/* PRO-locked "Fuel station" row (Boat Systems → Navigation, STANDARD) — a cyan
   lock instead of the "X ago" value; the row is clickable → PRO popover. */
.systems-row-fuel-locked { cursor: pointer; }
.systems-fuel-lock {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: rgba(34, 211, 238, 0.7);
}
.systems-fuel-lock i,
.systems-fuel-lock svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
}

.systems-copy-pass {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #95a1b9;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.systems-copy-pass:hover {
    color: #22D3EE;
    background: rgba(34, 211, 238, 0.10);
}
.systems-copy-pass i,
.systems-copy-pass svg {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}
.systems-copy-pass.copied { color: #34d399; }
.systems-copy-pass::after {
    content: 'Copied';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    background: #0f111b;
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #34d399;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 5;
}
.systems-copy-pass.copied::after { opacity: 1; }
.systems-stat-value-ok { color: #34D399; }
.systems-stat-value-warning { color: #FB923C; }
.systems-stat-value-critical { color: #F87171; }
.systems-stat-value-muted { color: #5b6478; }
.systems-stat-value-active { color: #22D3EE; }
/* Critical = data is stale / not real-time. Currently used on the
   "Last fix" row when the tracker is offline. */
.systems-stat-value-critical { color: #F87171; }
/* "On trip" — yellow with a touch of orange. Distinct from the cyan
   used for live Speed and the orange used for Approaching port. */
.systems-stat-value-trip { color: #FBB02C; font-size: 0.72rem; }
/* Docked / at-base — matches the legacy `.f-purple-light` shade used
   for boat-list rows when the boat is in its home port. Used on the
   Navigation Speed row when the boat has 0 kn AND geofence_in. */
.systems-stat-value-docked { color: #a482ff; }
/* Small inline icon appended to a stat value (e.g. anchor next to the
   speed reading when the boat is docked). Inherits currentColor so it
   matches whatever value-color the row currently carries. */
.systems-stat-suffix-icon,
.systems-stat-suffix-icon svg {
    width: 11px;
    height: 11px;
    margin-left: 4px;
    vertical-align: -1px;
    stroke-width: 1.7;
    color: currentColor;
}
/* Prefix variant — same icon style, but pinned to the LEFT of the
   value text (e.g. anchor icon before "0.0 kn" when docked). The
   value span needs to become a flex container so the svg (which
   Lucide replaces the <i> with) sits inline next to the text. */
.systems-stat-value:has(.systems-stat-prefix-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.systems-stat-prefix-icon,
.systems-stat-prefix-icon svg {
    width: 11px;
    height: 11px;
    stroke-width: 1.7;
    color: currentColor;
    flex-shrink: 0;
}

/* Clickable value (e.g. "On trip" → opens trip details popup). The
   value gets a permanent chevron-right pseudo affordance on the right
   side so the user knows it's interactive at rest, not only on hover.
   The chevron uses its own size + line-height (independent of the
   row's font), no transform on hover (transforms were translating
   the chevron past the row's right edge). */
.systems-stat-value-clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 7px 15px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    /* border: 1px solid color-mix(in srgb, currentColor 30%, transparent); */
    line-height: 1;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
/* Clickable-pill arrow — Lucide chevron-right injected as an <i>
   replaced by <svg>. As a flex item inside the pill (which is
   `display: inline-flex; align-items: center`), the SVG auto-centers
   vertically with the text. No ::after pseudo-element games. */
.systems-stat-clickable-arrow,
.systems-stat-clickable-arrow svg {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    stroke-width: 2.2;
    color: currentColor;
    opacity: 0.9;
    flex-shrink: 0;
    transition: opacity 0.15s ease, transform 0.18s ease;
}
.systems-stat-value-clickable:hover .systems-stat-clickable-arrow {
    transform: translateX(2px);
    opacity: 1;
}
.systems-stat-value-clickable:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
    border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.systems-stat-value-clickable:hover::after {
    opacity: 1;
    transform: translateX(2px);
}

/* Sub-line inside a value (e.g. trip stats under "On trip", checked-in
   time-ago, "to <port>" suffix on Nearest port). Smaller, muted slate,
   normal weight so the primary value remains the dominant glyph. */
.systems-stat-substat {
    color: #6c7591;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-left: 4px;
}
.systems-stat-unit {
    color: #6c7591;
    font-size: 0.6rem;
    margin-left: 3px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Internet card "no router" treatment: replaces the stat rows with a
   graphical empty-state block (dashed border, wifi-off icon, label +
   sub) — same idiom as the empty Battery Bank slot. The whole group
   gets a slight opacity dial-down to reinforce "this system isn't
   present", but the dashed icon block does the heavy lifting visually. */
.systems-group[data-systems-group="internet"].systems-group-inactive {
    opacity: 0.7;
}
.systems-group[data-systems-group="internet"].systems-group-inactive:hover {
    border-color: rgba(148, 148, 200, 0.12);
    box-shadow: none;
}

.systems-internet-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    margin-top: 12px;
    border-radius: 8px;
    background: rgba(15, 17, 27, 0.4);
    border: 1px dashed rgba(148, 148, 200, 0.22);
}
.systems-internet-empty-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    color: #5b6478;
    display: flex;
    align-items: center;
    justify-content: center;
}
.systems-internet-empty-icon i,
.systems-internet-empty-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.4;
}
.systems-internet-empty-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #5b6478;
    margin-bottom: 4px;
}
.systems-internet-empty-sub {
    font-size: 0.6rem;
    color: #5b6478;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── SAFETY CARDS (graphical, battery-bank-slot idiom) ───
   Two clickable cards inside the Safety group: BILGE + IMPACT.
   Same visual language as .battery-bank-slot — tag chip on top,
   big icon in the middle, state label at the bottom; cyan accent on
   active+hover, dashed border for "not installed". Designed to read
   identically to the battery bank slots so the popup-opening
   affordance is consistent across the panel. */
.systems-safety-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /* Claim the remaining vertical space inside the safety panel so the
       Bilge / Impact tiles stretch to fill the panel — and in turn the
       engine-card (which carries `flex: 1` on .engine-panel) ends up
       the same height. */
    flex: 1;
}
.systems-safety-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Distribute tag / icon / state vertically across the full card
       height — tag pinned top, state pinned bottom, icon centered. */
    justify-content: space-between;
    padding: 14px 10px 14px;
    min-height: 150px;
    border-radius: 10px;
    background: rgb(35 38 54);
    border: 1px solid rgb(148 148 200 / 12%);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    position: relative;
}
.systems-safety-card:hover {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.08), inset 0 0 22px rgba(34, 211, 238, 0.03);
}

/* Tag chip — same shape as battery bank, accent color reflects state.
   Borderless (user call) — the tinted background alone shapes the pill. */
.systems-safety-card-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    color: rgba(34, 211, 238, 0.7);
    background: rgba(34, 211, 238, 0.08);
}

/* Centered icon — drives most of the state communication */
.systems-safety-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(34, 211, 238, 0.6);
}
.systems-safety-card-icon i,
.systems-safety-card-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
}

/* State label at the bottom */
.systems-safety-card-state {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #d6dbe7;
    text-align: center;
    line-height: 1.2;
}

/* State variants — tint icon + state label + card border to match */
.systems-safety-card.systems-safety-card-ok .systems-safety-card-icon { color: #34D399; }
.systems-safety-card.systems-safety-card-ok .systems-safety-card-state { color: #34D399; }
.systems-safety-card.systems-safety-card-ok .systems-safety-card-tag {
    color: rgba(52, 211, 153, 0.75);
    background: rgba(52, 211, 153, 0.08);
}

.systems-safety-card.systems-safety-card-warning {
    border-color: rgba(251, 146, 60, 0.4);
    box-shadow: 0 0 14px rgba(251, 146, 60, 0.08), inset 0 0 20px rgba(251, 146, 60, 0.03);
}
.systems-safety-card.systems-safety-card-warning .systems-safety-card-icon { color: #FB923C; }
.systems-safety-card.systems-safety-card-warning .systems-safety-card-state { color: #FB923C; }
.systems-safety-card.systems-safety-card-warning .systems-safety-card-tag {
    color: rgba(251, 146, 60, 0.85);
    background: rgba(251, 146, 60, 0.1);
}

.systems-safety-card.systems-safety-card-critical {
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 0 18px rgba(248, 113, 113, 0.12), inset 0 0 22px rgba(248, 113, 113, 0.04);
}
.systems-safety-card.systems-safety-card-critical .systems-safety-card-icon { color: #F87171; }
.systems-safety-card.systems-safety-card-critical .systems-safety-card-state { color: #F87171; }
.systems-safety-card.systems-safety-card-critical .systems-safety-card-tag {
    color: rgba(248, 113, 113, 0.9);
    background: rgba(248, 113, 113, 0.12);
}

/* "Not installed" / unknown — muted + dashed (same idiom as empty
   battery bank slot) and no hover lift */
.systems-safety-card.systems-safety-card-muted {
    opacity: 0.6;
}
.systems-safety-card.systems-safety-card-muted .systems-safety-card-icon { color: #6c7591; }
.systems-safety-card.systems-safety-card-muted .systems-safety-card-state { color: #6c7591; }
.systems-safety-card.systems-safety-card-muted .systems-safety-card-tag {
    color: #6c7591;
    background: rgba(108, 117, 145, 0.08);
}

.systems-safety-card.systems-safety-card-missing {
    border-style: dashed;
    cursor: default;
    opacity: 0.5;
}
.systems-safety-card.systems-safety-card-missing:hover {
    border-color: rgba(148, 148, 200, 0.14);
    box-shadow: none;
}
.systems-safety-card.systems-safety-card-missing .systems-safety-card-icon { color: #5b6478; }
.systems-safety-card.systems-safety-card-missing .systems-safety-card-state { color: #5b6478; }
.systems-safety-card.systems-safety-card-missing .systems-safety-card-tag {
    color: #5b6478;
    background: rgba(91, 100, 120, 0.08);
}

/* Offline variant — tracker is down, so we have no idea what bilge /
   impact are reading right now. Card greys out fully, label reads
   "Offline". Visually similar to "muted" but more dimmed and with a
   pointer-default cursor to communicate "you can't drill into this
   right now." Group's red status dot upstream tells the user why. */
.systems-safety-card.systems-safety-card-offline {
    opacity: 0.45;
    cursor: default;
}
.systems-safety-card.systems-safety-card-offline:hover {
    border-color: rgba(148, 148, 200, 0.14);
    box-shadow: none;
}
.systems-safety-card.systems-safety-card-offline .systems-safety-card-icon { color: #6c7591; }
.systems-safety-card.systems-safety-card-offline .systems-safety-card-state { color: #6c7591; }
.systems-safety-card.systems-safety-card-offline .systems-safety-card-tag {
    color: #6c7591;
    background: rgba(108, 117, 145, 0.08);
}

/* Tablet: 2-up. (The old `.systems-group:last-child { grid-column: 1/-1 }`
   full-width-last-card hack was dropped — Safety was extracted to its own
   row so there's no last card that needs to span.) */
@media (max-width: 1024px) {
    .systems-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile: stack */
@media (max-width: 640px) {
    .systems-grid {
        grid-template-columns: 1fr;
    }
    .systems-panel {
        padding: 14px 14px 16px;
    }
    /* Tighter row padding on mobile — desktop's 9px adds up to a lot
       of vertical space when groups stack into one column. */
    .systems-stat-row {
        padding: 7px 0;
    }
}

/* ── Reactive speedometer (top slot of Speed sensor box) ──
   Clean 270° dial: faded background arc + chunky triangular needle
   that rotates with the live speed. Needle is filled (not stroked)
   for a fatter, more visible analog feel. --speed-deg is set inline
   by updateSpeedGauge() in BoatDetails.js. */
.speed-gauge-wrap {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}
.speed-gauge {
    width: 100%;
    height: 100%;
    display: block;
}
.speed-gauge-needle {
    /* Faded yellow needle — stands out against the dark sensor-box
       background but doesn't scream like a saturated #FFC400 would. */
    fill: rgba(255, 196, 0, 0.75);
}
.speed-gauge-needle-wrap circle {
    fill: rgba(255, 196, 0, 0.85);
}
.speed-gauge-needle-wrap {
    transform: rotate(var(--speed-deg, -135deg));
    /* view-box (not fill-box) — the polygon coords are in SVG viewBox
       units, so we want the pivot to be (50,50) in viewBox space,
       not (50,50) relative to the needle's own bounding box (which
       lives at SVG ~(44,16) and would push the rotation pivot
       completely off the dial). */
    transform-origin: 50px 50px;
    transform-box: view-box;
    transition: transform 0.5s ease;
}

.battery-sensor-image {
    background-image: url(../images/icons/battery.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.smoke-sensor-image {
    background-image: url(../images/icons/smoke.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flood-sensor-image {
    background-image: url(../images/icons/flood.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.crash-sensor-image {
    background-image: url(../images/icons/crash.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.internet-sensor-image {
    background-image: url(../images/icons/router.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Lucide-based sensor icons (Impact, Router). Default cyan, red in
   the critical alarm state — matches the colour swap the old
   background-image SVGs used to do. */
.sensor-icon-lucide {
    color: #22d3ee;
    stroke-width: 1.2;
}
.sensor-icon-lucide * {
    stroke-width: inherit;
}
.component-box.alarm-state-style-CRITICAL .sensor-icon-lucide {
    color: #ef4444;
}

/* Impact sensor — muted slate-blue.
   Sensor icons stay neutral; the alarm itself is signalled by the
   text label colour ("All good" / severity name) and the row tint. */
#crash .sensor-icon-lucide {
    color: #7f95bf;
    opacity: 0.55;
}

/* Dynamic wifi icon — 3 arcs + dot, lit up by signal strength.
   wifi-level-N on the SVG lights the bottom N arcs (where N=1..5).
   Levels 4 and 5 are visually identical (only 4 elements to light). */
.wifi-icon-dynamic .wifi-arc {
    opacity: 0.18;
    transition: opacity 0.3s ease;
}
.wifi-icon-dynamic.wifi-level-1 .wifi-arc-dot,
.wifi-icon-dynamic.wifi-level-2 .wifi-arc-dot,
.wifi-icon-dynamic.wifi-level-3 .wifi-arc-dot,
.wifi-icon-dynamic.wifi-level-4 .wifi-arc-dot,
.wifi-icon-dynamic.wifi-level-5 .wifi-arc-dot { opacity: 1; }

.wifi-icon-dynamic.wifi-level-2 .wifi-arc-inner,
.wifi-icon-dynamic.wifi-level-3 .wifi-arc-inner,
.wifi-icon-dynamic.wifi-level-4 .wifi-arc-inner,
.wifi-icon-dynamic.wifi-level-5 .wifi-arc-inner { opacity: 1; }

.wifi-icon-dynamic.wifi-level-3 .wifi-arc-middle,
.wifi-icon-dynamic.wifi-level-4 .wifi-arc-middle,
.wifi-icon-dynamic.wifi-level-5 .wifi-arc-middle { opacity: 1; }

.wifi-icon-dynamic.wifi-level-4 .wifi-arc-outer,
.wifi-icon-dynamic.wifi-level-5 .wifi-arc-outer { opacity: 1; }

.component-box.internet-reset-button.reset-enabled {
    border: 1px solid #1292a8;
    box-shadow: 0 0 15px rgb(14 198 227 / 50%);
    transition: background 0.5s;
    margin-right: 0;
}

.component-box.internet-reset-button {
    border: 1px solid #343647;
    box-shadow: 0 0 15px rgb(21 21 32);
    transition: background 0.5s;
    background: #252738;
    margin-right: 0;
    max-width: 140px;
}

.component-box.internet-reset-button.reset-enabled:hover {
    background: #1f173b;
    color: white;
    transition: background 0.5s;
    cursor: pointer;
}

.component-box.signal-component-box,
.component-box.consumption-component-box {
    line-height: 50px;
}

.internet-popup-wifi-signal-chart.inline-block {
    float: right;
    margin-top: 5px;
}

.internet-popup-consumption-value.inline-block {
    float: right;
}

.internet-popup-offline-message {
    padding: 12px;
    border: 1px solid #55262f;
    border-radius: 10px;
    color: #e74c3c;
    text-align: center;
    background: #0a0a108a;
    max-width: 320px;
    margin: -25px auto 25px auto;
}

.internet-popup-reboot-message {
    padding: 12px;
    border: 1px solid #55262f;
    border-radius: 10px;
    color: #e74c3c;
    text-align: center;
    background: #0a0a108a;
    max-width: auto;
    margin: -25px auto 25px auto;
}

.internet-reset-button.reset-enabled .internet-consumption-text {
    color: #19b7d3;
}

.internet-reset-button .internet-consumption-text {
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
    color: #3d3f54;
    padding: 5px 10px;
    font-weight: 500;
    height: 100%;
    margin: 0 auto;
    line-height: 40px;
    border-radius: 5px;
}

.internet-consumption {
    font-size: 20px;
    font-weight: 300;
}

span.internet-consumption-main-number {
    margin-right: 3px;
    font-weight: 400;
    color: #00dd80;
}

.internet-consumption-gb {
    font-size: 14px;
}

span.internet-consumption-week-package {
    margin-left: 2px;
}

.component-box.alarm-state-style-CRITICAL .battery-sensor-image {
    background-image: url(../images/icons/battery_critical.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.component-box.alarm-state-style-WARNING .battery-sensor-image {
    background-image: url(../images/icons/battery_warning.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.component-box.alarm-state-style-CRITICAL .flood-sensor-image {
    background-image: url(../images/icons/flood_critical.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.component-box.alarm-state-style-CRITICAL .smoke-sensor-image {
    background-image: url(../images/icons/smoke_critical.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.component-box.alarm-state-style-CRITICAL .crash-sensor-image {
    background-image: url(../images/icons/crash_critical.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.text-alarm-state {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgb(58, 197, 134);
}

.popup_content {
    top: 80px;
}

.refreshPopup.popup .popup_content,
.sharePopup.popup .popup_content {
    top: 0;
}

/* ═══ Settings-popup family (Impact, Internet, Settings, Trips,
       Alerts, RMS) — flex-column layout with a real 80px header. ═══
   The default popup pattern uses `popup_header { height: 0; position:
   absolute }` + content at top:80px, which is fragile (header floats
   over content, content clipped by absolute positioning, no actual
   header height anywhere). For right-half settings_popup variants we
   convert the whole shell to a normal flex column: header takes its
   real height, content flows after it with `flex: 1` to claim the rest.
   Result: no overlap, no absolute-position arithmetic, content can't
   leak under the header.

   EXCLUDED: bottom-half popups that happen to carry the settings_popup
   class (battery-module, engine-module) — they have their own
   positioning (top:50%, height:50%) and their own header treatment in
   the module's local CSS. Forcing the flex-column rule on them would
   stretch the header to 80px inside a 50%-tall popup, eating most of
   the visible content area. Their own module CSS keeps the legacy
   `height: auto` / absolute header pattern, which works fine for
   their compact layouts. */
.popup.settings_popup:not(.battery-module):not(.engine-module) {
    display: flex;
    flex-direction: column;
}
.popup.settings_popup:not(.battery-module):not(.engine-module) > .popup_header {
    position: relative;
    height: 80px;
    flex-shrink: 0;
    z-index: 1; /* stays above content (close button etc) without absolute */
}
.popup.settings_popup:not(.battery-module):not(.engine-module) > .popup_content {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
}
/* Cancel the ht80 spacer's role since the header now has its own
   height. Keep the element so JS / structure isn't disturbed, but
   collapse it so it doesn't add a second 80px on top of the new
   real header height. */
.popup.settings_popup:not(.battery-module):not(.engine-module) .popup_header .ht80 {
    height: 0;
}

.refreshPopup.popup {
    z-index: 50000;
    background: rgb(23, 23, 37);
    color: #8686a9;
    height: 450px;
    width: 400px;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -200px;
    border-radius: 5px;
}

.sharePopup.popup {
    z-index: 40000;
    background: rgb(23, 23, 37);
    color: #8686a9;
    height: 450px;
    width: 400px;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -200px;
    border-radius: 5px;
}

.popup_overlay_refresh {
    position: fixed;
    background: -webkit-radial-gradient(50% top, circle, #13a2b9ad 0, rgb(37 87 179 / 77%) 75%), -webkit-radial-gradient(right top, circle, #00ddffa8 0, rgb(85 36 214 / 54%) 57%) !important;
    background: #576fabc7;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 49999;
}

.classic-button {
    background: #3569ce;
    color: white;
    font-size: 15px;
    padding: 0 20px;
    line-height: 50px;
    margin-bottom: 15px;
    height: 50px;
    border-radius: 5px;
    box-shadow: 0 1px 8px rgb(14, 12, 25, 0.2);
    transition: background 0.1s;
    margin-top: 5px;
    cursor: pointer;
}

.classic-button-border {
    border: 1px solid #1b5a65 !important;
    padding: 0 15px;
    border-radius: 5px;
    letter-spacing: 1px;
    font-size: 15px !important;
    height: 50px !important;
    line-height: 50px !important;
    margin-top: 13px;
    color: #25b8bd !important;
    height: 50px;
    border-radius: 5px;
    box-shadow: none;
    transition: border 0.5s, color 0.5s;
    margin: 0 auto;
    cursor: pointer;

    /* background: #3569ce;
    color: white;
    font-size: 15px;
    padding: 0 20px;
    line-height: 50px;
    margin-bottom: 15px; */
}

.classic-button:hover {
    background: #38abe2;
    transition: background 0.1s;
}

.classic-button-border:hover {
    color: #00f6ff !important;
    border: 1px solid #0cc5ce !important;
    transition: border 0.5s, color 0.5s;
}

.refresh_popup_logo {
    height: 150px;
    width: 140px;
    margin: 0 auto;
    background: url(../images/logo.svg);
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Long-trip notice — small cyan hourglass icon (the arconmar logo was too
   heavy for this informational message). */
.long-trip-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.long-trip-notice-icon i,
.long-trip-notice-icon svg {
    width: 48px;
    height: 48px;
    color: rgba(34, 211, 238, 0.75);
    stroke-width: 1.25;
}

#trips_list_table tr.trip_selected {
    background: #4d557a !important;
    color: #cbd0e3;
}

#trips_list_table.dataTable tr.group-header,
#reports_list_table.dataTable tr.group-header {
    background: #191b2e;
    line-height: 10px !important;
}

#trips_list_table.dataTable tr.group-header td:first-child,
#reports_list_table.dataTable tr.group-header td:first-child {
    color: #4acd65 !important;
    border-top: 35px solid #191b2e !important;
}

#trips_list_table.dataTable tbody tr.group-header:hover,
#reports_list_table.dataTable tbody tr.group-header:hover {
    background: #191b2e !important;
    cursor: auto !important;
    transition: none !important;
}

#trips_list_table .alarm_state_text,
#reports_list_table .alarm_state_text,
#trip_details_popup .alarm_state_text {
    height: 30px;
    line-height: 30px;
    padding-right: 30px;
}

#trips_list_table .alarm_state_icon.alarm_state_icon_critical,
#reports_list_table .alarm_state_icon.alarm_state_icon_critical,
#trip_details_popup .alarm_state_icon.alarm_state_icon_critical {
    float: right;
    width: 20px;
}

#trips_list_table .alarm_state_icon.alarm_state_icon_resolved,
#reports_list_table .alarm_state_icon.alarm_state_icon_resolved,
#trip_details_popup .alarm_state_icon.alarm_state_icon_resolved {
    float: right;
    width: 20px;
    background-image: url(../images/icons/shield.svg);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#trips_list_table .alert_status_critical,
#reports_list_table .alert_status_critical,
#trip_details_popup .alert_status_critical {
    color: #fd3400;
    font-weight: bold;
}

#trips_list_table .alert_status_resolved,
#reports_list_table .alert_status_resolved,
#trip_details_popup .alert_status_resolved {
    color: green;
    padding-right: 5px;
}

#trips_list_table.dataTable tbody tr.trip_selected:hover {
    background: #4d557a !important;
    color: #cbd0e3;
}

#trips_list_table_filter {
    margin: 30px auto 30px auto !important;
}

#trips_list_table.dataTable thead th {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 15px;
}

#trips_list_table.dataTable tbody td {
    font-size: 13px;
}

#trips_list_table.dataTable thead th:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 65px;
    text-align: left !important;
}

#trips_list_table.dataTable tbody td:first-child {
    padding-left: 30px !important;
    color: #54b9ff;
    text-align: left !important;
}

#trips_list_table.dataTable thead th:last-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-right: 30px;
}

#trips_list_table.dataTable tr {
    background: transparent;
}

#trips_list_table.dataTable {
    color: #9ca9c1 !important;
    background: #1f2134;
}

#trips_list_table.dataTable td {
    border-bottom: 1px solid rgb(38, 41, 57) !important;
}

#trips_list_table.dataTable td:nth-child(2),
#trips_list_table.dataTable th:nth-child(2) {
    text-align: left !important;
    padding-left: 0 !important;
}

#trips_list_table.dataTable td:nth-child(3),
#trips_list_table.dataTable th:nth-child(3) {
    text-align: left !important;
}

#trips_list_table.dataTable td:nth-child(4),
#trips_list_table.dataTable th:nth-child(4) {
    text-align: right !important;
}

.ow-acc-class #trips_list_table.dataTable td:nth-child(4),
.ow-acc-class #trips_list_table.dataTable th:nth-child(4) {
    display: none;
}

#trips_list_table.dataTable td:last-child {
    text-align: right !important;
    padding-right: 30px !important;
}

#trips_list_table.dataTable tbody tr {
    transition: background 0.2s;
}

#trips_list_table.dataTable tbody tr:hover {
    background: #27283f !important;
    color: white;
    cursor: pointer;
    transition: background 0.1s;
}

#trips_list_table.dataTable td.trip-distance-style,
#reports_list_table.dataTable td.trip-distance-style {
    color: #00b0ba;
}

#trips_list_table.dataTable td.trip-time-style,
#reports_list_table.dataTable td.trip-time-style {
    color: #159afc;
}

#trips_list_table .reports_status,
#trip_details_popup .reports_status {
    text-align: left;
    float: left;
    padding-right: 0;
    padding-left: 0;
}

#trips_list_table .alarm_type_text,
#trip_details_popup .alarm_type_text {
    display: inline-block;
    vertical-align: top;
}

#trips_list_table .trip-data-cell-event .alarm_type_text,
#trip_details_popup .trip-data-cell-event .alarm_type_text {
    min-width: 60px;
}

#trips_list_table .trip-data-cell-status .alarm_type_text,
#trip_details_popup .trip-data-cell-status .alarm_type_text {
    margin-left: 10px;
}

#trips_list_table .trip-data-row.trip-data-row-trip-events,
#reports_list_table .trip-data-row.trip-data-row-trip-events {
    padding-left: 25px;
}

.trip-data-row.trip-data-row-trip-events .boat-row-click-arrow {
    background-image: url(../images/icons/right_arrow_fat.svg);
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right;
    width: 15px;
    margin-left: 10px;
    height: 28px;
    opacity: 0.4;
}

#trips_list_table .reports_status_icon,
#trip_details_popup .reports_status_icon {
    float: left;
    vertical-align: middle;
    width: 35px;
    height: 28px;
}

#trips_list_table #trips-analysis-overview-log .trip-data-cell-event .alarm_type_text {
    min-width: auto;
}

.trip-data-row-day-container {
    display: table;
    width: 100%;
    vertical-align: middle;
    border-top: 1px solid #1e303f;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.trip-data-row-events-container {
    display: table-cell;
    padding: 20px 0;
}

.trip-data-row.trip-data-row-final-status {
    background: #1c1e2e;
}

.boat-details-tooltip-value {
    color: #6dffe5;
}

.boat-details-tooltip-time {
    color: #becaea;
}

.trip-data-row-events-container .trip-data-row:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.trip-data-row-events-container .trip-data-row:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.trip-data-row:first-child {
    margin-top: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.trip-data-row:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.trip-data-row {
    /* background: #1b1d2c;
    width: 100%;
    border-bottom: 1px solid #252838; */
    padding: 8px 15px;
    /* color: #9da9c3;
    font-weight: 400; */
}

.boat-row-alert-time {
    color: #fb3501;
    font-weight: 500;
}

.trip-data-cell-travel-time {
    color: #2286ff;
    font-weight: 400;
    font-size: 13px;
}

.trip-data-cell.trip-data-cell-status {
    color: #d64012;
    font-size: 12px;
}

.trip-data-cell {
    margin-right: 20px;
    height: 28px;
    line-height: 28px;
}

.trip-data-cell:last-child {
    margin-right: 10px;
}

.trip-data-cell-time {
    color: #48ade0;
}

.trips_destination_station {
    margin-left: 20px;
}

.trip-data-cell-triparrow {
    background-image: url(../images/icons/trip_arrow.svg);
    background-size: 31px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    float: left;
    width: 40px;
    height: 28px;
}

.trip-data-cell-critical {
    background-image: url(../images/icons/critical_icon.svg);
    background-size: 31px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    float: left;
    width: 20px;
    height: 28px;
}

.trip-data-cell-returnedhome-icon {
    float: left;
    width: 35px;
    height: 28px;
    background-image: url(../images/icons/returned.png) !important;
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: 8px 6px;
    vertical-align: middle;
}

#trips_list_table.dataTable tbody td.details-row-class {
    padding: 0 0 50px 0 !important;
    /* background: #32374f; */
    background: #32354f;
    box-shadow: 0 -10px 25px -12px #1a183a inset;
    cursor: auto;
}

#trips_list_table.dataTable tbody tr.details-row-class:hover {
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

.marker-cluster-small-green {
    background-color: rgba(12, 43, 82, 0.6);
}

.marker-cluster-small-green div {
    background-color: rgb(48, 255, 159);
    font-weight: bold !important;
}

.marker-cluster-small-yellow {
    background-color: rgba(12, 43, 82, 0.6);
}

.marker-cluster-small-yellow div {
    background-color: rgb(255, 218, 85);
    font-weight: bold !important;
}

.marker-cluster-small-blue {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.34);
    background-color: rgba(255, 255, 255, 0.6);
}

.marker-cluster-small-blue div {
    background-color: rgb(51, 124, 255);
    font-weight: bold !important;
    color: white;
}

.marker-cluster-small-orange {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.34);
    background-color: rgba(255, 255, 255, 0.6);
}

.marker-cluster-small-orange div {
    background-color: #f5941a;
    font-weight: bold !important;
    color: white;
}

.marker-cluster-small-red {
    background-color: rgba(12, 43, 82, 0.6);
}

.marker-cluster-small-red div {
    background-color: rgb(234, 78, 79);
    color: white;
    font-weight: bold !important;
}

.leaflet-top {
    width: 100%;
}

.leaflet-container {
    font: unset !important;
    font-size: 13px !important;
    /* Leaflet's default container background is #ddd (gray) — the ugly flash
       behind tiles while they load on zoom/pan. Make it sea-blue so any gap
       reads as water. This is the real fix; #charter-map is a backstop. */
    background: #96d9fe !important;
}

.leaflet-right .leaflet-control {
    margin-right: 18px !important;
}

.leaflet-top .leaflet-control {
    margin-top: 15px !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #2a2a43f7 !important;
    color: #b9b9c9 !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22) !important;
}

#charter-map .leaflet-tooltip {
    padding: 2px 7px;
    background-color: #1f1f31;
    border: 1px solid #1f1f31;
    font-size: 10px;
    font-weight: 500;
    ;
    border-radius: 3px;
    color: #d5d5ed;
    opacity: 0.95 !important;
}

#charter-map .leaflet-tooltip-top:before {
    bottom: 0;
    margin-bottom: -12px;
    border-top-color: #1f1f31;
}

#charter-map .leaflet-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: #1f1f31;
}

.boat_marker_popup_coordinates {
    margin-top: 14px;
    margin-bottom: 5px;
    color: white;
}

.boat_marker_popup_speed {
    color: white;
}

.popup-speed-value {
    color: #3ee0ff;
}

.battery-display {
    color: white;
    padding-top: 2px;
}

.popup-battery-value {
    color: #28ffcb;
}

.popup-battery-value.popup-battery-critical {
    color: #ff4646;
    font-weight: 500;
}

/* Map-popup value tints (RULE #8 — no inline hex in the JS popup builder). */
.popup-val-amber { color: #FBBF24; }
.popup-val-red   { color: #F87171; }

.time-display {
    border-bottom: 1px solid #434661;
    margin-bottom: 10px;
    margin-top: 5px;
    padding-bottom: 3px;
    color: #d572ee;
    font-weight: 400;
    /* Icon sits to the LEFT of the title. The Lucide SVG renders as a block by
       default and was stacking above the text; flex + align-items keeps it
       inline-left regardless. */
    display: flex;
    align-items: center;
    gap: 5px;
}
.time-display i,
.time-display svg {
    flex-shrink: 0;
}

.popup-coordinates-position {
    border-bottom: 1px solid #434661;
    margin-bottom: 5px;
    padding-bottom: 3px;
}
/* Alert-popup position — ONE LINE: "Position" label inline before the DMS
   string (was a block heading stacked above it, wasting vertical space). Only
   shown for IMPACT events now (every other type shows a description instead). */
.boat_marker_popup_coordinates-inline {
    margin-top: 8px;
    margin-bottom: 2px;
}
/* Phones: hide the inline "Position <DMS>" line in the map alert popup — not
   useful at-a-glance on mobile and it crowds the compact popup. */
@media (max-width: 640px) {
    .boat_marker_popup_coordinates-inline { display: none; }
}

/* Event timestamp — date + time visually SPLIT so the eye separates them: date
   is the dominant glyph (bright), time is a muted accent after a thin dot. No
   "Arrived:/When:" label. */
.popup-when {
    padding-top: 3px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.popup-when-date { color: #e6e9f2; font-weight: 600; }
.popup-when-sep { color: #5a6478; }
.popup-when-time {
    color: #3ee0ff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Plain-language event description — replaces the DMS Position for non-impact
   events. Desktop only (hidden on phones where the popup is tight, same as the
   old Position line). Sits below a hairline like the header. */
.popup-event-desc {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #434661;
    color: #aeb6cc;
    font-size: 11px;
    line-height: 1.45;
    max-width: 210px;
}
@media (max-width: 640px) {
    .popup-event-desc { display: none; }
}
.popup-coordinates-position-inline {
    margin-right: 6px;
    color: #95a1b9;
}

.popup-coordinates-second-coordinate {
    color: #01ff85;
}

.popup-coordinates-first-coordinate {
    color: #99ff00;
}

.boat_marker_popup_buttons_container .content-button-purple-fill.boat_marker_popup_zoom_button {
    width: 58px;
    display: inline-block;
    font-size: 11px;
    margin-top: 2px;
    margin-right: 6px;
    background: #3db4bb;
}

.boat_marker_popup_buttons_container .content-button-purple-fill.boat_marker_popup_zoom_button.boat_marker_popup_zoom_button_out {
    margin-right: 0;
    background: #6d76e8;
}

.boat_marker_popup_name {
    color: white;
    font-weight: bold;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 5px;
}

.boat_marker_popup_other_content {
    padding-top: 10px;
}

.boat_marker_popup_buttons_container {
    padding-top: 10px;
}

.boat_marker_popup_buttons_container .content-button-purple-fill {
    margin: 0;
}

.boat_marker_popup_buttons_container .content-button-purple-fill {
    margin: 0;
    font-size: 14px;
    width: 122px;
    height: 40px;
    line-height: 30px;
    background: #2b2d43;
    border: 1px solid #35b197;
    color: #4bffda;
    letter-spacing: 0.05rem;
    font-weight: 500;
}

.boat-info-name {
    font-size: 30px;
    font-weight: 300;
    margin-right: 20px;
    padding-right: 15px;
    border-right: 1px solid rgba(58, 104, 255, 0.5);
}

.property-container {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
}

.charter-details-info-container.component-box {
    max-width: initial;
}

.stats-small-icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

.stats-boat-currently-traveling {
    background: black;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
    line-height: 1.5;
    font-size: 14px;
    color: #9294a9;
}

.stats-small-icon-time {
    background-image: url(../images/icons/time.svg) !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.stats-small-icon-avg-distance {
    background-image: url(../images/icons/average.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.stats-small-icon-trips {
    background-image: url(../images/icons/stats_trips.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.alerts-container .alert_status_resolved {
    background: #17172b;
    color: #3ce699;
    width: 120px;
    float: right;
    font-size: 13px;
    font-weight: 500;
    padding: 0 5px 0 3px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(42, 223, 173, 0.62);
}

.alerts-container .alert_status_warning {
    background: #17172b;
    color: #ffb200;
    width: 120px;
    float: right;
    font-size: 13px;
    font-weight: 500;
    padding: 0 10px 0 7px;
    text-align: right;
    border-radius: 5px;
    box-shadow: 0 0 1px rgb(255 186 0 / 87%);
    line-height: 30px;
}

.alerts-container .alert_status_critical {
    background: #17172b;
    color: #ff5344;
    width: 120px;
    float: right;
    font-size: 13px;
    font-weight: 500;
    padding: 0 5px 0 3px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(255, 56, 56);
}

.alerts-container #alerts_list_table td:nth-child(2),
.alerts-container #alerts_list_table th:nth-child(2) {
    text-align: left !important;
    padding-left: 0 !important;
}

.alerts-container #alerts_list_table td:nth-child(3),
.alerts-container #alerts_list_table th:nth-child(3) {
    text-align: left !important;
}

.alerts-container #alerts_list_table td:nth-child(4),
.alerts-container #alerts_list_table th:nth-child(4) {
    text-align: right !important;
}

.alarm_state_icon.alarm_state_icon_critical {
    background-image: url(../images/icons/critical_icon.svg);
    background-size: 31px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_state_icon.alarm_state_icon_warning {
    background-image: url(../images/icons/warning_icon.svg);
    background-size: 30px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_state_icon.alarm_state_icon_resolved {
    background-image: url(../images/icons/green_checkmark.svg);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alerts-container .alarm_state_text {
    float: left;
    height: 30px;
    line-height: 30px;
}

.alarm_state_icon {
    float: left;
    width: 35px;
    height: 30px;
}

.alarm_type_icon {
    float: left;
    width: 35px;
    height: 28px;
}

.alerts-container #alerts_list_table .current_status_row {
    opacity: 1;
}

.alarm_type_icon_fuel_station,
.alarm_type_icon_fuel_station_critical {
    background-image: url(../images/icons/fuel_station.svg);
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_crash_critical {
    background-image: url(../images/icons/crash_critical.svg);
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: 5px 7px !important;
}

.alarm_type_icon_service_battery_critical {
    background-image: url(../images/icons/battery_critical.svg);
    background-size: 17px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_main_battery_critical {
    background-image: url(../images/icons/battery_critical.svg);
    background-size: 17px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_battery_resolved {
    background-image: url(../images/icons/battery.svg);
    background-size: 17px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_battery_warning {
    background-image: url(../images/icons/battery_warning.svg);
    background-size: 17px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_battery_critical {
    background-image: url(../images/icons/battery_critical.svg);
    background-size: 17px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_bilge_resolved {
    background-image: url(../images/icons/flood.svg);
    background-size: 17px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_bilge_warning {
    background-image: url(../images/icons/flood_warning.svg);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_bilge_critical {
    background-image: url(../images/icons/flood_critical.svg);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_smoke_resolved {
    background-image: url(../images/icons/smoke_small.svg);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.alarm_type_icon_smoke_critical {
    background-image: url(../images/icons/smoke_small_critical.svg);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}


.alerts-container #alerts_list_table thead th:last-child {
    padding-right: 30px;
}

#trips_fleet_popup .classic-navbar-trips-count {
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    color: #1995d2;
}

#trips_fleet_popup .classic_navbar_item_left .classic-navbar-trips-count {
    color: #6d6e9c;
}

#trips_fleet_popup .classic_navbar_item_middle .classic-navbar-trips-count {
    color: #9945bb;
}

#trips_fleet_popup .classic_navbar_item_right .classic-navbar-trips-count {
    color: #087dd2;
}

#trips_fleet_popup .dark-theme .dataTables_filter {
    display: block;
}

.charters-right-menu.dark-theme .dataTables_filter {
    display: block;
}

/* used to hide table before datatable */
.main-container table,
#trips_fleet_popup table {
    color: transparent;
}

.main-container .classic-navbar-alerts-count {
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    color: #1995d2;
}

.main-container .fleet-alarms-details-buttons-new-alerts .classic-navbar-alerts-count {
    color: #ff4d6d;
}

.main-container .fleet-alarms-details-buttons-full-log .classic-navbar-alerts-count {
    color: #6d6e9c;
}

.main-container .fleet-alarms-details-buttons-active-alerts .classic-navbar-alerts-count {
    color: #ff9e09;
}

#trips_fleet_popup #trips-analysis-overview-log {
    padding-left: 0;
}

#trips_fleet_popup #trips-analysis-overview-panel {
    text-align: right;
    padding: 20px 0;
}

#trips_fleet_popup .trip-data-row-details {
    background: none !important;
    border-bottom: 1px solid #31324b;
    border-radius: 0;
    margin-bottom: 15px;
    font-size: 17px;
    text-align: left !important;
    padding-right: 0;
    margin-top: 5px;
}

#trips_fleet_popup .trip-data-row-details .alarm_type_text {
    margin-top: 20px;
}

#trips_fleet_popup .trip-data-cell.trip-data-cell-details-button {
    background: #cfd2ff;
    color: #13151f;
    font-size: 15px;
    padding: 5px 20px;
    line-height: 25px;
    margin-bottom: 15px;
    height: 35px;
    border-radius: 5px;
    box-shadow: 0 1px 8px rgb(14, 12, 25, 0.2);
    transition: background 0.1s;
    margin-top: 5px;
}

#trips_fleet_popup .trip-data-cell.trip-data-cell-details-button:hover {
    background: #38abe2;
    transition: background 0.1s;
}

#trips_fleet_popup .trip-data-row {
    background: #131520;
}

#trips_fleet_popup #trips-analysis-overview-container {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

#trips_fleet_popup #reports_list_table .alarm_type_text {
    display: inline-block;
    vertical-align: middle;
}

#trips_fleet_popup #reports_list_table tr.trip_selected {
    background: rgb(21, 23, 38) !important;
    color: #cbd0e3;
}

#trips_fleet_popup #reports_list_table.dataTable tbody td:first-child {
    padding-left: 35px !important;
}

#trips_fleet_popup #reports_list_table td.details-row-class {
    background: #2b2f47;
    padding: 40px !important;
}

#trips_fleet_popup .trips-analysis-menu {
    margin-top: 0;
}

#trips_fleet_popup #reports_list_table.dataTable tbody tr:hover {
    background: #22223c !important;
    color: white;
    cursor: pointer;
    transition: background 0.05s;
}

#trips_fleet_popup #reports_list_table.dataTable tbody tr {
    transition: background 0.1s;
}

#trips_fleet_popup #reports_list_table.dataTable tbody tr.details-row-class:hover {
    background: transparent !important;
    cursor: auto;
}

#trips_fleet_popup .separator {
    border-bottom: 1px solid rgba(188, 186, 202, 0.12);
    margin: 10px 0 10px 0;
}

#trips_fleet_popup #reports_list_table td:nth-child(2),
#trips_fleet_popup #reports_list_table th:nth-child(2) {
    text-align: left !important;
    padding-left: 0 !important;
}

#trips_fleet_popup #reports_list_table td:nth-child(3),
#trips_fleet_popup #reports_list_table th:nth-child(3) {
    text-align: left !important;
}

#trips_fleet_popup #reports_list_table td:nth-child(4),
#trips_fleet_popup #reports_list_table th:nth-child(4) {
    text-align: left !important;
}

#trips_fleet_popup #reports_list_table .date-arrival-col .reports_status_icon {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 28px;
}

#trips_fleet_popup #reports_list_table .reports_status_icon {
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 28px;
}

#trips_fleet_popup #reports_list_table .reports_status {
    text-align: left;
    padding-left: 0;
}

#trips_fleet_popup #reports_list_table .alarm_type_text {
    margin-left: 10px;
    min-width: 60px;
}

/* Fleet trips table - match #trips_list_table styling */
#trips_fleet_popup #reports_list_table.dataTable {
    color: #9ca9c1 !important;
    background: #1f2134;
}

#trips_fleet_popup #reports_list_table.dataTable thead th {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 15px;
}

#trips_fleet_popup #reports_list_table.dataTable tbody td {
    font-size: 13px;
    border-bottom: 1px solid rgb(38, 41, 57) !important;
}

#trips_fleet_popup #reports_list_table.dataTable tr {
    background: transparent;
}

#trips_fleet_popup #reports_list_table.dataTable thead th:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 65px;
    text-align: left !important;
}

#trips_fleet_popup #reports_list_table.dataTable thead th:last-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-right: 30px;
}

.reports_status {
    text-align: right;
    padding-left: 30px;
}

.reports_status_finished {
    color: #3ce699;
}

.reports_status_ongoing {
    color: #37d0ff;
}


#reports_list_table .reports_status_icon.reports_status_icon_finished,
#trips_list_table .reports_status_icon.reports_status_icon_finished,
#trip_details_popup .reports_status_icon.reports_status_icon_finished {
    background-image: url(../images/icons/trip_circle_green.svg);
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: #3ce699;
}

#reports_list_table .reports_status_icon.reports_status_icon_anchored,
#trips_list_table .reports_status_icon.reports_status_icon_anchored,
#trip_details_popup .reports_status_icon.reports_status_icon_anchored {
    background-image: url(../images/icons/anchor_purple.svg);
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: #3ce699;
}

#reports_list_table .reports_status_icon.reports_status_icon_overnight,
#trips_list_table .reports_status_icon.reports_status_icon_overnight,
#trip_details_popup .reports_status_icon.reports_status_icon_overnight {
    background-image: url(../images/icons/overnight.svg);
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: #3ce699;
}

#reports_list_table .reports_status_icon.reports_status_icon_ongoing,
#trips_list_table .reports_status_icon.reports_status_icon_ongoing,
#trip_details_popup .reports_status_icon.reports_status_icon_ongoing {
    background-image: url(../images/icons/wave.png);
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#reports_list_table .reports_status_icon.reports_status_icon_time,
#trips_list_table .reports_status_icon.reports_status_icon_time,
#trip_details_popup .reports_status_icon.reports_status_icon_time {
    background-image: url(../images/icons/time.svg);
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: 5px 4px !important;
}

.leaflet-container a.leaflet-popup-close-button {
    top: 4px !important;
    right: 4px !important;
}

.leaflet-bar a,
.leaflet-bar a:hover {
    background-color: #24293d !important;
    border-bottom: 1px solid #3d483b !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 24px !important;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #ffea49 !important;
}

/* STATS STYLES */

.stats-small-component {
    padding: 12px 20px;
    margin: 10px 0;
    background: #131321;
    border-radius: 5px;
    line-height: 50px;
    font-size: 14px;
}

.stats-boat-text {
    margin-left: 13px;
}

.stats-boat-small-number {
    margin-left: 10px;
    float: right;
}

.f-boat {
    color: #1385ff;
}

.f-yacht {
    color: #29e0ea;
}

.f-sailboat {
    color: #7263fe;
}

.stats_type_yacht {
    height: 30px;
    width: 40px;
    background-image: url(../images/icons/type_superyacht_dark.png) !important;
    background-size: 35px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.stats_type_boat {
    height: 30px;
    width: 40px;
    background-image: url(../images/icons/type_yacht_dark.png) !important;
    background-size: 35px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.stats_type_sailboat {
    height: 30px;
    width: 40px;
    background-image: url(../images/icons/type_sailboat_dark.svg) !important;
    background-size: 35px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.stats_type_time {
    height: 30px;
    width: 40px;
    background-image: url(../images/icons/time.svg) !important;
    background-size: 35px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.stats_type_month {
    height: 30px;
    width: 40px;
    background-image: url(../images/icons/calendar.svg) !important;
    background-size: 35px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}


/* 1920 resolution */
@media only screen and (min-width: 1919px) {

    .popup.charter_details_popup,
    .popup.alerts_fleet_popup,
    .popup.settings_popup,
    .popup.fleet_stats_popup {
        width: 50%;
    }

    .arconmarLoader-container {
        width: 50%;
    }

    .popup-view-mode {
        width: 50%;
    }

    /* Popups are 50% here — match the map's right inset so they meet flush. */
    .charters-container.popup-view-mode {
        right: 50%;
    }

    #trips_fleet_popup .resize-big {
        max-width: 1750px;
    }

}

/* 1920 resolution */
@media only screen and (min-width: 1599px) and (max-width: 1918px) {

    .arconmarLoader-container {
        width: 55%;
    }

    .popup.alerts_fleet_popup,
    .popup.settings_popup {
        width: 55%;
    }

    .popup-view-mode {
        width: 45%;
    }

    #trips_fleet_popup .resize-big {
        max-width: 1600px;
    }

}


@media only screen and (max-width: 1500px) {

    .charter_details_popup .component-box {
        min-width: 105px;
    }

    .charter_details_popup .component-box {
        margin: 7px;
    }

    .text-alarm-state {
        font-size: 15px;
    }

    #trips_fleet_popup .resize-big {
        max-width: 1360px;
    }

}

@media only screen and (max-width: 1380px) {

    .charter-playback-container .col {
        vertical-align: top;
        display: table-cell;
    }

    #reports_list_table.dataTable td {
        font-size: 13px;
    }

    #trips_fleet_popup .resize-big {
        max-width: 1320px;
    }

}


@media only screen and (max-width: 1024px) {

    .dark-mode .charters-right-menu {
        border-top: none;
        /* Desktop's shadow points DOWN (+5px — right-column layout); on the
           phone bottom sheet that lands on the bottom nav instead of the
           map (user call, 29 Jul). Same shadow, mirrored UPWARD. */
        box-shadow: 0 -5px 10px rgb(14 58 103 / 49%);
    }

    .shared-routes-container .popup-view-mode,
    .shared-routes-container .popup.charter_details_popup {
        width: 100%;
    }

    .mobile-only {
        display: block;
    }

    .crash-details-info-right-box {
        width: 100%;
        height: 100%;
        display: block;
    }

    .crash-details-info-left-box {
        width: 100%;
        height: 100%;
        display: block;
    }

    .charter-playback-container .col {
        vertical-align: top;
        display: table-cell;
    }

    /* (removed) td:nth-child(2) width:130px — name column now shrink-wraps
       via .bt-name-inner cap, no fixed width needed on tablet either */

    #reports_list_table .distance-col,
    #reports_list_table .duration-col,
    #reports_list_table .active-col {
        display: none;
    }

    .mobile-no {
        display: none;
    }

    .map-layers-button {
        top: 20px;
    }

    .logout-text {
        display: none;
    }

    .ow-acc-class .logout-text {
        display: block;
    }

    .map-side-button {
        width: 40px;
        height: 40px;
    }

    .map-layers-selector {
        top: 20px;
        right: 70px;
    }

    /* Standalone floating center button GONE on phones — it lives inside
       the layers menu now (.layer-center-map row). */
    .map-center-button {
        display: none !important;
    }

    .dataTables_wrapper .dataTables_filter {
        margin: 0 auto 20px auto !important;
    }

    .menu-buttons {
        font-size: 0.68em;   /* was 0.6em — bumped slightly for legibility */
        padding: 0 15px;
        line-height: 60px;
    }
    /* Undo the desktop base's fixed height:32px (added for the desktop top
       menu) — it leaked in via the same .ds-top selector and pinned the nav
       buttons to the top of the bar. The ≤640 block handles the full stacked
       bottom-nav layout. */
    .ds-top .menu-buttons {
        height: auto;
    }

    /* Events badge on the mobile bottom-nav: switch from the inline desktop
       badge to a corner badge tucked on the icon's top-right INSIDE the tall
       button (icon stacked over label) so it doesn't float up into the map
       above the nav bar. Centred over the button, nudged right of the icon. */
    .charter-trips-module .menu-buttons .events-today-count {
        position: absolute;
        top: 8px;
        right: 50%;
        bottom: auto;
        left: auto;
        margin: 0 -22px 0 0;          /* push to the right edge of the icon */
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
    }

    .portal-intro-menus-container {
        margin-left: 10px;
    }

    .portal-intro-menus-dividers {
        display: inline-block;
        width: 25px;
        opacity: 0;
    }

    .charters-container.map-view-mode {
        bottom: 68px !important;   /* nav height */
        height: auto !important;
    }

    .charters-right-menu.map-view-mode {
        height: 0;
        border-top: 0;
        width: 0;
    }

    #boatdetails_popup.map-view-mode,
    #crash_sensor_popup.map-view-mode,
    #trip_details_shared.map-view-mode {
        width: 0 !important;
    }

    span.alerts-module-alerts-count {
        font-size: 11px;
        padding: 0 4px 0 4px;
        height: 18px;
        line-height: 18px;
        margin-left: 4px;
    }

    .ds-home-logo-container {
        height: 60px;
        background: url(../images/logo.svg);
        background-size: 75%;
        background-position: center;
        background-repeat: no-repeat;
        ;
    }

    .charters-container {
        margin-top: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(45vh + 68px);
        top: 0;
    }

    .ow-acc-class .charters-container {
        margin-top: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 68px;
        top: 0;
    }


    .charters-right-menu {
        position: fixed;
        right: 0;
        width: 100%;
        bottom: 68px;
        /* MUST equal the JS bottom-sheet default (45vh above the 68px nav,
           BoatTable.js defaultHeight 0.45) — a different value here made the
           list visibly JUMP once enablePopupDrag applied its inline height
           after data load. */
        top: calc(55% - 68px);
        background: #fbfbfd;
        z-index: 500;
        box-shadow: 0 0 10px rgba(14, 58, 103, 0.24);
    }

    .dark-mode .charters-right-menu {
        width: 100% !important;
    }

    .ow-acc-class.dark-mode .charters-right-menu {
        width: auto !important;
    }

    .ow-acc-class .charters-right-menu {
        position: fixed;
        padding: 5px;
        border-radius: 5px;
        right: 5%;
        left: 5%;
        width: 90%;
        bottom: 80px;
        top: auto;
        z-index: 500;
        box-shadow: 0 0 10px rgb(14 58 103 / 24%);
    }

    #stats_info_container .component-box-dark {
        padding: 0 !important;
    }

    .stats-small-component {
        line-height: 40px;
        font-size: 12px;
    }

    .leaflet-control-attribution.leaflet-control {
        display: none;
    }

    #alerts_fleet_popup .alert_status_cell {
        display: none;
    }

    .popup.alerts_fleet_popup {
        position: fixed;
        background: rgb(28 28 42);
        z-index: 5000;
        margin: 0;
        width: auto;
        left: 0;
        /* width: 80%; */
        box-shadow: 0 0 30px rgba(23, 47, 113, 0.66);
    }

    .charter-details-info-container.component-box {
        padding: 15px !important;
    }

    .property-container {
        font-size: 11px;
    }

    .boat-info-name {
        font-size: 15px;
    }

    .alerts_fleet_popup .menu-buttons {
        font-size: 12px;
    }

    .alerts_fleet_popup .portal-intro-menus-wrapper {
        text-align: left;
    }

    .main-container .classic-navbar-alerts-count {
        font-size: 10px;
        margin-left: 6px;
    }

    .charter_details_popup .menu-buttons {
        padding: 0 14px;
        font-size: 0.65rem;
        margin: 0 3px;
    }

    .alerts_fleet_popup .menu-buttons {
        padding: 0 18px;
    }

    #boat_list_table td {
        padding: 16px !important;
    }

    .charter-events-module {
        background: rgb(43 43 69);
        position: absolute;
        font-size: 10px;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55px;
        z-index: 50000;
        border-radius: 0;
        overflow: hidden;
        transition: transform 0.3s;
    }

    .charter-events-module.charter-events-module-min:hover {
        transform: none;
    }

    .charter-events-news-gradient {
        position: absolute;
        bottom: 0;
        height: 35px;
        /* display: none; */
        width: 100%;
        background: linear-gradient(rgba(37, 41, 60, 0) 0%, rgba(30, 30, 48, 0.94) 77%);
        background: -webkit-linear-gradient(rgba(37, 41, 60, 0) 0%, rgba(43, 43, 69, 1) 90%);
    }

    .charter-events-news {
        height: 100%;
        color: #8e97ab;
        line-height: 1.7;
        width: auto;
        padding: 12px 2px 0 15px;
        transition: width 0.3s;
    }

    .charter-events-module.charter-events-module-maxed {
        height: auto;
        width: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 0;
        background: #2c2c3f;
        z-index: 200000000;
    }

    .charter-events-mobile-max-button {
        font-size: 10px;
        text-align: center;
        width: 55px;
        padding: 5px;
        border-right: 0;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        border-left: 1px solid #383855;
        background: #1e1e2f;
    }

    .charter-events-module.charter-events-module-details-open {
        display: none !important;
    }

    .charter-events-module-maxed .charter-events-mobile-max-button {
        display: none;
    }

    .news-container .news-component.news-component-time {
        min-width: 88px;
    }

    .ds-top {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 68px;   /* +8px (user call) — keep in sync with every 68px nav inset below + BoatTable.js NAV_HEIGHT */
    }

    .ds-user-login-container.logout-button-style {
        margin-top: 18px;
    }

    .charter-events-alarms {
        font-size: 10px;
        text-align: center;
        width: 60px;
        padding: 5px;
        border-right: 0;
        display: none;
    }

    .charter-events-alarms-alerts-icons {
        height: 35px;
        width: 100%;
        background-image: url(../images/icons/warning_big.svg) !important;
        background-size: 22px 22px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .charter-alerts-module.alerts-module-has-alerts .charter-events-alarms-alerts-icons {
        height: 35px;
        width: 100%;
        background-image: url(../images/icons/shield_critical.svg) !important;
        background-size: 25px 25px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .classic_navbar {
        width: 420px;
    }

    #trips_list_table .trip-data-cell-status,
    #trip_details_popup .trip-data-cell-status {
        display: none;
    }

    .padding50 {
        padding: 20px;
    }

    .charter_details_popup .component-box {
        margin: 10px 4px;
    }

    .charter_details_popup .component-box {
        min-width: 98px;
    }

    .charter_details_popup .component-box {
        font-size: 12px;
    }

    .map-side-button:hover {
        transform: none;
        transition: none;
        cursor: pointer;
    }

    .col {
        display: block;
    }

    .span_1_of_12,
    .span_2_of_12,
    .span_3_of_12,
    .span_4_of_12,
    .span_5_of_12,
    .span_6_of_12,
    .span_7_of_12,
    .span_8_of_12,
    .span_9_of_12,
    .span_10_of_12,
    .span_11_of_12,
    .span_12_of_12 {
        width: 100% !important;
    }

    .popup_content {
        top: 60px;
    }

    .alerts_fleet_popup .popup_content {
        top: 80px;
    }

    /* Fleet Stats uses the legacy header pattern (.fleet_stats_popup_menu band
       + content sized off it), NOT the shared arc-popup shell. The global rule
       above drops .popup_content to top:60px on ≤1024, but the standardized
       popups (Events / Internet via arc-popup) keep an 80px header on mobile —
       so Fleet Stats was rendering a SHORTER header than its siblings.
       Keep Fleet Stats at the SAME 80px header so it matches: override the
       global top:60px back to 80px and keep the 80px band/height. */
    #fleet_stats_popup .fleet_stats_popup_menu,
    #fleet_stats_popup .fleet-stats-popup-header-inner {
        height: 80px;
    }
    #fleet_stats_popup .popup_content.fleet-stats-popup-content {
        top: 80px;
        height: calc(100% - 80px);
    }

    .alerts_fleet_popup .dark-theme .dataTables_filter {
        margin: 0 20px;
        padding-top: 0px;
        width: 250px !important;
    }

    .dark-theme input[type="search"] {
        background: none;
        border-bottom: 1px solid #4780a8 !important;
    }

    .dark-theme .paginate_button {
        margin: 4px !important;
    }

    .leaflet-control-zoom {
        display: none !important;
    }

    .popup.charter_details_popup,
    .popup.alerts_fleet_popup,
    .popup.settings_popup {
        top: 45%;
        width: 100%;
    }

    .arconmarLoader-container {
        top: 45%;
        width: 100%;
    }

    #alerts_fleet_popup .popup_content {
        padding: 20px;
    }

    .popup-view-mode {
        width: 100%;
        height: 45%;
    }

    .charter_details_popup .menu-buttons {
        padding: 0 14px;
        height: 38px;
        font-size: 0.6rem;
        margin: 0 2px;
    }

    .charter_details_popup .boat_Details_popup_menu {
        height: 60px;
    }

    .charter_details_popup .popup_close_button,
    .alerts_fleet_popup .popup_close_button {
        top: -6px;
        right: 0px;
    }
}

@media only screen and (max-width: 640px) {

    /* Per-boat alerts table (boat-details popup): hide the first column — the
       seen/unseen indicator (eye icon / unseen dot) — on phones to reclaim
       width for the alert content. */

    /* Boat-list rows: tighter horizontal padding on phones (taller rows, less
       side inset) — overrides the ≤1024 `td { padding: 16px }` for the medium
       phone tier. User paste, 7 Aug (right 12→9). */
    #boat_list_table td {
        padding: 16px 9px 16px 12px !important;
    }

    /* Boat-list phone tune (user pastes, 7 Aug) — type icon nudged up 1px,
       name column keeps padding-right 30px with a 120px floor (desktop
       base stays 100px). Same-specificity twins later in source win. */
    .dark-theme td .type_sailboat {
        height: 28px;
        width: 28px;
        background-image: url(../images/icons/type_sailboat.svg) !important;
        background-size: 28px 28px !important;
        background-repeat: no-repeat !important;
        background-position: center -1px !important;
    }

    #boat_list_table td:nth-child(2) {
        text-align: left !important;
        padding-left: 0px !important;
        padding-right: 30px !important;
        font-weight: 500;
        color: #4c5877 !important;
        width: 1%;
        min-width: 120px;
    }

    /* Battery bank state pill — roomier on phones (user paste, 7 Aug).
       The ≤380 tier below still strips the pill entirely on tiny phones. */
    .battery-bank-slot-state {
        padding: 7px 9px;
    }

    /* Boat names on phones — 0.86 → 0.8rem (user paste, 23 Jul). */
    #boat_list_table td.boat_name {
        font-size: 0.8rem !important;
    }
    /* Whole list a touch smaller on phones (user call: "just slightly"). */
    #boat_list_table.dataTable td {
        font-size: 11.5px;
    }

    /* Boat-details slide-in on phones is a bottom-sheet slide-UP (the popup is
       anchored to the viewport bottom here), not the desktop slide-from-right. */
    .popup.charter_details_popup.popup-slide-in {
        animation: charter-details-slide-in-up 0.28s cubic-bezier(0.32, 0.72, 0.2, 1) both;
    }

    /* ──────────────────────────────────────────────────────────────
       Phone bottom navbar — icon-on-top + small label, 4 buttons
       evenly spaced across the bottom strip. Hide the logo, the old
       hamburger button container and the desktop logout pill. Logout
       is reachable from within boat-details / settings popups; the
       bottom bar stays clean and phone-native.
       ────────────────────────────────────────────────────────────── */
    .ds-top {
        height: 68px;   /* +8px — sync with the nav-inset rules + BoatTable.js NAV_HEIGHT */
        padding: 0;
        border-top: 1px solid rgba(148, 148, 200, 0.12);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
    }

    .ds-top .ds-x-button-container,
    .ds-top .ds-home-logo-container,
    .ds-top .ds-menu-button-container {
        display: none;
    }

    .ds-top .portal-intro-menus-container {
        margin: 0;
        height: 100%;
        width: 100%;
    }

    .ds-top .portal-intro-menus-wrapper {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: 100%;
        width: 100%;
    }

    .ds-top .portal-intro-menus-wrapper > a {
        flex: 1 1 0;
        display: flex;
        align-items: stretch;
        justify-content: center;
        text-decoration: none;
    }

    .ds-top .menu-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        /* height:auto undoes the desktop base's fixed height:32px (it leaked in
           via the same selector and top-pinned the buttons in the 60px bar). */
        height: auto;
        margin: 0;
        padding: 6px 4px 5px;
        font-size: 0.52rem;   /* 0.58 − ~1px (user call: "little little") */
        line-height: 1;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        /* 700, not 600 — at ~8px uppercase the system font's semibold reads
           optically REGULAR on phones (the "not bolded" report, 23 Jul);
           real bold survives the tiny size. */
        font-weight: 700;
        background: transparent;
        border-radius: 0;
        color: #c0c8da;       /* was #95a1b9 — brighter label + icons */
    }

    .ds-top .menu-buttons .menu-button-icon,
    .ds-top .menu-buttons svg {
        width: 17px;
        height: 17px;
        margin-bottom: 5px;
        stroke-width: 1.5;
    }

    /* :active ONLY (no :hover — it sticks after a tap on touch and kept
       the Account tab cyan after its popover closed; user call). Press
       feedback releases with the finger. */
    .ds-top .menu-buttons:active {
        background: transparent;
        color: #22D3EE;
    }

    .ds-top .menu-buttons:active .menu-button-icon,
    .ds-top .menu-buttons:active svg {
        color: #22D3EE;
    }

    /* Alerts count badge — pinned to the bell icon's top-right corner,
       same conventions as iOS / Android bottom-tab badges. Auto-grows
       horizontally for 2/3-digit counts but stays pill-shaped. Red
       surface, white text, 1px ring-of-bg to lift it off the bell. */
    .ds-top .charter-alerts-module .menu-buttons {
        position: relative;
    }

    .ds-top span.alerts-module-alerts-count {
        position: absolute;
        top: 11px;
        left: 48%;
        transform: translateX(2px);
        margin: 0;
        padding: 1px 5px;
        height: 15px;
        line-height: 13px;
        min-width: 15px;
        border-radius: 999px;
        background: #ff5d5df7;
        color: #ffecec;
        font-size: 8px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        text-align: center;
        box-shadow: 0 0 0 1.5px #28273b;
        z-index: 2;
        pointer-events: none;
    }
    /* 3+ digits → keep nowrap so 391/999 still fits. */
    .ds-top span.alerts-module-alerts-count:not(:empty) {
        white-space: nowrap;
    }

    /* Hide the events module entirely on phones — covered by item 3
       below but kept here so the bottom bar visual is predictable. */
    .charter-events-module {
        display: none !important;
    }

    /* ──────────────────────────────────────────────────────────────
       Phone boat list bottom-sheet
       Drag handle is injected at top by enablePopupDrag; the panel's
       height/bottom is driven by inline styles from the module. Here
       we (a) yield the static top:61% rule, (b) unhide and pin the
       search input under the drag handle (sticky above the table
       scroller so it stays visible), (c) make the table area scroll
       independently, (d) drive .charters-container height from the
       --popup-bottom-h CSS var so the map resizes in lockstep.
       ────────────────────────────────────────────────────────────── */
    body.boat-list-bottomsheet-on .charters-right-menu {
        top: auto;
        /* bottom + height are set inline by enablePopupDrag */
        display: flex;
        flex-direction: column;
        background: #28273b;
    }
    /* A popup (boat details, etc.) is open → hide the boat-list bottom sheet
       AND release the map's bottom inset so the popup owns the screen, same
       as desktop. Toggled by hideBoatListPanel()/showBoatListPanel(). */
    body.boat-list-bottomsheet-on.boat-list-hidden-by-popup .charters-right-menu {
        display: none !important;
    }
    body.boat-list-bottomsheet-on.boat-list-hidden-by-popup .charters-container {
        bottom: 0 !important;
    }

    /* Map container — let the var drive the bottom inset so the map
       grows/shrinks live with the boat-list drag. Var is updated by
       popupDrag.js (it's the popup height + bottomOffset). */
    body.boat-list-bottomsheet-on .charters-container {
        bottom: var(--popup-bottom-h, calc(45vh + 68px)) !important;
        transition: bottom 0.22s cubic-bezier(0.32, 0.72, 0.2, 1);
    }
    /* Kill the transition during an active drag so the map tracks
       the pointer 1:1, same as the trip-popup pattern. */
    body.boat-list-bottomsheet-on.popup-drag-active .charters-container,
    body.boat-list-bottomsheet-on.popup-drag-active .charters-right-menu {
        transition: none !important;
    }

    /* ──────────────────────────────────────────────────────────────
       DRAG-POPUP map resize on phones (trip details + boat details)
       ──────────────────────────────────────────────────────────────
       On phones the map container's bottom inset was pinned by a flat
       mobile rule no matter the popup height, so dragging the popup up/
       down never resized the map (the desktop var rule at the top of
       this file was overridden):
         • body.boat-list-collapsed .charters-container { bottom: 56px } (≈7127)
         • body...boat-list-hidden-by-popup .charters-container { bottom: 0 } (≈6965)
       Both win over the unscoped `.charters-container.trip-popup-active`
       rule. So when a DRAG popup is open (enablePopupDrag adds
       body.popup-bottomsheet-open) and the container carries
       trip-popup-active (both trip-details AND boat-details add it),
       drive the bottom inset from --popup-bottom-h here. Specificity
       (0,3,2) beats both stomping rules; same var + transition as
       desktop, so the map shrinks/grows in lockstep with the drag. */
    body.popup-bottomsheet-open .charters-container.trip-popup-active {
        bottom: var(--popup-bottom-h, 60vh) !important;
        transition: bottom 0.22s cubic-bezier(0.32, 0.72, 0.2, 1);
    }
    body.popup-bottomsheet-open.popup-drag-active .charters-container.trip-popup-active {
        transition: none !important;     /* 1:1 pointer tracking mid-drag */
    }

    /* Drag handle visually sits flush on top. The base popupDrag.css
       paints a translucent rgba(15,17,27,.6) bg over the panel's
       solid bg + a 1px border-bottom — composited with the next
       (also translucent) row this leaves a faint 1px alpha-seam that
       reads as "boat rows showing through" while scrolling. Force the
       handle's bg to match the panel solid and drop the border so
       there's nothing to compose against. */
    body.boat-list-bottomsheet-on .charters-right-menu > .popup-drag-handle {
        flex-shrink: 0;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        background: #28273b !important;
        border-bottom: 0 !important;
    }

    /* Search input sits BEFORE the scrollable content area, so it's
       always visible — moved out of the DataTables wrapper visually
       by being inside .charter-right-menu-content but the wrapper
       itself overflows. We make .charter-right-menu-content a flex
       column and pin #boat_list_table_filter as a non-scrolling row
       on top via order + flex-shrink + sticky. */
    body.boat-list-bottomsheet-on .charters-right-menu .charter-right-menu-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* ──────────────────────────────────────────────────────────────
       FEW BOATS (< 3) — owner / small-fleet layout
       ──────────────────────────────────────────────────────────────
       Replaces the old role-based `ow-acc-class`. When the fleet is 1–2
       boats there's no reason for a drag-to-resize sheet: the MAP spans
       full height (bottom inset pinned to just the nav bar via
       --popup-bottom-h, set in BoatTable.js) and the boat list floats ON
       TOP as a small padded container above the nav, with NO drag handle
       and no resize. JS skips enablePopupDrag entirely for this case. */
    /* width:90% with the !important to beat the general
       `.dark-mode .charters-right-menu { width:100% !important }` rule (which
       otherwise stretches the floating panel edge-to-edge). That general rule
       stays for the normal bottom-sheet; here we override only the few-boats
       floating case. */
    body.boat-list-few.boat-list-bottomsheet-on .charters-right-menu,
    body.boat-list-few.boat-list-bottomsheet-on.dark-mode .charters-right-menu {
        position: fixed;
        left: 3%;
        right: 3%;
        width: 94% !important;
        bottom: 88px;                 /* clear the 68px nav + gap */
        top: auto;
        height: auto;                 /* fit the 1–2 rows, no fixed sheet height */
        max-height: 45vh;             /* safety cap, scrolls if ever needed */
        padding: 6px;
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(8, 12, 24, 0.45);
        background: #28273b;
    }
    /* No drag handle in the few-boats floating layout. */
    body.boat-list-few.boat-list-bottomsheet-on .charters-right-menu > .popup-drag-handle {
        display: none !important;
    }
    /* The floating panel sits OVER the map — don't reserve bottom space, so
       the map fills full height behind it. (--popup-bottom-h is pinned to the
       nav height in JS; this guards against the var rule shrinking the map.)
       BUT yield when a popup is open: boat-details / trip-details add
       `popup-bottomsheet-open` (body) + `trip-popup-active`/`map-view-mode`
       (container) and need to resize the map to their own height. Without this
       :not() guard the full-height pin won over the popup's resize rule, so the
       map stayed full-screen behind the boat-details popup. */
    body.boat-list-few.boat-list-bottomsheet-on:not(.popup-bottomsheet-open):not(.boat-list-hidden-by-popup) .charters-container {
        bottom: 68px !important;      /* nav height only → map full height */
    }
    /* No floating "Boat list" open-tab either (nothing to collapse to). */
    body.boat-list-few .boat-list-open-tab {
        display: none !important;
    }

    /* The DataTables wrapper is what actually contains the search +
       the table. Make IT the flex column too, and pin the filter
       above the scrolling table wrapper. */
    body.boat-list-bottomsheet-on #boat_list_table_wrapper {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    body.boat-list-bottomsheet-on #boat_list_table_wrapper > .dataTables_scroll,
    body.boat-list-bottomsheet-on #boat_list_table_wrapper > .dataTables_scrollBody {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* When DataTables isn't using the scroller plugin, the table sits
       at the wrapper root — wrap it in a flex child by making any
       direct table a flex child too. Last-resort: the wrapper itself
       scrolls but the filter is order: -1; flex-shrink: 0 so it
       stays at the top. */
    body.boat-list-bottomsheet-on #boat_list_table_wrapper {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Mobile boat-list search ─────────────────────────────────────
       Arconmar pill. Two legacy global rules in style.css fight us:
         1. `.dataTables_wrapper .dataTables_filter { width: 300px
            !important; }` — capped the search to 300px regardless of
            viewport, which is why the pill looked like an island
            with the row content scrolling past it on either side.
         2. `.dark-theme input[type="search"] { border: none !important;
            border-bottom: 4px solid #559fb1 !important;
            border-radius: 1px !important; }` — that's the cyan
            underline you saw, killing every border, radius, and
            background I tried to set.
       The selectors below pile body + id + tag + !important on each
       property the legacy rules use !important on, so we win the
       cascade outright. */
    body.boat-list-bottomsheet-on .dataTables_wrapper #boat_list_table_filter {
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        order: -1 !important;
        flex-shrink: 0 !important;
        width: auto !important;          /* beat 300px from style.css */
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        /* Solid bg to match the panel — translucent here composes
           against the row scroller's bg as rows pass behind, leaving
           a visible alpha-haze. Solid color = no see-through. */
        background: #28273b !important;
        border-bottom: 1px solid rgba(148, 148, 200, 0.08) !important;
        text-align: left !important;
        float: none !important;
        /* Secondary drag zone (popupDrag extraHandleSelector): the browser must
           NOT claim vertical gestures here as scrolling, or pointermove never
           reaches the movement-gated drag handler and the sheet can't be
           resized from the search strip. Same requirement as the drag handle.
           A plain tap still focuses the input (focus happens on tap, not on a
           scroll gesture). */
        touch-action: none;
    }
    body.boat-list-bottomsheet-on #boat_list_table_filter label {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 0 !important;            /* hide "Search:" label text */
    }
    body.boat-list-bottomsheet-on #boat_list_table_filter input[type="search"] {
        display: block !important;
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto !important;
        padding: 13px 20px !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        color: #d9deec !important;
        background: rgb(124 135 202 / 10%) !important;
        border: 1px solid rgb(144 182 255 / 26%) !important;
        border-radius: 17px !important;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0%), 0 0 10px rgb(161 181 255 / 3%) !important;
        text-align: left !important;
        letter-spacing: 0.01em !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
    }
    body.boat-list-bottomsheet-on #boat_list_table_filter input[type="search"]::placeholder {
        color: rgba(148, 161, 185, 0.6) !important;
        font-weight: 500;
    }
    body.boat-list-bottomsheet-on #boat_list_table_filter input[type="search"]:focus {
        outline: none !important;
        border-color: rgba(34, 211, 238, 0.55) !important;
        border-bottom-color: rgba(34, 211, 238, 0.55) !important;
        background: rgba(34, 211, 238, 0.06) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                    0 0 22px rgba(34, 211, 238, 0.16) !important;
    }
    /* Kill the native iOS/Webkit search clear "X" — sits awkwardly
       in the pill. */
    body.boat-list-bottomsheet-on #boat_list_table_filter input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none !important;
        appearance: none !important;
    }


    /* ── Collapsed state ────────────────────────────────────────────
       When the user drags the panel down to the peek-snap, we hide
       the panel chrome and show a single "Open boat list" button
       anchored above the bottom navbar. Click → restore default
       height. Toggled by a body class set from BoatTable.js. */
    body.boat-list-collapsed .charters-right-menu {
        display: none !important;
    }
    body.boat-list-collapsed .charters-container {
        bottom: 56px !important;    /* sit on top of the bottom nav */
    }
    .boat-list-open-tab {
        display: none;              /* hidden by default; shown when collapsed */
    }
    /* Hide the floating Open-boat-list button whenever ANY popup is open.
       The button is appended to <body> (root stacking context) while every
       popup lives inside .main-container (position:absolute; z-index:0) — so
       NO z-index on a body-level button can sit below a popup but above the
       map; it's either above the whole .main-container subtree (every popup)
       or below it. So we hide the button instead of fighting z-index.
       `boat-list-hidden-by-popup` is added by hideBoatListPanel() for every
       popup open (boat-details / trips / alerts / inet / stats / events) and
       removed by showBoatListPanel() on close — the reliable signal.
       (The old rule keyed on .popup-view-mode, which mobile boat-details no
       longer sets — it uses map-view-mode — so the button leaked through.) */
    body.boat-list-hidden-by-popup .boat-list-open-tab,
    body.boat-list-collapsed .charters-container.popup-view-mode ~ .boat-list-open-tab,
    body.boat-list-collapsed:has(.charters-container.popup-view-mode) .boat-list-open-tab {
        display: none !important;
    }
    body.boat-list-collapsed .boat-list-open-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: fixed;
        left: 50%;
        width: 170px;
        transform: translateX(-50%);
        bottom: 90px;   /* 80 → 90 (user call, 24 Jul: up 10px) */
        z-index: 600;
        height: 45px;
        padding: 0 18px;
        background: rgb(30 30 52 / 96%);
        border: 1px solid rgb(0 0 0 / 20%);
        border-radius: 20px;
        color: #29c0c7;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35),
                    0 0 16px rgba(34, 211, 238, 0.18);
        /* backdrop-filter: blur(6px); */
    }
    /* Leading ship glyph — the primary anchor icon. */
    .boat-list-open-tab > [data-lucide="ship"],
    .boat-list-open-tab > svg:first-child {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    /* Trailing chevron — visual "pull up" hint, subtler than the ship. */
    .boat-list-open-tab .boat-list-open-tab-chev,
    .boat-list-open-tab > svg:last-child {
        width: 12px;
        height: 12px;
        opacity: 0.7;
        flex-shrink: 0;
    }

    .leaflet-container {
        font-size: 12px !important;
    }

    .boat_marker_popup_buttons_container .content-button-purple-fill {
        font-size: 12px;
    }

    .sharePopup.popup {
        height: 440px;
        width: 370px;
        margin-top: -225px;
        font-size: 14px;
        margin-left: -185px;
    }

    .sharePopup .popup_content {
        padding: 35px;
    }

    .shared-routes-container #trips-analysis-overview-panel {
        padding: 5px;
    }

    .shared-routes-container .resizeable-panel-module {
        top: 20px;
    }

    .shared-routes-container .charters-container.map-view-mode {
        bottom: 0 !important;
    }

    .shared-routes-container #trips-analysis-overview-log {
        margin-right: 5px;
    }


    .settings_popup .popup_content {
        padding: 10px;
    }

    .settings_popup .kpinc-select .select-options li {
        font-size: 11px;
    }

    .settings_popup .boat-name-edit-container {
        width: 100px;
        max-width: 100px;
    }

    .settings_popup .settings-edit-save-button {
        margin-left: 0;
    }

    .settings_popup.dark-theme input[type="search"] {
        background: rgb(174 174 255 / 7%);
        border-bottom: 4px solid #559fb1 !important;
    }

    .settings_popup .settings-boat-type {
        width: 160px;
    }

    .settings_popup .dataTable td {
        padding: 8px 4px !important;
    }

    .sensor-box.ow-accounts {
        height: auto !important;
    }

    .settings_popup .kpinc-select {
        width: 110px;
    }

    .settings_popup .settings-boat-type {
        width: 110px;
    }

    .settings_popup .dataTable td {
        font-size: 12px !important;
    }

    .settings_popup .settings-boat-type {
        font-size: 12px;
    }

    .settings_popup .kpinc-select select,
    .kpinc-select .custom-select {
        font-size: 12px;
    }

    .settings_popup .dataTables_wrapper .dataTables_filter {
        margin: 20px auto 35px auto !important;
    }

    .settings_popup .edit-mode-on .settings-name-input {
        font-size: 12px;
    }

    .trips_destination_station {
        margin-left: 10px;
        max-width: 75px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trips_departure_station {
        max-width: 75px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trip-data-row-events-container {
        display: block;
        padding: 10px 0;
    }

    #boat_list_table_filter {
        display: none;
    }

    .no-crash-text {
        font-size: 18px;
    }

    .no-crash-div .ht30 {
        height: 22px;
    }

    .no-crash-text-small {
        font-size: 14px;
    }

    .trip-cell-arrow-down {
        background-image: url(../images/icons/down_arrow_fat.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: right;
        margin-left: 12px;
        width: 15px;
    }

    .sensor-crash-popup-container .trip-data-cell:last-child {
        margin-right: 0;
    }

    .sensor-crash-popup-container .trip-data-cell {
        margin-right: 20px;
    }

    .alarm_type_text.crash-probability-cell {
        width: 115px;
    }

    .alarm_type_text.crash-gravity-force-cell {
        display: none;
    }

    .crash-sensor-list-item .trip-data-cell-time {
        font-size: 12px;
    }

    .trip-cell-arrow-down {
        margin-left: 10px;
    }

    /* PHONE: stack the banner — icon centered on top, title + description
       centered below. The desktop side-icon row read as "pushed right" on
       narrow screens (icon + gap offset the text block's center by ~15px),
       and the shrunken fonts (0.78/0.7rem) sat below the mobile typography
       floor — keep the desktop sizes instead (user call, 26 Jul). */
    .device_offline_banner {
        max-width: 100%;
        margin: 14px;
        padding: 14px 16px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }
    .device_offline_banner_icon {
        width: 20px;
        height: 20px;
        margin-top: 0;
    }
    .device_offline_banner_title { font-size: 0.9rem; }
    .device_offline_banner_sub { font-size: 0.8rem; }

    .sensor_popup {
        margin: 12px;
    }

    .sensor-internet-popup-container.dark-theme {
        margin-top: 30px;
    }

    #internet_sensor_popup .component-box.internet-reset-button {
        max-width: initial;
    }

    #internet_sensor_popup .arc-popup-content {
        padding: 20px;
    }

    #internet .signal-bars {
        display: block;
    }

    #internet .signal-bars {
        height: 18px;
    }

    .internet-signal-display-strenght {
        font-size: 10px;
    }

    .signal-text-container {
        margin-top: 5px;
    }

    .signal-bars .bar {
        vertical-align: initial !important;
    }

    .sensor-box-mobile-middle .internet-signal-display-text {
        display: none !important;
    }

    .sensor-internet-popup-container .component-box {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .consumed-message-container {
        font-size: 10px;
        font-weight: 500;
    }

    #trips_fleet_popup #reports_list_table td.details-row-class {
        padding: 20px;
    }

    #trips_fleet_popup #reports_list_table.dataTable tbody td:first-child {
        padding-left: 15px !important;
    }

    .charter-playback-module-exit {
        font-size: 14px;
        width: 70px;
        left: 20px;
        top: -60px;
    }

    #arconmar-playback-play-pause:hover {
        background: transparent;
    }

    .arconmar-playback-speed-slider-container:hover {
        background: #303043;
    }

    .arconmar-playback-speed-slider-container {
        width: 60px;
        font-size: 14px;
        position: absolute;
        top: 65px;
        /* right: 70px; */
        height: 45px;
        line-height: 45px;
        right: 20px;
        background: #181827;
        border-radius: 6px;
    }

    .arconmar-playback-play-icon {
        height: 60px;
        background-color: #181827;
        border-radius: 50px;
        width: 60px;
        background-image: url(../images/icons/playback_play.svg) !important;
        background-size: 50px 50px !important;
        background-repeat: no-repeat !important;
        background-position: 8px !important;
    }

    .arconmar-playback-time-container {
        position: absolute;
        top: 63px;
        left: 10px;
        width: 130px;
        text-align: left;
        border-right: none;
        font-size: 10px;
    }

    .charter-playback-module {
        background: rgb(40 40 62);
        position: relative;
        font-size: 11px;
        height: 170px;
        border-radius: 0;
    }

    .charter-playback-container {
        /* Sit ABOVE the 68px .ds-top bottom nav (it stays fixed during playback),
           so the controls aren't hidden behind / overlapping the nav bar. */
        bottom: 68px;
        left: 0;
        right: 0;
        height: 170px;
        padding: 0;
    }

    .arconmar-playback-features-container {
        position: absolute;
        /* margin: 0 auto; */
        width: 100%;
        top: 128px;
        height: 35px;
        color: #a0a9ca;
        padding: 12px;
        text-align: center;
        border-right: 1px solid #2e2d3f;
    }

    .arconmar-playback-features-container div {
        display: inline-block;
    }

    .arconmar-playback-speed-container {
        margin-right: 20px;
    }

    .arconmar-playback-speed-selector {
        bottom: 185px;
        right: 15px;
        height: 200px;
    }

    #arconmar-playback-speed-slider {
        height: 160px;
    }

    .arconmar-playback-play-pause-container {
        border-right: none;
        position: absolute;
        top: 58px;
        left: 50%;
        margin-left: -30px;
    }

    .arconmar-playback-play-icon {
        height: 60px;
        background-color: #1e1e2f;
        border-radius: 50px;
        width: 60px;
        background-image: url(../images/icons/playback_play.svg) !important;
        background-size: 50px 50px !important;
        background-repeat: no-repeat !important;
        background-position: 8px !important;
    }

    .arconmar-playback-stop-icon {
        height: 60px;
        width: 60px;
        background-color: #1e1e2f;
        border-radius: 50px;
        background-image: url(../images/icons/playback_stop.svg) !important;
        background-size: 50px 50px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .arconmar-playback-time-slider-container {
        border-right: none;
    }

    /* if 4 sensors */
    .charter_details_popup .sensors-box-container {
        padding: 0 !important;
    }

    .charter_details_popup .sensors-box-container .ht50 {
        display: none;
    }

    .charter_details_popup .sensors-box-container .component-box {
        margin: 0 !important;
    }

    /* .charter_details_popup .sensors-amount-4 .component-box {
        border-radius: 0;
        box-shadow: none;
        border-right: 1px solid blue;
        min-width: 80px;
        width: 25% !important;
    } */

    .sensor-loader .arconmarLoader {
        margin: 10px 25px 10px auto !important;
        display: block !important;
    }

    .sensor-loader {
        height: auto;
        width: 230px;
        right: 0;
        left: auto;
    }

    .signal-container {
        line-height: 10px;
    }

    .signal-box,
    .internet-signal-display {
        display: block !important;
    }

    .internet-consumption-gb {
        display: block;
        margin: 0 auto;
        padding-top: 10px;
        font-size: 11px;
        display: block !important;
    }

    .internet-consumption {
        padding-top: 20px;
        line-height: 10px;
        height: 70px;
    }

    .charter_details_popup .sensors-box-container .sensor-box-mobile-left {
        width: 38%;
        text-align: left;
        padding-left: 20px;
    }

    .charter_details_popup .sensors-box-container .sensor-box-mobile-middle {
        width: 28%;
        text-align: center;
    }

    .charter_details_popup .sensors-box-container .sensor-box-mobile-right {
        width: 22%;
        text-align: right;
    }

    .sensor-box-arrow {
        background-image: url(../images/icons/right_arrow_fat.svg);
        background-size: 45%;
        background-repeat: no-repeat;
        background-position: center;
        /* opacity: 0.5; */
        height: 70%;
        top: 15%;
        width: 15px;
        right: 15px;
        left: auto;
        bottom: auto;
        opacity: 0.8;
        border-bottom-left-radius: auto;
        border-bottom-right-radius: auto;
        border-radius: 4px;
        position: absolute;
    }

    .charter_details_popup .sensors-box-container .component-box .slice {
        display: none;
    }

    .charter_details_popup .sensors-box-container .component-box .c100 {
        background-color: transparent;
        width: 45px;
    }

    .charter_details_popup .sensors-box-container .component-box .c100:after {
        background-color: transparent;
    }

    .charter_details_popup .sensors-box-container .component-box .c100 span {
        width: 100%;
    }

    .charter_details_popup .sensors-box-container .component-box .sensor-desktop-title {
        display: none !important;
    }

    .charter_details_popup .sensors-box-container .component-box .text-alarm-state {
        display: none;
    }

    .charter_details_popup .sensors-box-container .component-box .sensor-phone-title {
        display: inline-block;
        font-weight: 500;
        color: #cbdef6;
    }

    .charter_details_popup .sensors-box-container .component-box .sensor-image {
        width: 30px;
        height: 30px;
        margin: 0 15px 0 0;
    }

    .charter_details_popup .sensors-box-container .component-box .safe-sensor-image {
        width: 30px;
        height: 30px;
    }

    .charter_details_popup .sensors-box-container .component-box {
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #202435;
        min-width: 80px;
        max-width: 100%;
        width: 100% !important;
        text-align: left;
        height: 70px;
        line-height: 70px;
        padding: 0;
    }

    .charter_details_popup .sensors-box-container #gps_sensor .boat-info-movement {
        padding-left: 8px;
        font-size: 12px;
        max-width: 80%;
    }

    .charter_details_popup .sensors-box-container #gps_sensor.ow-accounts .boat-info-movement {
        padding-left: 0;
        font-size: 12px;
        max-width: 70px;
    }

    .charter_details_popup .sensors-box-container .chart-container-boat-movement {
        font-size: 0;
        width: 100%;
    }

    .charter_details_popup .sensors-box-container #gps_sensor .boat-info-speed {
        padding-right: 10px;
    }

    .charter_details_popup .sensors-box-container .internet-consumption {
        font-size: 14px;
    }

    .charter_details_popup .sensors-box-container .boat_location_icon.boat_location_icon_home_HD,
    .boat_location_icon.boat_location_icon_docked_HD,
    .boat_location_icon.boat_location_icon_moving_HD {
        background-size: 100% !important;
    }

    .charter_details_popup .sensors-box-container .boat_location_icon {
        width: 15%;
        height: 25px;
    }

    .charter_details_popup .sensors-box-container .internet-consumption.internet-consumption-safe {
        padding-right: 8px;
    }

    .charter_details_popup .sensors-box-container .component-box div {
        display: inline-block;
        vertical-align: middle;
    }

    .padding50-lr {
        padding: 0 20px;
    }

    .refreshPopup.popup {
        width: 350px;
        margin-left: -175px;
    }

    .charter_details_popup .popup_close_button,
    .alerts_fleet_popup .popup_close_button {
        top: -6px;
        right: 0px;
    }

    .alerts_fleet_popup td.boat_type {
        width: 32px !important;
    }

    .alerts_fleet_popup .menu-buttons {
        height: 60px;
        line-height: 60px;
    }

    .alerts_fleet_popup .popup_content {
        top: 60px;
    }

    .alerts_fleet_popup .alerts_fleet_popup_menu {
        height: 60px;
    }

    #boat_list_table {
        border-top: 0;
    }

    #trips_list_table.dataTable tbody td.details-row-class {
        padding: 0 0 20px 0 !important;
    }

    #alerts_list_table.dataTable tbody td:first-child {
        padding-left: 10px !important;
        padding-right: 12px !important;
        width: auto !important;
        max-width: 35px;
    }

    .alerts-container .alert_status_resolved {
        background: none;
        color: #3ce699;
        width: 30px;
        float: none;
        font-size: 13px;
        font-weight: 500;
        padding: 0;
        text-align: left;
        border-radius: 5px;
        box-shadow: none;
    }

    .alerts-container .alert_status_warning {
        width: 80px;
        float: right;
        font-size: 11px;
        font-weight: 500;
        text-align: right;
    }

    .alerts-container .alert_status_critical {
        width: 80px;
        font-size: 11px;
    }

    .alerts-container #alerts_list_table thead th:last-child {
        padding-right: 0;
        font-size: 0;
    }

    #alerts_list_table.dataTable td {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #alerts_list_table.dataTable td .alarm_type_text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #alerts_list_table .alarm_type_icon {
        float: left;
        width: 15px;
        margin-right: 9px;
        height: 22px;
    }

    #alerts_list_table .reports_status {
        width: 65px;
    }

    #alerts_list_table .reports_status_icon {
        height: 20px;
    }

    #alerts_list_table.dataTable tbody td {
        font-size: 11px;
    }

    #alerts_list_table.dataTable thead th {
        font-size: 11px;
        padding: 10px 10px;
    }


    /* #alerts_list_table.dataTable td:first-child,
    #alerts_list_table.dataTable th:first-child {
        display: none;
    } */

    .alerts-container #alerts_list_table td:nth-child(2),
    .alerts-container #alerts_list_table th:nth-child(2) {
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto;
        max-width: 85px;
        min-width: 65px;
    }

    .alerts-container #alerts_list_table td:nth-child(3),
    .alerts-container #alerts_list_table th:nth-child(3) {
        text-align: left !important;
        width: 120px;
        max-width: 120px;
        min-width: 120px;
    }

    .alerts-container #alerts_list_table td:nth-child(4),
    .alerts-container #alerts_list_table th:nth-child(4) {
        width: 100%;
        max-width: 105px;
        padding-right: 10px !important;
    }

    .alerts-container #alerts_list_table td:last-child,
    .alerts-container #alerts_list_table th:last-child {
        width: 100%;
        max-width: 105px;
        padding: 4px !important;
        text-align: right !important;
    }

    .alerts-container .alarm_state_icon.alarm_state_icon_critical {
        background-size: 25px !important;
        background-position: center 1px !important;
    }

    .alerts-container .alarm_state_icon.alarm_state_icon_resolved {
        background-size: 13px !important;
        background-position: center 8px !important;
    }

    .alerts-container .alarm_state_icon.alarm_state_icon_warning {
        background-size: 25px !important;
        background-position: center 2px !important;
    }

    .alarm_type_icon_fuel_station {
        background-image: url(../images/icons/fuel_station.svg);
        background-size: 17px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .alarm_type_icon_battery_resolved {
        background-image: url(../images/icons/battery.svg);
        background-size: 11px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .alarm_type_icon_battery_warning {
        background-image: url(../images/icons/battery_warning.svg);
        background-size: 11px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .alarm_type_icon_battery_critical {
        background-image: url(../images/icons/battery_critical.svg);
        background-size: 13px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .alarm_type_icon_crash_critical {
        background-image: url(../images/icons/crash_critical.svg);
        background-size: 15px !important;
        background-repeat: no-repeat !important;
        background-position: 5px 7px !important;
    }

    #alerts_list_table .alarm_type_icon_crash_critical {
        background-image: url(../images/icons/crash_critical.svg);
        background-size: 15px !important;
        background-repeat: no-repeat !important;
        background-position: 0px 5px !important;
    }

    .alarm_type_icon_bilge_resolved {
        background-image: url(../images/icons/flood.svg);
        background-size: 11px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .alarm_type_icon_bilge_critical {
        background-image: url(../images/icons/flood_critical.svg);
        background-size: 11px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .alarm_type_icon_smoke_resolved {
        background-image: url(../images/icons/smoke_small.svg);
        background-size: 11px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .alarm_type_icon_smoke_critical {
        background-image: url(../images/icons/smoke_small_critical.svg);
        background-size: 11px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .dark-theme.alerts-container td .type_sailboat {
        height: 17px;
        width: 17px;
        background-image: url(../images/icons/type_sailboat.svg) !important;
        background-size: 17px 17px !important;
        background-repeat: no-repeat !important;
        background-position: center -1px !important;
    }

    .dark-theme.alerts-container td .type_yacht {
        height: 17px;
        width: 17px;
        background-image: url(../images/icons/type_yacht.svg) !important;
        background-size: 17px 17px !important;
        background-repeat: no-repeat !important;
        background-position: center -1px !important;
    }


    .dark-theme.alerts-container td .type_superyacht {
        height: 17px;
        width: 17px;
        background-image: url(../images/icons/type_superyacht_dark.png) !important;
        background-size: 17px 17px !important;
        background-repeat: no-repeat !important;
        background-position: center -1px !important;
    }


    #trips_list_table.dataTable tbody td:first-child {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #trips_list_table.dataTable tbody td.details-row-class:first-child {
        padding: 0 !important;
    }

    #trips_list_table.dataTable td:nth-child(2),
    #trips_list_table.dataTable th:nth-child(2) {
        padding-left: 0 !important;
    }

    #trips_list_table .reports_status,
    #trip_details_popup .reports_status {
        width: 30px;
    }

    /* #trips_list_table .reports_status_icon {
        height: 20px;
    } */

    #trips_list_table.dataTable tbody td,
    #reports_list_table.dataTable tbody td {
        font-size: 11px;
    }

    #trips_list_table.dataTable thead th {
        font-size: 11px;
        padding-right: 0 !important;
    }

    /* #trips_list_table.dataTable td:nth-child(4),
    #trips_list_table.dataTable th:nth-child(4) {
        display: none;
    } */

    #trips_list_table.dataTable td:nth-child(3),
    #trips_list_table.dataTable th:nth-child(3) {
        display: none;
    }

    /* #trips_list_table.dataTable td:nth-child(4),
    #trips_list_table.dataTable th:nth-child(4) {
        display: none;
    } */

    #trips_list_table.dataTable thead th:first-child {
        padding-left: 40px;
    }


    .boat_zoom_controls_container {
        display: none;
    }

    .boat_marker_popup_buttons_container {
        padding-top: 7px;
    }

    .boat_marker_popup_buttons_container {
        width: 100px !important;
    }

    .boat_marker_popup_buttons_container .content-button-purple-fill {
        width: 100px !important;
    }

    #trips_fleet_popup .classic_navbar {
        width: 380px;
    }

    #trips_fleet_popup .component-box.component-box-dark.dark-theme.padding30 {
        padding: 15px;
    }

    #trips_fleet_popup .dataTable td {
        font-size: 13px;
    }

    #trips_fleet_popup table.dataTable thead th,
    table.dataTable thead td {
        font-size: 14px;
    }

    #trips_fleet_popup .date-arrival-col,
    #trips_fleet_popup .distance-col,
    #trips_fleet_popup .duration-col {
        display: none;
    }

    #trips_fleet_popup .dataTable td {
        font-size: 12px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #trips_fleet_popup table.dataTable thead th,
    table.dataTable thead td {
        padding: 10px 12px;
    }

    #trips_fleet_popup .reports_status {
        padding-left: initial;
    }

    #trips_fleet_popup .reports-table-col {
        padding: 0;
    }

    #trips_fleet_popup td.active-col {
        min-width: 100px;
    }

    #trips_fleet_popup .dt-buttons {
        display: none;
    }

    #trips_fleet_popup .component-box {
        border-radius: 0;
    }

    #trips_fleet_popup td.boat_type {
        width: 28px !important;
    }

    #trips_fleet_popup td.date-departure-col {
        max-width: 95px !important;
    }

    #trips_fleet_popup #trips-analysis-overview-panel {
        text-align: center;
    }

    #trips_fleet_popup .dark-theme .dataTables_filter {
        margin: 0 auto 35px auto !important;
    }

    #trips_fleet_popup #reports_list_table .trip-data-cell-status .alarm_type_text {
        display: none;
    }

    #trips_fleet_popup #trips-analysis-overview-log {
        padding-right: 0;
    }

    #trips_fleet_popup .trip-data-cell {
        margin-right: 0;
    }

    #trips_fleet_popup td.id {
        max-width: 100px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #trips_fleet_popup .classic-navbar-trips-count {
        margin-left: 5px;
        ;
    }

    .consumed-message-container {
        font-size: 12px;
        font-weight: 500;
    }
}

@media only screen and (max-width: 390px) {

    /* Tight phones: trim the generic content padding (20px @ ≤1024) further
       so cards aren't squeezed by their own gutters. */
    .padding50 {
        padding: 12px !important;
    }

    /* Stats panels — tighter padding on small phones. */
    .stats-panel {
        padding: 12px !important;
    }

    #trips_list_table.dataTable tbody td:first-child {
        padding-left: 5px !important;
        padding-right: 0px !important;
    }

    /* Small phones: same hug-content trick, tighter cap on the inner.
       105 → 95 (user call, 24 Jul: −10px so the approaching chip in the
       next cell stops getting cut off). */
    #boat_list_table .bt-name-inner {
        max-width: 95px;
    }

    #boat_list_table td:nth-child(3) {
        padding-right: 0px !important;
    }

    #trips_list_table.dataTable tbody td,
    #reports_list_table.dataTable tbody td {
        padding: 15px 0px !important;
    }

    .consumed-message-container {
        font-size: 11px;
    }

    .charter_details_popup .sensors-box-container .component-box .sensor-image {
        width: 25px;
        height: 25px;
        margin: 0 15px 0 0;
    }

    #alerts_fleet_popup .popup_content {
        padding: 16px;
    }

    #trips_fleet_popup .classic_navbar {
        width: 350px;
    }

    .classic_navbar_item_right,
    .classic_navbar_item_left,
    .classic_navbar_item_middle {
        font-size: 13px;
    }

    #trips_fleet_popup .dataTable td {
        font-size: 12px;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #trips_fleet_popup table.dataTable thead th,
    table.dataTable thead td {
        padding: 10px 10px;
    }

    #trips_fleet_popup table.dataTable thead th,
    table.dataTable thead td {
        font-size: 13px;
    }

    #trips_fleet_popup .reports_status {
        padding-left: initial;
    }

    #trips_fleet_popup .reports-table-col {
        padding: 0;
    }

    #trips_fleet_popup td.active-col {
        min-width: 30px;
        width: 30px;
    }

    #trips_fleet_popup #reports_list_table .active-col .alarm_type_text {
        display: none;
    }

    #trips_fleet_popup #reports_list_table .active-col .reports_status_icon {
        float: right;
    }

    .trip-data-cell {
        margin-right: 30px;
    }

}

@media only screen and (max-width: 360px) {

    .leaflet-container {
        font-size: 11px !important;
    }

    .sharePopup.popup {
        height: 440px;
        width: 340px;
        margin-top: -225px;
        font-size: 14px;
        margin-left: -170px;
    }

    .sharePopup .popup_content {
        padding: 24px;
    }

    .settings_popup .popup_content {
        padding: 8px;
    }

    .settings_popup .boat-name-edit-container {
        width: 100px;
        max-width: 100px;
    }


    .settings_popup .settings-boat-type {
        width: 100px;
    }

    .settings_popup .dataTable td {
        padding: 8px 2px !important;
    }

    .settings_popup .kpinc-select {
        width: 100px;
    }

    .settings_popup .settings-boat-type {
        width: 100px;
    }

    .settings_popup .boat-name-edit-container {
        width: 100px;
    }

    .settings_popup .dataTable td {
        font-size: 11px !important;
    }

    .settings_popup .settings-boat-type {
        font-size: 11px;
    }

    .settings_popup .kpinc-select select,
    .kpinc-select .custom-select {
        font-size: 11px;
    }

    .settings_popup .edit-mode-on .settings-name-input {
        font-size: 11px;
    }


    .trips_destination_station {
        max-width: 60px;
    }

    .trips_departure_station {
        max-width: 60px;
    }

    .alerts-container #alerts_list_table td:nth-child(2),
    .alerts-container #alerts_list_table th:nth-child(2) {
        max-width: 75px;
        min-width: 65px;
    }

    .padding50-lr {
        padding: 0 10px;
    }
}

@media only screen and (max-width: 340px) {
    .charter_details_popup .sensors-box-container .sensor-box-mobile-left {
        padding-left: 12px;
    }

    .consumed-message-container {
        font-size: 9px;
        font-weight: 500;
    }
}


/* ============================================================================
   Spacey-Marine table style — Trips & Alerts inside boat-details popup
   ============================================================================
   Strips the old chunky DataTables look (dark slabs, group-header break bars)
   and replaces it with a translucent surface + cyan-accent rhythm matching the
   battery bank / boat systems containers. */

.charter_details_popup #trips_list_table.dataTable {
    background: rgba(25, 27, 39, 0.45) !important;
    border: 1px solid rgba(148, 148, 200, 0.12) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 25px rgba(64, 87, 126, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
    color: #95a1b9 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* ---------- Headers ---------- */
.charter_details_popup #trips_list_table.dataTable thead th {
    background: rgba(15, 17, 27, 0.4) !important;
    color: rgba(34, 211, 238, 0.65) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    padding: 16px 14px !important;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12) !important;
    border-top: none !important;
}

.charter_details_popup #trips_list_table.dataTable thead th:first-child {
    padding-left: 26px !important;
    border-top-left-radius: 14px !important;
}
.charter_details_popup #trips_list_table.dataTable thead th:last-child {
    padding-right: 26px !important;
    border-top-right-radius: 14px !important;
}

/* ---------- Body cells ---------- */
.charter_details_popup #trips_list_table.dataTable tbody td {
    background: transparent !important;
    color: #b3bfd9 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 16px 14px !important;
    border-bottom: 1px solid rgba(148, 148, 200, 0.08) !important;
    border-top: none !important;
    font-variant-numeric: tabular-nums;
}

.charter_details_popup #trips_list_table.dataTable tbody td:first-child {
    padding-left: 26px !important;
    color: #d6dbe7 !important;
    font-weight: 600 !important;
}
.charter_details_popup #trips_list_table.dataTable tbody td:last-child {
    padding-right: 26px !important;
}
.charter_details_popup #trips_list_table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* ---------- Row hover ---------- */
.charter_details_popup #trips_list_table.dataTable tbody tr {
    transition: background 0.18s ease;
}
.charter_details_popup #trips_list_table.dataTable tbody tr:hover {
    background: rgba(34, 211, 238, 0.04) !important;
    color: #d6dbe7 !important;
    cursor: pointer;
}

/* ---------- Group header (month divider) ---------- */
.charter_details_popup #trips_list_table.dataTable tr.group-header {
    background: transparent !important;
    pointer-events: none;
}
.charter_details_popup #trips_list_table.dataTable tr.group-header td {
    background: transparent !important;
    color: rgba(34, 211, 238, 0.6) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    padding: 26px 26px 8px !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.12) !important;
}
.charter_details_popup #trips_list_table.dataTable tbody tr.group-header:hover {
    background: transparent !important;
    cursor: default !important;
}

/* ---------- Selected (active) trip ---------- */
.charter_details_popup #trips_list_table.dataTable tr.trip_selected,
.charter_details_popup #trips_list_table.dataTable tbody tr.trip_selected:hover {
    background: rgba(34, 211, 238, 0.08) !important;
    color: #d6dbe7 !important;
    box-shadow: inset 3px 0 0 #22D3EE;
}

/* ---------- Cell accents ---------- */
.charter_details_popup #trips_list_table.dataTable td.trip-distance-style {
    color: #22D3EE !important;
    font-weight: 600 !important;
}
.charter_details_popup #trips_list_table.dataTable td.trip-time-style {
    color: #8c75ff !important;
    font-weight: 600 !important;
}

/* ---------- Trip status icon (Finished / Ongoing) ----------
   Icon only — no pill wrapper. The status icon sits bare in the cell,
   matching the fleet trips table (#reports_list_table) which never
   wrapped its status icon in a tinted pill. */
.charter_details_popup #trips_list_table .reports_status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0;
    height: 24px;
    line-height: 1;
    float: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.charter_details_popup #trips_list_table .reports_status_icon {
    width: 14px !important;
    height: 14px !important;
    float: none !important;
    background-size: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ---------- Last-col chevron ---------- */
.charter_details_popup #trips_list_table.dataTable td.cell-arrow-down {
    color: rgba(148, 148, 200, 0.4) !important;
}

/* ---------- Search / no-results / processing ---------- */
.charter_details_popup .dataTables_empty {
    color: rgba(148, 148, 200, 0.45) !important;
    background: transparent !important;
    padding: 40px !important;
    font-size: 0.78rem !important;
    text-align: center !important;
    font-style: italic;
}

/* ---------- DataTables sort arrows: tone down ---------- */
.charter_details_popup #trips_list_table.dataTable thead th.sorting:before,
.charter_details_popup #trips_list_table.dataTable thead th.sorting:after,
.charter_details_popup #trips_list_table.dataTable thead th.sorting_asc:before,
.charter_details_popup #trips_list_table.dataTable thead th.sorting_asc:after,
.charter_details_popup #trips_list_table.dataTable thead th.sorting_desc:before,
.charter_details_popup #trips_list_table.dataTable thead th.sorting_desc:after {
    color: rgba(34, 211, 238, 0.35) !important;
    opacity: 0.5;
}

/* ---------- Alerts table — unseen mark ---------- */

/* ---------- Container padding around the tables ---------- */
.charter_details_popup #trips_info_container {
    padding: 30px 50px 60px !important;
}

/* ============================================================================
   Per-boat TRIPS table — flat look matching the FLEET trips table
   ============================================================================
   The glass/spacey-marine block above (8320+) skins BOTH the per-boat trips
   table and the per-boat alerts table. Per request, the per-boat TRIPS table
   should instead match the FLEET trips popup table (#reports_list_table):
   flat dark surface, plain grey headers, simple month dividers — no glass
   panel / cyan-uppercase headers. These rules layer on top (same specificity,
   later in source = wins) and leave the alerts table's glass look untouched.
   Mirrors the values from `#trips_fleet_popup #reports_list_table`. */
.charter_details_popup #trips_list_table.dataTable {
    background: #1f2134 !important;
    /* Rounded outer border to match the FLEET trips table. */
    border: 1px solid rgba(148, 148, 200, 0.12) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    color: #9ca9c1 !important;
}

/* Headers — plain grey, 12px, light letter-spacing (not cyan uppercase). */
.charter_details_popup #trips_list_table.dataTable thead th {
    background: #1f2134 !important;
    color: #9ca9c1 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: none !important;
    padding: 15px !important;
    border-bottom: 1px solid rgb(38, 41, 57) !important;
}
.charter_details_popup #trips_list_table.dataTable thead th:first-child {
    border-top-left-radius: 14px !important;
    padding-left: 26px !important;
}
.charter_details_popup #trips_list_table.dataTable thead th:last-child {
    border-top-right-radius: 14px !important;
    padding-right: 26px !important;
}

/* Body cells — flat, 13px, slate row dividers. */
.charter_details_popup #trips_list_table.dataTable tbody td {
    background: transparent !important;
    color: #9ca9c1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 15px !important;
    border-bottom: 1px solid rgb(38, 41, 57) !important;
}
.charter_details_popup #trips_list_table.dataTable tbody td:first-child {
    padding-left: 26px !important;
    color: #9ca9c1 !important;
    font-weight: 400 !important;
}
.charter_details_popup #trips_list_table.dataTable tbody tr:last-child td {
    border-bottom: 1px solid rgb(38, 41, 57) !important;
}

/* Row hover — fleet's flat highlight, not the cyan tint. */
.charter_details_popup #trips_list_table.dataTable tbody tr:hover {
    background: #22223c !important;
    color: white !important;
}

/* Month group divider — fleet style: dark band + green month label. */
.charter_details_popup #trips_list_table.dataTable tr.group-header {
    background: #191b2e !important;
    line-height: 10px !important;
    pointer-events: none;
}
.charter_details_popup #trips_list_table.dataTable tr.group-header td {
    background: #191b2e !important;
    color: #4acd65 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding-bottom: 10px;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 0px 26px 10px 26px !important;
    border-top: 35px solid #191b2e !important;
    border-bottom: none !important;
}
.charter_details_popup #trips_list_table.dataTable tbody tr.group-header:hover {
    background: #191b2e !important;
    color: #4acd65 !important;
    cursor: default !important;
}

/* Distance / time cell accents — match the FLEET trips table colours
   (teal distance, blue duration). */
.charter_details_popup #trips_list_table.dataTable td.trip-distance-style {
    color: #00b0ba !important;
    font-weight: 400 !important;
}
.charter_details_popup #trips_list_table.dataTable td.trip-time-style {
    color: #159afc !important;
    font-weight: 400 !important;
}

/* Selected (active) trip — fleet flat highlight, no cyan inset bar. */
.charter_details_popup #trips_list_table.dataTable tr.trip_selected,
.charter_details_popup #trips_list_table.dataTable tbody tr.trip_selected:hover {
    background: rgb(21, 23, 38) !important;
    color: #cbd0e3 !important;
    box-shadow: none !important;
}

/* ============================================================================
   Trips tables — "Traveling" check-out pill + Fuel pill (both tables)
   ============================================================================ */

/* The active-trip "Traveling" status in the Check-out column — icon only,
   no pill background, in BOTH the per-boat and fleet trips tables. */
#trips_fleet_popup #reports_list_table .reports_status_ongoing,
.charter_details_popup #trips_list_table .reports_status_ongoing {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 0 !important;
    background: none !important;
    color: #37d0ff !important;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    float: none !important;
    text-align: center !important;
}
#trips_fleet_popup #reports_list_table .reports_status_ongoing .alarm_type_text,
.charter_details_popup #trips_list_table .reports_status_ongoing .alarm_type_text {
    margin-left: 0 !important;
    min-width: 0 !important;
    color: #37d0ff !important;
}
/* Wave icon inside the pill — fixed size, never flush to the pill edge. */
#trips_fleet_popup #reports_list_table .reports_status_ongoing .reports_status_icon,
.charter_details_popup #trips_list_table .reports_status_ongoing .reports_status_icon {
    width: 14px !important;
    height: 14px !important;
    background-size: 14px !important;
    flex-shrink: 0;
    margin: 0 !important;
}

/* Fuel column pill — yellow when the trip had fuel-station visits, neutral
   slate "0" otherwise. No border. Same pill shape as the alert pill. */
#trips_fleet_popup #reports_list_table .trip-fuel-cell,
.charter_details_popup #trips_list_table .trip-fuel-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
    min-width: 54px;
    padding: 0 12px;
    border-radius: 999px;
    line-height: 1;
    font-size: 0.7rem;
    font-weight: 700;
}
#trips_fleet_popup #reports_list_table .trip-fuel-cell-has,
.charter_details_popup #trips_list_table .trip-fuel-cell-has {
    background: rgba(251, 191, 36, 0.12);
    color: #FBBF24;
}
#trips_fleet_popup #reports_list_table .trip-fuel-cell-none,
.charter_details_popup #trips_list_table .trip-fuel-cell-none {
    background: rgba(148, 148, 200, 0.08);
    color: #6c7591;
}
#trips_fleet_popup #reports_list_table .trip-fuel-lucide,
.charter_details_popup #trips_list_table .trip-fuel-lucide {
    width: 13px;
    height: 13px;
    stroke-width: 2;
    flex-shrink: 0;
}
/* PRO-locked fuel pill (STANDARD) — cyan-tinted, fuel icon + small lock, no
   count. Clicking opens the PRO popover (proLockPopover.js). */
#trips_fleet_popup #reports_list_table .trip-fuel-cell-locked,
.charter_details_popup #trips_list_table .trip-fuel-cell-locked {
    background: rgba(34, 211, 238, 0.08);
    border: none;
    color: rgba(34, 211, 238, 0.75);
    cursor: pointer;
    gap: 5px;
}
#trips_fleet_popup #reports_list_table .trip-fuel-cell-locked:hover,
.charter_details_popup #trips_list_table .trip-fuel-cell-locked:hover {
    background: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.4);
}
#trips_fleet_popup #reports_list_table .trip-fuel-lock-lucide,
.charter_details_popup #trips_list_table .trip-fuel-lock-lucide {
    width: 11px;
    height: 11px;
    stroke-width: 2.2;
    flex-shrink: 0;
}
/* Trailing row chevron — makes each trip row read as clickable. */
.charter_details_popup #trips_list_table .trip-row-chev,
#trips_fleet_popup #reports_list_table .trip-row-chev {
    width: 15px;
    height: 15px;
    stroke-width: 2;
    color: #5a6478;
    vertical-align: middle;
}

/* "Quick fuel run" label in the Check out column — same inline pill shape as
   the "Traveling" pill but yellow (fuel colour). Shown for short trips that
   were really just a fuel-station visit (see filterBoatTrips / classifyBoatTrip
   in boat/trips/Trips.js). */
.charter_details_popup #trips_list_table .reports_status_fuelrun {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 0 !important;
    background: none !important;
    color: #FBBF24 !important;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    float: none !important;
    text-align: center !important;
}
.charter_details_popup #trips_list_table .reports_status_fuelrun .alarm_type_text {
    margin-left: 0 !important;
    min-width: 0 !important;
    color: #FBBF24 !important;
}
.charter_details_popup #trips_list_table .trip-fuelrun-lucide {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    flex-shrink: 0;
}

/* ============================================================================
   Stats container — Spacey-Marine panels
   ============================================================================ */
.charter_details_popup #stats_info_container {
    padding: 30px 50px 60px !important;
    /* Stats surface (user call, 7 Aug) — lighter than the popup's #3d4056,
       same as the fleet-stats content. min-height fills .popup_content (a
       definite-height absolute region) so a short stats list doesn't show
       the darker popup bg below the container. */
    background: #4a4f69;
    min-height: 100%;
}

/* Panel grid — 2 columns on wide, 1 column on narrow */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 1100px) {
    .stats-grid { grid-template-columns: 1fr; }
}

/* Individual stats panel — same surface language as Battery Bank / Boat Systems */
.stats-panel {
    /* user paste, 6 Aug */
    background: rgba(25, 27, 41, 0.75);
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(64, 87, 126, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
}

/* Panel header — small cyan icon + uppercase letter-spaced meta-label */
.stats-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12);
}
.stats-panel-header-icon {
    width: 14px;
    height: 14px;
    color: rgba(34, 211, 238, 0.78);
    flex-shrink: 0;
}
.stats-panel-header-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 75%);
}
.stats-panel-header-meta {
    margin-left: auto;
    font-size: 0.6rem;
    color: #6c7591;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* Info button — explains which "trips" are excluded from the season stats
   (dry dock / quick fuel runs / port-testing noise). Native title tooltip;
   calm icon-only button, cyan on hover. */
.stats-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: #6c7591;
    cursor: pointer;   /* it's a button — no '?' help cursor */
    flex-shrink: 0;
    transition: color 0.15s;
}
.stats-info-btn:hover { color: rgba(34, 211, 238, 0.85); }
.stats-info-btn i,
.stats-info-btn svg { width: 14px; height: 14px; }
/* Benchmark info button — sits right after the "Benchmark" caption (which
   carries margin-left:auto), so it needs no auto-margin of its own; just a hair
   of breathing room from the caption and the toggle. */
.stats-info-btn-benchmark { margin: 0 4px 0 -4px; width: 18px; height: 18px; }
/* Caption + its info button share a wrapper so phones can move them to their
   own row TOGETHER (the icon used to wrap alone under the caption). On
   desktop the wrapper is transparent to the flex layout. */
.stats-compare-caption-row { display: contents; }
.stats-info-btn-benchmark i,
.stats-info-btn-benchmark svg { width: 13px; height: 13px; }

/* ═══ STANDARD DROPDOWN / POPOVER CHROME — .arc-dropdown ═══
   THE canonical floating-menu surface, copied from the Account dropdown
   (.ds-user-menu-dropdown — the reference implementation). Every
   body-teleported popover (info buttons, month/filter selectors, the
   account menu itself) carries this class for its CHROME; each popover's
   own class keeps only layout/sizing/typography. Defined BEFORE the
   adopters so their specific overrides (padding, widths) win the cascade. */
.arc-dropdown {
    position: fixed;
    padding: 8px;
    background: #242434;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px rgba(34, 211, 238, 0.1);
}

/* Info popover — body-level (escapes the stats panel clipping), opened by the
   info button. Chrome from .arc-dropdown; white-space:pre-line keeps the
   &#10; line breaks from the data-stats-info text. */
.stats-info-pop {
    z-index: 100000;
    max-width: 320px;
    padding: 12px 14px;
    color: #c3cbdd;
    font-size: 0.74rem;
    line-height: 1.5;
    white-space: pre-line;
}
/* Rich (HTML) variant — headings, coloured emphasis, bulleted "ignored" list.
   Not the flat pre-line text; used by the benchmark info button. */
.stats-info-pop.stats-info-pop-rich {
    white-space: normal;
    max-width: 340px;
    padding: 14px 16px;
}
.stats-info-pop-rich p { margin: 0 0 10px; }
.stats-info-pop-rich .sip-h {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.75);
    margin: 0 0 6px;
}
.stats-info-pop-rich .sip-h-amber { color: #ffce61; margin-top: 12px; }
.stats-info-pop-rich .sip-cyan { color: rgba(34, 211, 238, 0.95); font-weight: 700; }
.stats-info-pop-rich b { color: #d6dbe7; font-weight: 700; }
.stats-info-pop-rich i { color: #95a1b9; font-style: italic; }
.stats-info-pop-rich .sip-ul {
    margin: 0;
    padding-left: 16px;
    list-style: none;
}
.stats-info-pop-rich .sip-ul li {
    position: relative;
    margin: 4px 0;
    padding-left: 2px;
}
.stats-info-pop-rich .sip-ul li::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 206, 97, 0.7);   /* amber dot — matches "ignored" heading */
}

/* KPI row — used for headline-number panels */
.stats-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 6px 0 4px;
}
#fleet_stats_popup .stats-kpi-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
/* KPI row moved below the activity chart — separate it from the legend. */
#fleet_stats_popup .stats-kpi-row-below {
    margin-top: 16px;
    padding-top: 16px;
}
/* Fleet KPI cards stack title-above-value (label is first in the DOM). Move
   the 6px gap that lived under the value onto the label, so the spacing
   between the two lines is unchanged — only their order swapped. */
#fleet_stats_popup .stats-kpi-row .stats-kpi-value {
    margin-bottom: 0;
}
#fleet_stats_popup .stats-kpi-row .stats-kpi-label {
    margin-bottom: 6px;
}
#fleet_stats_popup .stats-kpi-row .stats-kpi {
    background: rgb(15 17 27 / 38%);
    border: 1px solid rgba(148, 148, 200, 0.10);
    border-radius: 12px;
    padding: 14px 16px 12px;
}
#fleet_stats_popup .stats-kpi-row .stats-kpi-primary {
    background: transparent;
    border-color: rgba(148, 148, 200, 0.12);
    box-shadow: none;
}
#fleet_stats_popup .stats-kpi-row .stats-kpi-primary .stats-kpi-value {
    color: rgba(34, 211, 238, 0.85);
    font-size: 1.85rem;
}
#fleet_stats_popup .stats-kpi-row .stats-kpi-primary .stats-kpi-label {
    color: rgba(34, 211, 238, 0.65);
}

/* ── Boxed KPI row ── one darker container holding all the KPIs, separated by
   thin vertical lines (instead of each KPI being its own card). Used by the
   per-boat Stats season row + the fleet Stats KPI row. */
.stats-kpi-row-boxed {
    /* User-tuned (14 Jul paste): brighter than .stats-panel, borderless. */
    background: rgb(53 53 73);
    /* border: 1px solid #ffffff2b; */
    border-radius: 14px;
    padding: 0 !important;
    overflow: hidden;
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); */
    gap: 0;
}
/* Per-boat Stats season box — gap from the month chart above it. (Fleet's
   boxed row already gets its top separation from .stats-kpi-row-below.)
   TWO columns, not the base row's three: the box holds exactly two KPIs
   (Utilization · Days rented) — with three 1fr columns the empty third
   merged visually into the Days-rented cell, which read as a way-wider
   container (user bug, 27 Jul). */
#stats_info_container .stats-kpi-row-boxed {
    margin-top: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats-kpi-row-boxed .stats-kpi {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgb(0 0 0 / 27%) !important;
    border-radius: 0 !important;
    padding: 16px 18px !important;
}
.stats-kpi-row-boxed .stats-kpi:first-child {
    border-left: none !important;
}
/* Primary (Avg utilization) sits in the boxed row with no cyan background —
   the cyan text colour alone carries the accent. */
.stats-kpi-row-boxed .stats-kpi-primary {
    background: transparent !important;
    box-shadow: none !important;
}
/* Fleet Stats: only the primary (Avg utilization) stays big. The 3 secondary
   KPIs (Busiest month, Top departure day, Avg days rented) shrink so they read
   as supporting figures, not headlines. */
#fleet_stats_popup .stats-kpi-row-boxed .stats-kpi:not(.stats-kpi-primary) .stats-kpi-value {
    font-size: 0.9rem;
}
/* Phones: the boxed KPI row WRAPS — the border-left dividers then break
   (stray left edge on row 2, no line between rows). Switch to a 2×2 grid
   with a 1px gap; the container bg shows through as clean connected
   dividers on every side (user call). */
@media (max-width: 640px) {
    .stats-kpi-row-boxed {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1px !important;
        background: rgb(64 65 87) !important;
    }
    .stats-kpi-row-boxed .stats-kpi {
        border-left: none !important;
        background: rgb(53 53 73) !important;
        padding: 13px 14px !important;
    }
}

.stats-kpi {
    text-align: left;
}
.stats-kpi-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: #d6dbe7;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}
.stats-kpi-unit {
    font-size: 0.65rem;
    color: #6c7591;
    margin-left: 4px;
    font-weight: 500;
    letter-spacing: 0;
}
/* Benchmark target shown inline after the Utilization headline ("/ 40% target").
   Muted + small so the boat's own % stays dominant; cyan-tinted to read as the
   reference value, not part of the live number. */
.stats-kpi-target {
    font-size: 0.6rem;
    color: rgba(34, 211, 238, 0.6);
    margin-left: 7px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* Benchmarked KPI actual value — tinted by the SAME thresholds as the month
   bars (green at/above target, yellow 75–99%, red under 75%). */
.stats-kpi-val-good { color: #34d399; }
.stats-kpi-val-marginal { color: #facc15; }
.stats-kpi-val-under { color: #f87171; }
.stats-kpi-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c7591;
    font-weight: 500;
}

/* Stat-row — label/value pair, used in "Trip profile", "Safety", "Busiest" */
.stats-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(148, 148, 200, 0.08);
}
.stats-row:last-child { border-bottom: none; }
.stats-row-label {
    font-size: 0.72rem;
    color: #95a1b9;
}
.stats-row-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #c6d3fa;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.stats-row-value-warning { color: #FB923C; }
.stats-row-value-good { color: #34D399; }

/* Time-on-water stack bar (moving vs anchored) */
.stats-stack-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(108, 117, 145, 0.12);
    margin: 6px 0 14px;
}
.stats-stack-bar-fill {
    height: 100%;
    transition: width 0.4s ease;
}
.stats-stack-bar-fill-moving {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.45), rgba(34, 211, 238, 0.75));
}
.stats-stack-bar-fill-anchored {
    background: linear-gradient(90deg, rgba(140, 117, 255, 0.4), rgba(140, 117, 255, 0.6));
}

.stats-stack-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stats-stack-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stats-stack-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.stats-stack-dot-moving { background: #22D3EE; box-shadow: 0 0 6px rgba(34, 211, 238, 0.5); }
.stats-stack-dot-anchored { background: #8c75ff; box-shadow: 0 0 6px rgba(140, 117, 255, 0.5); }
.stats-stack-legend-label {
    font-size: 0.7rem;
    color: #95a1b9;
}
.stats-stack-legend-value {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: #d6dbe7;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Season utilization progress bar */
.stats-season-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(108, 117, 145, 0.12);
    margin-top: 14px;
    overflow: hidden;
}
.stats-season-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.5), #22D3EE);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
    transition: width 0.5s ease;
}
.stats-season-bar-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.65rem;
    color: #6c7591;
    letter-spacing: 0.04em;
}

/* ─── Season-utilization full-width panel (top of Stats) ──────────── */
.stats-panel.stats-panel-fullwidth {
    margin-bottom: 18px;
}

/* Monthly bar chart — 9 columns (Mar→Nov). Each column is a vertical
   stacked track with cyan "rented" portion at the bottom and muted
   "idle" portion above it within the elapsed-days area. Future months
   render as faded columns with no fill. */
.stats-month-chart {
    margin: 22px 0 6px;
}
.stats-month-bars {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}
.stats-month-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.stats-month-value {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(34, 211, 238, 0.85);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.stats-month-value-unit {
    font-size: 0.55rem;
    color: rgba(34, 211, 238, 0.55);
    margin-left: 2px;
    font-weight: 500;
}
.stats-month-track {
    position: relative;
    width: 100%;
    height: 140px;
    background: rgba(108, 117, 145, 0.14);   /* brighter track gray (user call) */
    border: 1px solid rgba(148, 148, 200, 0.12);
    border-radius: 8px;
    overflow: hidden;
}
/* Rented cyan fill — anchored at the bottom of the track, height = days
   rented / 31 (max-days normalization). */
.stats-month-fill-rented {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #22D3EE, rgba(34, 211, 238, 0.55));
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.25);
    transition: height 0.5s ease;
}
/* Benchmark fill tint (compare mode): a month under the predicted target turns
   the bar RED; marginally under turns it YELLOW; at/above predicted turns it
   GREEN (meets the benchmark). No benchmark → default cyan above. */
.stats-month-fill-rented.stats-month-fill-marginal {
    background: linear-gradient(180deg, #facc15, rgba(250, 204, 21, 0.55));
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.25);
}
.stats-month-fill-rented.stats-month-fill-under {
    background: linear-gradient(180deg, #f87171, rgba(248, 113, 113, 0.55));
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.25);
}
.stats-month-fill-rented.stats-month-fill-good {
    background: linear-gradient(180deg, #34d399, rgba(52, 211, 153, 0.55));
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.25);
}
/* CURRENT (in-progress) month — never judged (user call): grayish fill,
   no benchmark line, gray pct label (rule below). */
.stats-month-fill-rented.stats-month-fill-current {
    background: linear-gradient(180deg, rgba(148, 161, 185, 0.75), rgba(148, 161, 185, 0.35));
    box-shadow: none;
}
/* Idle portion — muted slate fill sitting ON TOP of the rented fill
   within the same track, representing days that have already elapsed
   but weren't rented. Future days have neither fill. */
.stats-month-fill-idle {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(108, 117, 145, 0.18);
    transition: height 0.5s ease, bottom 0.5s ease;
}
.stats-month-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #95a1b9;
}
.stats-month-pct {
    font-size: 0.6rem;
    color: rgba(139, 149, 177, 0.9);   /* slightly brighter (user call) */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
/* Future months — track stays empty, label muted. */
.stats-month-col-future .stats-month-value,
.stats-month-col-future .stats-month-label,
.stats-month-col-future .stats-month-pct {
    color: rgba(108, 117, 145, 0.45);
}
.stats-month-col-future .stats-month-track {
    opacity: 0.65;   /* brighter future-month gray (user call) */
}
/* Current month — highlight the label subtly (cyan) so the user knows which
   one is in progress. (The "NOW" chip was removed — it broke the phone layout;
   the current month is now benchmarked like any other.) */
.stats-month-col-current .stats-month-track {
    border-color: rgba(34, 211, 238, 0.25);
}
.stats-month-col-current .stats-month-label {
    color: #22D3EE;
}

/* ── Month-bar hover tooltip (replaces the Rented/Idle legend) ──
   Body-teleported + position:fixed (hard rule #7) so it escapes the popup's
   overflow/scroll clipping. Built + positioned by ensureMonthBarTooltip()
   (Stats.js); one delegated binding serves per-boat, fleet AND the fleet
   boat-expand mini charts. The Rented value carries the SAME tone as the
   bar fill (cyan plain / green-yellow-red when benchmarked); the benchmark
   row echoes the dashed reference line's purple. */
.stats-month-tip {
    position: fixed;
    z-index: 600000;
    display: none;
    min-width: 132px;
    padding: 10px 12px;
    background: rgba(20, 22, 34, 0.96);
    border: 1px solid #9494c833;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(64, 87, 126, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.stats-month-tip-title {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.7);
    margin-bottom: 7px;
}
.stats-month-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 0.68rem;
    color: #95a1b9;
    line-height: 1.7;
}
.stats-month-tip-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.stats-month-tip-val-plain { color: #22D3EE; }
.stats-month-tip-val-good { color: #34d399; }
.stats-month-tip-val-marginal { color: #facc15; }
.stats-month-tip-val-under { color: #f87171; }
.stats-month-tip-val-idle { color: #8a94ad; }
.stats-month-tip-bm {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 0.68rem;
    color: #95a1b9;
    line-height: 1.7;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(168, 132, 255, 0.4);
}
.stats-month-tip-val-bm { color: rgba(168, 132, 255, 0.95); }

/* On narrower screens, tighten the gap so columns still fit. */
@media (max-width: 900px) {
    .stats-month-bars {
        gap: 6px;
    }
    .stats-month-track {
        height: 110px;
    }
}

/* ─── Compare-mode pill (Solo / Normal / Ideal) ─────────────────────
   Sits at the right end of the Season Utilization panel header.
   Three tabs: the active one carries a faint cyan glow, the others
   are muted slate. Matches the Spacey-Marine surface language. */
/* "Benchmark" caption before the toggle — frames the pill as "compare
   against a season level", not boat grades. Pushed to the right so the
   caption + toggle sit together at the end of the header. */
.stats-compare-caption {
    margin-left: auto;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6c7591;
    flex-shrink: 0;
}
.stats-compare-toggle {
    display: inline-flex;
    background: rgb(10 11 19 / 72%);   /* darker (user call) */
    border: 1px solid rgba(148, 148, 200, 0.16);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.stats-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Taller pills on DESKTOP too — matches the fuller mobile sizing
       (user call, 27 Jul; was 5px 11px). Benchmark + sort bars share this. */
    padding: 8px 13px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: #8b95b1;   /* brighter idle label + icons (user call) */
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    font-family: inherit;
}
.stats-compare-btn:hover { color: #aeb7d0; }
.stats-compare-btn-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.stats-compare-btn-active {
    color: rgba(34, 211, 238, 0.95);
    background: rgba(34, 211, 238, 0.1);
}

/* ─── Delta chips (±N) — appear next to every stat value when a
       benchmark is active. Three states from _verdict():
        good (≥target)        — cyan/green
        warn (≥75% of target) — orange
        bad  (<75% of target) — red */
.stats-delta {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    line-height: 1.5;
}
.stats-delta-good {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.stats-delta-warn {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
}
.stats-delta-bad {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
}
.stats-delta-neutral {
    color: #95a1b9;
    background: rgba(149, 161, 185, 0.08);
    border: 1px solid rgba(149, 161, 185, 0.2);
}

/* ─── Benchmark reference line inside month-bar tracks ───
   Drawn as a horizontal dashed magenta-ish line at the benchmark's
   month_days[idx] / 31 height. Reads as "this is where the target
   sits" alongside the actual cyan fill. */
.stats-month-bm-line {
    position: absolute;
    left: -2px;
    right: -2px;
    height: 0;
    border-top: 2px dashed rgba(168, 132, 255, 0.85);
    box-shadow: 0 0 4px rgba(168, 132, 255, 0.45);
    pointer-events: none;
    z-index: 2;
}

/* When the bar value is in benchmark verdict, tint the days-rented
   numeric on top of the column. */
.stats-month-value-good { color: #34d399 !important; }
.stats-month-value-current { color: #95a1b9 !important; }
.stats-month-value-warn { color: #fb923c !important; }
.stats-month-value-bad  { color: #f87171 !important; }

/* ============================================================================
   Fleet Stats popup — top-menu Stats button
   ============================================================================ */

/* Fleet Stats popup uses the same header pattern as fleet trips +
   fleet alerts: default popup pattern (absolute header, content at
   top:80px) with an 80px-tall `fleet_stats_popup_menu` div painting
   the dark band. Title + season label sit inside that menu. */
/* The legacy .popup_header is height:0 + position:absolute, so an absolutely-
   positioned close button centered with top:50% lands at the TOP edge (50% of 0
   height) and escapes the header — the recurring "close button outside the
   popup" bug. Give the ACTUAL .popup_header the real 80px height + relative
   positioning so the close button (its absolute child) centers IN the header
   band at every breakpoint. (The inner _menu div paints the same band.) */
.fleet_stats_popup .popup_header {
    position: relative;
    height: 80px;
}
.fleet_stats_popup .fleet_stats_popup_menu {
    /* user paste, 30 Jul: + border-bottom */
    width: 100%;
    height: 80px;
    position: relative;
    border-bottom: 1px solid #0000001c;
    background: #2b2b42;
}
.fleet-stats-popup-header-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 80px;
    padding: 0 24px;
}
.fleet-stats-popup-header-icon {
    width: 18px;
    height: 18px;
    color: rgba(34, 211, 238, 0.85);
}
.fleet-stats-popup-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #d6dbe7;
    letter-spacing: 0.01em;
}
.fleet-stats-popup-header-meta {
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: rgba(34, 211, 238, 0.8);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fleet-stats-popup-content {
    padding: 40px;
    background: #4a4f69;   /* user call, 7 Aug (was #3d4056) — matches boat-details Stats tab */
    overflow-y: auto;
    height: calc(100% - 80px);
}

/* .fleet-stats-loader-container now uses the canonical .arc-loader (full-fill
   overlay). Positioning/centring/visibility come from .arc-loader; nothing
   extra needed here. */

/* ─── Sort pill (Best / Worst / A–Z) ─────────────────────── */
.fleet-stats-sort-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
}
.fleet-stats-sort-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6c7591;
}
/* Phones: the picker speaks for itself — drop the "Sort" label (user call). */
@media (max-width: 640px) {
    .fleet-stats-sort-label { display: none; }
}
/* Sort toggle (Best / Worst / A–Z) — SAME component as the benchmark
   selector: the markup wears .stats-compare-toggle / .stats-compare-btn
   (including the mobile full-width flex-1 rules), .fleet-stats-sort-btn
   remains only as the JS delegation hook. The old duplicate chrome — with
   its inset-ring active style ("outline") — is gone. */

/* ─── Per-boat list rows ─────────────────────── */
.fleet-stats-boats-panel { margin-top: 40px; }
.fleet-stats-boat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fleet-boat-row {
    background: rgb(53 53 73 / 48%);
    border: 1px solid rgb(184 175 255 / 6%);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Hover = slight background lift (the cyan border/glow pair is retired — user
   paste). An OPENED row holds the same lifted colour for as long as it's
   expanded (user call, 29 Jul) — hover is a preview of the opened state. */
.fleet-boat-row:hover,
.fleet-boat-row-open {
    /* user paste, 7 Aug (retuned for the new #4a4f69 content bg) */
    background: #42465f;
}

.fleet-boat-row-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
}

.fleet-boat-grade {
    flex: 0 0 38px;
    text-align: center;
    padding: 6px 0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.fleet-boat-grade-good {
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.fleet-boat-grade-warn {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
}
.fleet-boat-grade-bad {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

/* Boat-type icon in the stats per-boat row — the same SVG icons as the fleet
   list table (those rules are scoped to `td`, so re-declare here for the div). */
.fleet-boat-row-typeicon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
}
.fleet-boat-row-typeicon.type_sailboat   { background-image: url(../images/icons/type_sailboat.svg);   background-size: 24px 24px; }
.fleet-boat-row-typeicon.type_yacht      { background-image: url(../images/icons/type_yacht.svg);      background-size: 24px 24px; }
.fleet-boat-row-typeicon.type_catamaran  { background-image: url(../images/icons/type_catamaran.svg);  background-size: 22px 22px; }
.fleet-boat-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #c1c8da;
    text-transform: uppercase;
    letter-spacing: 0.07rem;
}
.fleet-boat-row-spacer { flex: 1; }

.fleet-boat-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 20px;
    border-radius: 15px;
    background: rgb(15 16 24 / 46%);
    border: 1px solid rgb(161 170 255 / 8%);
    color: #95a1b9;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.fleet-boat-stat-icon { width: 11px; height: 11px; }
/* Benchmark "/ 35%" reference figure inside the activity chip — muted, so the
   boat's actual % stays the dominant read. */
.fleet-boat-stat-bm { color: inherit; opacity: 0.55; font-weight: 600; margin-left: -1px; }
.fleet-boat-stat-good   { color: #34d399; border-color: rgb(52 211 153 / 11%);  background: #34d39917; }
.fleet-boat-stat-lime   { color: #a3e635; border-color: rgb(163 230 53 / 11%);  background: #a3e63517; }
.fleet-boat-stat-yellow { color: #facc15; border-color: rgb(250 204 21 / 11%);  background: #facc1517; }
.fleet-boat-stat-warn   { color: #fb923c; border-color: rgb(251 146 60 / 11%);  background: #fb923c17; }
.fleet-boat-stat-bad    { color: #f87171; border-color: rgb(248 113 113 / 11%); background: #ff6a6a17; }

.fleet-boat-row-chev {
    width: 14px;
    height: 14px;
    color: #6c7591;
    transition: transform 0.18s ease;
}
.fleet-boat-row-open .fleet-boat-row-chev { transform: rotate(180deg); }

.fleet-boat-row-expand {
    padding: 0 16px 18px;
    border-top: 1px solid rgba(148, 148, 200, 0.08);
}
.fleet-boat-expand-inner {
    padding-top: 14px;
}
.fleet-boat-expand-extra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 22px;
    margin-top: 14px;
}
.fleet-boat-expand-stat {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(148, 148, 200, 0.08);
    font-size: 0.72rem;
    color: #95a1b9;
}
.fleet-boat-expand-stat span:last-child {
    color: #d6dbe7;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Phone tier per the agreed breakpoint convention (≤640). Was a stray 700px. */
@media (max-width: 640px) {
    /* Tighter side padding so the cards get more width. */
    .fleet-stats-popup-content {
        padding: 45px 10px 30px;
    }

    /* Sort pills: drop the word "first" so "Best first" / "Worst first" don't
       wrap to two lines — leaves "Best" / "Worst" / "A–Z". */
    .fleet-sort-word-first { display: none; }

    /* Benchmark pill: shorten "Low season" → "Low" so the toggle fits. */
    .stats-compare-word-season { display: none; }

    /* Per-boat row → a SINGLE line: type icon · name · util% · chevron.
       The secondary stats (trips, days) are hidden on phone; utilization is
       the headline metric and stays. No wrap, name truncates if needed. */
    .fleet-boat-row-summary {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .fleet-boat-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fleet-boat-row-spacer { display: none; }
    .fleet-boat-stat-secondary { display: none; }
    .fleet-boat-stat-util { flex-shrink: 0; }
    .fleet-boat-expand-extra {
        grid-template-columns: 1fr;
    }

    /* Fleet KPI summary: 4 narrow columns crush the labels into tall stacks
       on a phone. Drop to a 2×2 grid so each card has room for its label. */
    #fleet_stats_popup .stats-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* KPI values shrink on phones so they don't dominate the narrow cards. */
    .stats-kpi-value {
        font-size: 1rem;
    }
    #fleet_stats_popup .stats-kpi-row .stats-kpi-primary .stats-kpi-value {
        font-size: 2rem;        /* Avg utilization — THE headline stat, reads
                                   clearly bigger than the other three cards */
    }

    /* Month bars: the per-month day value ("27d") above each bar is noise on
       a phone-width chart — the bar + % below tell the story. Hidden on BOTH
       the fleet chart and the per-boat Stats chart (shared classes). */
    .stats-month-value {
        display: none;
    }

    /* Benchmark toggle (Off / Low / Normal / Good) overflowed off the right
       edge — the whole header sat on one line. Wrap the header so the title +
       date are row 1, "Benchmark" caption row 2, and the pills wrap onto their
       own row instead of running off-screen. Mirrors the per-boat Stats popup
       fix. */
    #fleet_stats_popup .stats-panel-header {
        flex-wrap: wrap;
        gap: 6px 10px;
    }
    #fleet_stats_popup .stats-panel-header-meta {
        margin-left: auto;            /* keep date pinned right on row 1 */
        font-size: 0.55rem;
    }
    #fleet_stats_popup .stats-compare-caption-row {
        display: inline-flex;         /* caption + info icon on ONE row */
        align-items: center;
        gap: 6px;
        flex-basis: 100%;             /* the pair starts its own row */
    }
    #fleet_stats_popup .stats-compare-caption {
        margin-left: 0;
    }
    #fleet_stats_popup .stats-compare-toggle {
        margin-left: 0;
        flex-wrap: wrap;              /* pills wrap instead of overflowing */
        padding: 2px;
        gap: 3px;
        width: 100%;                  /* span the panel's full width */
    }
    #fleet_stats_popup .stats-compare-btn {
        padding: 4px 9px;
        font-size: 0.58rem;
        flex: 1 1 0;                  /* pills share the full-width row evenly */
        justify-content: center;
    }
    #fleet_stats_popup .stats-compare-btn [data-lucide],
    #fleet_stats_popup .stats-compare-btn svg {
        width: 11px;
        height: 11px;
    }
}

/* ============================================================================
   Fleet popups — Alerts + Trips fleet popups in Spacey-Marine style
   ============================================================================ */

/* Popup background.
   trips_fleet_popup is OUT — owned by the .arc-popup shell now.
   Alerts still uses legacy markup until migrated. */
.popup.alerts_fleet_popup {
    background: #323447 !important;
}

/* Popup header — translucent surface, no chunky slab */
.alerts_fleet_popup .alerts_fleet_popup_menu {
    background: rgba(25, 27, 39, 0.55) !important;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12);
    backdrop-filter: blur(6px);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Each nested wrapper inside the header must let the search container
   take the full vertical space so it can centre instead of dangling. */
.alerts_fleet_popup .alerts_fleet_popup_menu .portal-intro-menus-container {
    height: 100% !important;
    line-height: normal !important;
    float: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.alerts_fleet_popup .alerts_fleet_popup_menu .portal-intro-menus-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Search input — turn the default DataTables filter into a quiet inline search */
.alerts_fleet_search_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alerts_fleet_search_container input,
.alerts_fleet_popup .dataTables_filter input {
    background: rgba(15, 17, 27, 0.6) !important;
    border: 1px solid rgba(148, 148, 200, 0.15) !important;
    border-radius: 10px !important;
    color: #d6dbe7 !important;
    font-size: 0.78rem !important;
    padding: 10px 16px !important;
    width: 320px !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.alerts_fleet_search_container input::placeholder,
.alerts_fleet_popup .dataTables_filter input::placeholder {
    color: #6c7591;
}
.alerts_fleet_search_container input:focus,
.alerts_fleet_popup .dataTables_filter input:focus {
    outline: none !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    background: rgba(15, 17, 27, 0.8) !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.08);
}
.alerts_fleet_popup .dataTables_filter label {
    color: transparent !important;
}

/* Tabs in trips_fleet_popup (All / Sailing / Finished) — pill bar */
#trips_fleet_popup .classic_navbar {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid rgba(148, 148, 200, 0.15) !important;
    border-radius: 12px !important;
    height: 40px !important;
    width: auto !important;
    display: inline-flex !important;
    padding: 4px;
    margin: 0 auto 22px !important;
    overflow: hidden;
}
#trips_fleet_popup .classic_navbar_item {
    background: transparent !important;
    color: #95a1b9 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none !important;
    padding: 0 22px !important;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
#trips_fleet_popup .classic_navbar_item:hover {
    background: rgba(34, 211, 238, 0.05) !important;
    color: #22D3EE !important;
    box-shadow: none !important;
}
#trips_fleet_popup .classic_navbar_item.classic_navbar_item_selected,
#trips_fleet_popup .classic_navbar_item.classic_navbar_item_selected:hover {
    background: rgba(34, 211, 238, 0.12) !important;
    color: #22D3EE !important;
    box-shadow: none !important;
}
#trips_fleet_popup .classic-navbar-trips-count {
    color: rgba(108, 117, 145, 0.9) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
}
#trips_fleet_popup .classic_navbar_item_selected .classic-navbar-trips-count {
    color: rgba(34, 211, 238, 0.8) !important;
}
.trips_classic_navbar {
    display: flex;
    justify-content: center;
}

/* ─── Tables (Alerts fleet + Trips fleet) ─────────────────────────────── */
.alerts_fleet_popup #alerts_list_table.dataTable,
.trips_fleet_popup #reports_list_table.dataTable {
    background: rgb(25 27 39 / 56%) !important;
    border: 1px solid rgba(148, 148, 200, 0.12) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 25px rgba(64, 87, 126, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
    color: #95a1b9 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* Headers */
.alerts_fleet_popup #alerts_list_table.dataTable thead th,
.trips_fleet_popup #reports_list_table.dataTable thead th {
    background: rgba(15, 17, 27, 0.4) !important;
    color: rgba(34, 211, 238, 0.65) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    padding: 16px 14px !important;
    border-bottom: 1px solid rgba(148, 148, 200, 0.12) !important;
    border-top: none !important;
    text-align: left !important;
}
.alerts_fleet_popup #alerts_list_table.dataTable thead th:first-child,
.trips_fleet_popup #reports_list_table.dataTable thead th:first-child {
    padding-left: 26px !important;
}
.alerts_fleet_popup #alerts_list_table.dataTable thead th:last-child,
.trips_fleet_popup #reports_list_table.dataTable thead th:last-child {
    padding-right: 26px !important;
}

/* Body cells */
.alerts_fleet_popup #alerts_list_table.dataTable tbody td,
.trips_fleet_popup #reports_list_table.dataTable tbody td {
    background: transparent !important;
    color: #b3bfd9 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 16px 14px !important;
    border-bottom: 1px solid rgba(148, 148, 200, 0.08) !important;
    border-top: none !important;
    font-variant-numeric: tabular-nums;
    text-align: left !important;
}
.alerts_fleet_popup #alerts_list_table.dataTable tbody td:first-child,
.trips_fleet_popup #reports_list_table.dataTable tbody td:first-child {
    padding-left: 26px !important;
}
.alerts_fleet_popup #alerts_list_table.dataTable tbody td:last-child,
.trips_fleet_popup #reports_list_table.dataTable tbody td:last-child {
    padding-right: 26px !important;
}

/* Row hover */
.alerts_fleet_popup #alerts_list_table.dataTable tbody tr,
.trips_fleet_popup #reports_list_table.dataTable tbody tr {
    background: transparent !important;
    transition: background 0.18s ease;
}
.alerts_fleet_popup #alerts_list_table.dataTable tbody tr:hover,
.trips_fleet_popup #reports_list_table.dataTable tbody tr:hover {
    background: rgba(34, 211, 238, 0.04) !important;
    color: #d6dbe7 !important;
    cursor: pointer;
}
.alerts_fleet_popup #alerts_list_table.dataTable tbody tr:last-child td,
.trips_fleet_popup #reports_list_table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Boat-type icon — fade and shrink slightly, use cyan tint.
   FLEET TRIPS table is intentionally excluded — per request its
   left-column boat icons keep their original colors (no tint). */
.alerts_fleet_popup #alerts_list_table .boat_type_icon,
.alerts_fleet_popup #alerts_list_table .type_sailboat,
.alerts_fleet_popup #alerts_list_table .type_catamaran,
.alerts_fleet_popup #alerts_list_table .type_yacht,
.alerts_fleet_popup #alerts_list_table .type_superyacht {
    filter: brightness(0) saturate(100%) invert(73%) sepia(48%) saturate(2438%) hue-rotate(149deg) brightness(101%) contrast(91%);
    opacity: 0.7;
}

/* Group-header (month divider) for fleet trips — sits ABOVE its rows as
   a clearly-marked section title. Translucent cyan-tinted background, a
   leading cyan accent strip, and a hairline at the bottom to read as
   "everything below me belongs to this month". */
.trips_fleet_popup #reports_list_table.dataTable tr.group-header {
    background: transparent !important;
    pointer-events: none;
}
.trips_fleet_popup #reports_list_table.dataTable tr.group-header td {
    background: rgba(34, 211, 238, 0.05) !important;
    color: rgba(34, 211, 238, 0.85) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    padding: 14px 26px !important;
    border-top: 1px solid rgba(34, 211, 238, 0.18) !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.18) !important;
    box-shadow: inset 3px 0 0 #22D3EE;
}

/* Selected (active) row */
.trips_fleet_popup #reports_list_table.dataTable tr.trip_selected,
.trips_fleet_popup #reports_list_table.dataTable tbody tr.trip_selected:hover {
    background: rgba(34, 211, 238, 0.08) !important;
    color: #d6dbe7 !important;
    box-shadow: inset 3px 0 0 #22D3EE;
}

/* Distance/duration accent in fleet trips table — right-aligned for the
   fleet trips view (the column is the main metric the eye scans). */
.trips_fleet_popup #reports_list_table.dataTable td.trip-distance-style,
.trips_fleet_popup #reports_list_table.dataTable th.distance-col {
    color: #22D3EE !important;
    font-weight: 600 !important;
    text-align: right !important;
}
.trips_fleet_popup #reports_list_table.dataTable td.trip-time-style,
.trips_fleet_popup #reports_list_table.dataTable th.duration-col {
    color: #8c75ff !important;
    font-weight: 600 !important;
    text-align: right !important;
}

/* Status pill — borderless soft-fill, icon sits INSIDE the pill */
.alerts_fleet_popup #alerts_list_table .reports_status,
.trips_fleet_popup #reports_list_table .reports_status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    line-height: 1;
    float: none !important;
    border: none !important;
    text-align: left !important;
}
.trips_fleet_popup #reports_list_table .reports_status_finished {
    background: rgba(52, 211, 153, 0.1);
    color: rgba(52, 211, 153, 0.9);
}
.trips_fleet_popup #reports_list_table .reports_status_ongoing {
    color: rgba(34, 211, 238, 0.9);
}
.trips_fleet_popup #reports_list_table .reports_status_icon {
    width: 12px !important;
    height: 12px !important;
    float: none !important;
    display: inline-block !important;
    flex-shrink: 0;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle;
    margin: 0 !important;
}
.trips_fleet_popup #reports_list_table .reports_status .alarm_type_text {
    margin-left: 0 !important;
    min-width: 0 !important;
    color: inherit !important;
}

/* Alert-status pill (shield-check / alert-triangle) — borderless, centered */
.alerts_fleet_popup #alerts_list_table .alert_status_cell,
.trips_fleet_popup #reports_list_table .alert_status_cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
    /* Static width so the duration pill is the same size as the "Active"
       pill regardless of the value inside. */
    min-width: 78px;
    padding: 0 12px;
    border-radius: 999px;
    line-height: 1;
    font-size: 0.7rem;
    font-weight: 600;
    border: none !important;
}
/* Duration / status column right-aligned (matches the boat-details table). */
.alerts_fleet_popup #alerts_list_table.dataTable tbody td:nth-child(5),
.alerts_fleet_popup #alerts_list_table.dataTable thead th:nth-child(5) {
    text-align: right !important;
}
.alerts_fleet_popup #alerts_list_table .alert_status_critical,
.trips_fleet_popup #reports_list_table .alert_status_critical {
    background: rgba(248, 113, 113, 0.1);
    color: #F87171 !important;
    font-weight: 700 !important;
}
/* Duration value renders as a yellow pill (same shape as the red "Active"
   pill). The duration cell carries .alert_status_warning. */
.alerts_fleet_popup #alerts_list_table .alert_status_warning {
    background: rgba(251, 191, 36, 0.12);
    color: #FBBF24 !important;
    font-weight: 700 !important;
}

/* Per-boat alerts table (boat details) — same modern red/yellow pill
   treatment as the fleet popup. Overrides the old .alerts-container
   float:right / width:120px block via higher specificity. */
/* Critical "Active" pill dot — match the fleet popup's small glowing dot. */
.alerts_fleet_popup #alerts_list_table .alert_status_resolved,
.trips_fleet_popup #reports_list_table .alert_status_resolved {
    background: rgba(52, 211, 153, 0.08);
    color: #34D399 !important;
}
/* The "Alerts" column itself: keep the cell centered so the pill sits in
   the middle, not glued to the left edge. */
.trips_fleet_popup #reports_list_table.dataTable tbody td:nth-child(5),
.trips_fleet_popup #reports_list_table.dataTable thead th:nth-child(5) {
    text-align: center !important;
}

/* Lucide alert-status icons inside the pill (shield-check / alert-triangle) */
.alerts_fleet_popup #alerts_list_table .alert-status-lucide,
.trips_fleet_popup #reports_list_table .alert-status-lucide {
    width: 12px;
    height: 12px;
    stroke-width: 2;
    flex-shrink: 0;
}
.trips_fleet_popup #reports_list_table .alert_status_resolved .alert-status-lucide {
    color: #34D399;
}
.trips_fleet_popup #reports_list_table .alert_status_critical .alert-status-lucide {
    color: #F87171;
}

/* Legacy alarm_state_icon fallback (alerts table still uses these for some rows) */
.alerts_fleet_popup #alerts_list_table .alarm_state_icon.alarm_state_icon_resolved {
    width: 14px !important;
    height: 14px !important;
    background-image: url(../images/icons/shield.svg) !important;
    background-size: 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: brightness(0) saturate(100%) invert(75%) sepia(31%) saturate(599%) hue-rotate(105deg) brightness(95%) contrast(89%);
    opacity: 0.85;
    float: none !important;
}
.alerts_fleet_popup #alerts_list_table .alarm_state_icon.alarm_state_icon_critical {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
    background: #F87171 !important;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
    float: none !important;
    background-image: none !important;
}

/* Last-col chevron */
.alerts_fleet_popup #alerts_list_table.dataTable td.cell-arrow-down,
.trips_fleet_popup #reports_list_table.dataTable td.cell-arrow-down {
    color: rgba(148, 148, 200, 0.4) !important;
}

/* Unseen mark (alert table) */
.alerts_fleet_popup #alerts_list_table .alert_unseen_mark {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F87171 !important;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}

/* Empty / processing / no-results */
.alerts_fleet_popup .dataTables_empty,
.trips_fleet_popup .dataTables_empty {
    color: rgba(148, 148, 200, 0.45) !important;
    background: transparent !important;
    padding: 40px !important;
    font-size: 0.78rem !important;
    text-align: center !important;
    font-style: italic;
}

/* DataTables pagination — quiet pills */
.alerts_fleet_popup .dataTables_paginate,
.trips_fleet_popup .dataTables_paginate {
    margin-top: 22px !important;
    text-align: center;
}
.alerts_fleet_popup .dataTables_paginate .paginate_button,
.trips_fleet_popup .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid rgba(148, 148, 200, 0.15) !important;
    color: #95a1b9 !important;
    padding: 6px 12px !important;
    margin: 0 3px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.alerts_fleet_popup .dataTables_paginate .paginate_button:hover,
.trips_fleet_popup .dataTables_paginate .paginate_button:hover {
    background: rgba(34, 211, 238, 0.06) !important;
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.25) !important;
}
.alerts_fleet_popup .dataTables_paginate .paginate_button.current,
.trips_fleet_popup .dataTables_paginate .paginate_button.current {
    background: rgba(34, 211, 238, 0.12) !important;
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
}

/* DataTables buttons (PDF / Excel / CSV exports) */
.trips_fleet_popup .dt-buttons {
    margin-bottom: 16px;
    text-align: right;
}
.trips_fleet_popup .dt-buttons .dt-button {
    background: rgba(15, 17, 27, 0.6) !important;
    border: 1px solid rgba(148, 148, 200, 0.15) !important;
    color: #95a1b9 !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 4px !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.trips_fleet_popup .dt-buttons .dt-button:hover {
    background: rgba(34, 211, 238, 0.06) !important;
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.25) !important;
}

/* Container padding around the tables */
.alerts_fleet_popup .alerts-container,
.trips_fleet_popup .trips-container {
    padding: 30px 50px 60px !important;
}
.trips_fleet_popup .trips-table-container {
    margin-top: 0;
}


/* ════════════════════════════════════════════════════════════════════
   PHONE COMPACTION — boat details popup (≤640px)
   Single appended block so all phone-specific overrides live in one
   place. Anything desktop-sized that's been flagged as too big or
   misaligned on phones gets re-sized here. Loads after every prior
   rule so specificity ties resolve in our favor.
   ════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 640px) {

    /* ── Boat details popup HEADER (Live / Trips / Alerts / Stats) ───
       Header sits at popup-y 16 (just under the drag handle) and is
       56px tall. Content starts at popup-y 76. Tabs render inside the
       header; close button is repositioned BELOW the handle so it
       doesn't overlap the handle strip. Z-index is elevated so the
       header beats the content area's stacking — clicks on tabs must
       not get swallowed by popup_content. */
    .charter_details_popup .popup_header {
        height: 56px !important;
        z-index: 200000 !important;
        /* Beat the .popup_content rule that sits below in z-stack — the
           content has z auto but later in DOM, so we raise the header. */
        background: transparent;
        pointer-events: auto;
    }
    .charter_details_popup .boat_Details_popup_menu {
        height: 56px;
        display: flex;
        align-items: center;
        /* Tabs flush-left on phones; the close X lives on the right. Leave
           room on the right so tabs never collide with the 45px X button. */
        justify-content: flex-start;
        padding-left: 14px;
        padding-right: 64px;
        position: relative;
        z-index: 1;
    }
    .charter_details_popup .portal-intro-menus-container {
        margin: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .charter_details_popup .portal-intro-menus-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
    }
    /* Hide the bare-text "|" dividers between tab buttons on phones. */
    .charter_details_popup .portal-intro-menus-dividers {
        display: none !important;
    }
    .charter_details_popup .menu-buttons {
        height: 44px;
        line-height: 44px;
        padding: 0 12px;
        margin: 0;
        font-size: 0.65rem;
        letter-spacing: 0.6px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Ensure the tab buttons sit in their own positioned stacking
           context so the click hit-test always lands on them, never on
           an overlapping sibling. */
        position: relative;
        z-index: 2;
        cursor: pointer;
    }
    /* Close X (standardized arc Lucide-X button) — centered in the header band
       on phones (top:50% + translateY(-50%), not a hardcoded top). Smaller 40px
       on phones for EVERY popup (was boat-details-only — one design, one size;
       user call). */
    .popup_close_button.arc-popup-close {
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
    }
    /* ── LIVE tab — redesigned layout for phones ──────────────────────
       Boat Systems: Navigation full-width on row 1, Tracker + Internet
                     side-by-side on row 2 (each a 50% column).
       Battery Bank: all 4 slots in a single tight row.
       Engine + Safety: side-by-side 2-col (1fr each), tightly packed.

       The .charter_details_popup prefix is on every rule to win
       specificity over the desktop systems-grid-3col base. */
    .charter_details_popup #sensors_info_container .systems-panel,
    .charter_details_popup #sensors_info_container .battery-bank-container {
        padding: 10px 10px 12px !important;
        margin-bottom: 15px !important;
    }

    /* Reorder Live tab sections on phones so Battery Bank sits at the
       top (highest-glance value) above Boat Systems and Engine+Safety.
       Make the wrapper a flex column and use `order` on its children;
       desktop layout is untouched (no flex on >640px). */
    .charter_details_popup #sensors_info_container {
        display: flex !important;
        flex-direction: column !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-section {
        order: 1 !important;
    }
    .charter_details_popup #sensors_info_container .systems-panel-section {
        order: 2 !important;
    }
    .charter_details_popup #sensors_info_container .engine-safety-row {
        order: 3 !important;
    }
    /* Kill the sections' own vertical gutters (.padding50 = 20px bottom) —
       stacked on the panels' 8px margin-bottom they doubled the gap between
       Battery Bank / Boat Systems (Navigation) / Engine+Safety. The panels'
       margin is the single source of vertical rhythm; side gutters stay. */
    .charter_details_popup #sensors_info_container .battery-bank-section,
    .charter_details_popup #sensors_info_container .systems-panel-section,
    .charter_details_popup #sensors_info_container .engine-safety-row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* …but the OUTER edges keep a gutter matching that 8px rhythm: Battery
       Bank is the FIRST section (order 1) and the zeroing above left it flush
       against the content edge — give it a top gap equal to the panels'
       margin-bottom. Engine+Safety (cruise / bilge / impact) is the LAST and
       its panels carry margin:0, so the section provides the closing gap. */
    .charter_details_popup #sensors_info_container .battery-bank-section {
        padding-top: 15px !important;
    }
    .charter_details_popup #sensors_info_container .engine-safety-row {
        padding-bottom: 15px !important;
    }

    /* Boat Systems — Navigation full-width, then Tracker | Internet.
       Tracker is narrower (0.7fr) since its 2 rows are short; Internet
       gets the wider 1fr column for the wifi sensor card. */
    /* Post-swap mobile layout (Cruise↔Tracker): the grid is now Navigation +
       Cruise + Internet (Tracker moved to the bottom row beside Safety). All
       stack full-width, one column; Cruise hoisted to the TOP via order (user
       call). The OLD rule here was the pre-swap 2-col named-area layout
       (nav / tracker+internet) — cruise had no grid-area, so it auto-placed
       at the BOTTOM and internet floated into the old tracker column. */
    .charter_details_popup #sensors_info_container .systems-grid-3col {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 12px !important;
    }
    .charter_details_popup #sensors_info_container .systems-grid-3col > [data-systems-group] {
        grid-area: auto !important;
        grid-column: auto !important;
    }
    .charter_details_popup #sensors_info_container .systems-grid-3col > [data-systems-group="cruise"] {
        order: -1 !important;
    }

    /* Engine + Safety side-by-side (1fr each) — was 2fr/1fr on desktop.
       align-items: stretch (grid default) + explicit height: 100% on
       the two children locks them to identical heights regardless of
       inner content. Without this, the panels' implicit `align-self`
       can vary if either has its own margin/min-height interfering. */
    /* Phones: Cruise takes the FULL width; Bilge + Impact stack UNDER it
       (user call — the side-by-side squeeze read cramped). */
    /* ── Live tab tap affordances (user call, 15 Aug): little chevrons that
       make the clickable sensors READ as clickable on phones — battery
       slots + impact/bilge get a down-arrow underneath, Cruise a right-
       arrow beside "kn". Desktop never shows them (base rule below the
       media blocks keeps display:none); EMPTY battery slots never carry
       the markup, and the belt-and-braces :is() guard hides it if a slot
       ever flips to the empty state with the chevron still inside. */
    .charter_details_popup #sensors_info_container .live-click-chev {
        display: inline-flex;
        width: 14px;
        height: 14px;
        color: #9daee3;   /* user paste, 20 Aug (was #6c7591) */
        opacity: 0.75;
        flex-shrink: 0;
    }
    .charter_details_popup #sensors_info_container .live-click-chev-down {
        margin: 0 auto;   /* was 6px top — user call, 18 Aug */
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .live-click-chev-right {
        align-self: center;
        margin-left: auto;   /* pins to the card's right edge in every state */
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty .live-click-chev {
        display: none !important;
    }
    /* Internet sensor card: same top-packing as the safety cards, so the
       arrow hugs "Tap for details" instead of being space-between-spread
       to the card bottom (user call, 18 Aug). */
    .charter_details_popup #sensors_info_container .systems-internet-sensor {
        justify-content: flex-start;
        gap: 4px;
    }

    .charter_details_popup #sensors_info_container .engine-safety-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    /* Panel title not needed on phones — same treatment as the Battery Bank
       header below. */
    .charter_details_popup #sensors_info_container .engine-panel-header {
        display: none !important;
    }
    /* Tracker on phones: the outer panel header hides with the rest — the
       INNER card header (icon + Tracker + dot, like the other cards) takes
       over (user call). */
    .charter_details_popup #sensors_info_container .tracker-card .tracker-card-inner-header {
        display: flex !important;
    }
    .charter_details_popup #sensors_info_container .engine-safety-grid > .engine-panel,
    .charter_details_popup #sensors_info_container .engine-safety-grid > .safety-panel {
        height: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Make sure the inner content area of each panel actually fills
       the panel — so when Safety's inner safety-grid is shorter than
       Engine's engine-card, both panels still visually match by the
       inner content stretching. */
    .charter_details_popup #sensors_info_container .engine-safety-grid > .engine-panel > .engine-card,
    .charter_details_popup #sensors_info_container .engine-safety-grid > .safety-panel > .systems-safety-grid {
        flex: 1 1 auto !important;
    }

    /* Any other 2-col grids (Safety inner cards) collapse to single col */
    .charter_details_popup #sensors_info_container .systems-grid-2col {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Card chrome across all systems-groups (user paste: 20px). */
    .charter_details_popup #sensors_info_container .systems-group {
        padding: 20px !important;
    }
    .charter_details_popup #sensors_info_container .systems-group-header {
        padding-bottom: 6px !important;
        margin-bottom: 6px !important;
        font-size: 0.68rem !important;   /* bumped again — outdoor readability */
    }
    .charter_details_popup #sensors_info_container .systems-stat-row {
        padding: 8px 0 !important;   /* user paste, 6 Aug (was 5px) */
    }
    .charter_details_popup #sensors_info_container .systems-stat-label {
        font-size: 0.78rem !important;   /* was 0.72rem */
    }
    .charter_details_popup #sensors_info_container .systems-stat-value {
        font-size: 0.82rem !important;   /* was 0.76rem */
    }
    .charter_details_popup #sensors_info_container .systems-stat-value-clickable {
        padding: 3px 8px !important;
        font-size: 0.66rem !important;
    }

    /* Tracker card (post-swap) — HORIZONTAL in the bottom row beside Safety:
       glyph left, stat rows right, no tall block. The old rule forced it back
       into a 100px vertical box with a 28px icon (pre-swap, when it sat in the
       top grid next to Internet). */
    .charter_details_popup #sensors_info_container [data-systems-group="tracker"] .systems-tracker-icon-block {
        min-height: 0 !important;
        padding: 4px !important;
    }
    .charter_details_popup #sensors_info_container .tracker-card-body {
        padding: 10px 10px 10px 0px;
    }
    /* Scoped to the ICON BLOCK only — a bare [data-lucide="cpu"] selector
       here also caught the inner HEADER's 13px cpu icon and blew it up to
       52px (the "huge title icon" bug). */
    .charter_details_popup #sensors_info_container [data-systems-group="tracker"] .systems-tracker-icon-block .systems-tracker-icon,
    .charter_details_popup #sensors_info_container [data-systems-group="tracker"] .systems-tracker-icon-block [data-lucide="cpu"] {
        width: 52px !important;
        height: 52px !important;
    }

    /* Internet card — same compactness, wifi icon downsized. Vertical-only
       margins (user paste) — the group's own 20px padding carries the sides. */
    .charter_details_popup #sensors_info_container .systems-internet-sensor {
        width: 100%;
        max-width: none !important;
        min-height: 100px !important;
        margin: 15px 0 !important;
        padding: 6px !important;
    }
    .charter_details_popup #sensors_info_container .wifi-icon-dynamic {
        width: 32px !important;
        height: 32px !important;
    }
    .charter_details_popup #sensors_info_container .systems-internet-sensor-caption {
        font-size: 0.56rem !important;
        margin-top: 2px;
    }

    /* Battery Bank — all 4 slots in a single row, slim profile */
    .charter_details_popup #sensors_info_container .battery-bank-slots {
        gap: 6px !important;
        display: flex !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 8px 4px 8px !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot-icon,
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty-icon {
        height: 55px !important;
        width: 28px !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot-voltage {
        font-size: 0.78rem !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot-voltage-unit {
        font-size: 0.6rem !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot-tag,
    .charter_details_popup #sensors_info_container .battery-bank-slot-state,
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty-label,
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty-sub {
        font-size: 0.56rem !important;
        letter-spacing: 0.04em !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot-tag {
        margin-bottom: 12px !important;
    }
    /* On phones the two-line "Not installed" wraps awkwardly in the narrow
       slot — show the shorter "Empty" instead. Hide the source text
       (font-size:0) and render "Empty" via ::after at the real size. */
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty-sub {
        font-size: 0 !important;
    }
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty-sub::after {
        content: "Empty";
        font-size: 0.56rem;
        letter-spacing: 0.04em;
    }
    /* Battery bank header — same compact treatment */
    /* Section header ("Battery Bank") not needed on phones — the content is
       self-evident; hide it to save vertical space. */
    .charter_details_popup #sensors_info_container .battery-bank-header {
        display: none !important;
    }

    /* Engine panel + card — compact for narrow column */
    .charter_details_popup #sensors_info_container .engine-panel {
        padding: 10px 10px 12px !important;
    }
    .charter_details_popup #sensors_info_container .engine-card {
        min-height: 90px !important;
        /* Sides ≥15px on phones (user call — 8px felt cramped). */
        padding: 15px 15px !important;
    }
    /* Cruise ordering + full-width live in the .systems-grid-3col rule above
       (that block had a competing pre-swap named-area layout that had to be
       rewritten anyway). Nothing extra needed here — the single-column grid
       makes every card full-width; order:-1 hoists Cruise to the top. */
    .charter_details_popup #sensors_info_container .engine-card-vertical {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px;
        padding: 0 !important;
        min-height: 0 !important;
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-speed {
        order: 0;
        align-self: center;
        margin: 0;
        /* Phones keep the inline "kn" beside the value (user call) — undo
           the desktop stacked-"knots" treatment. */
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-unit-kn { display: inline; }
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-unit-knots { display: none; }
    /* The desktop stacked-unit margin (10px below "knots") is UNscoped and
       leaked into the phone row — it grew the speed block downward, so
       align-self:center floated "3.8 kn" above true centre (user bug,
       29 Jul). Zero it in the row layout. */
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-speed-unit {
        margin-bottom: 0;
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-speed-value {
        font-size: 1.7rem !important;
    }
    /* Phones keep the pre-swap INLINE context ("Parked · Cres") — the
       stacked-under-the-word treatment is desktop-vertical only. */
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-mode-row {
        flex-wrap: nowrap;
        justify-content: flex-start; /* desktop centers; phones stay left-aligned */
        width: auto;
    }
    /* Undo the desktop centered-statement treatment (align-items:center +
       margin-top:auto slack sink) — in the phone ROW card an auto top
       margin would pin the block to the bottom edge. */
    .charter_details_popup #sensors_info_container .engine-card-vertical .engine-card-main {
        align-items: flex-start;
        margin-top: 6px;   /* user paste, 7 Aug (was 0) */
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .engine-card-sub-text {
        display: inline;
        width: auto;
        margin-left: 0;
        margin-top: 0;
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .engine-card-sub-text::before {
        content: '·';
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .ns-pill { margin-top: 0; }
    /* Phone cruise card: no "RUNNING ON"/"STATUS" meta-label — the icon +
       mode word + context line tell the whole story (user call). */
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-mode-label {
        display: none !important;
    }
    /* Parked/idle on phones: NO speed readout at all — the dimmed dash was
       still noise (user call). "Parked · Cres" carries the state; the number
       returns the moment the boat moves. */
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-speed.cruise-speed-idle {
        display: none !important;
    }
    .charter_details_popup #sensors_info_container .cruise-mode-word {
        font-size: 1.15rem !important;
    }
    .charter_details_popup #sensors_info_container .cruise-speed-value {
        font-size: 1.7rem !important;
    }
    .charter_details_popup #sensors_info_container .cruise-mode-icon {
        width: 30px !important;
        height: 30px !important;
    }
    /* Speed reads as part of the line — "Sailing · 8.6 kn" (user call,
       18 Aug): the card stops spreading (speed was pinned far right),
       baseline-aligns the mode word and the value, and the tap arrow
       (margin-left:auto above) owns the right edge in every state. */
    .charter_details_popup #sensors_info_container .engine-card-vertical {
        justify-content: flex-start !important;
        align-items: baseline !important;
    }
    .charter_details_popup #sensors_info_container .engine-card-vertical .cruise-speed {
        align-self: baseline;
    }
    .charter_details_popup #sensors_info_container .engine-panel-header {
        padding-bottom: 8px !important;
    }
    .charter_details_popup #sensors_info_container .engine-panel-header-label {
        font-size: 0.6rem !important;
    }
    /* "Derived from battery + GPS" subtitle — explanatory only; hide
       on phones to keep the engine panel header single-line. */
    .charter_details_popup #sensors_info_container .engine-panel-header-meta {
        display: none !important;
    }

    /* Safety panel — collapses cards to 1-col already (above); trim
       inner card heights. min-height:0 kills the space-between spread, so
       an explicit gap keeps tag / icon / state breathing (user call). */
    .charter_details_popup #sensors_info_container .systems-safety-card {
        padding: 15px 8px !important;
        min-height: 0 !important;
        gap: 14px;
        /* Pack from the top — space-between (base rule) spread the children
           across the stretched card and opened a huge gap above the tap
           arrow (user call, 18 Aug); the 14px gap owns the rhythm. */
        justify-content: flex-start;
    }
    .charter_details_popup #sensors_info_container .systems-safety-card-label {
        font-size: 0.6rem !important;
    }
    .charter_details_popup #sensors_info_container .systems-safety-card-value {
        font-size: 0.76rem !important;
    }

    /* Boat Systems panel header (top label) */
    /* Section header ("Boat Systems") not needed on phones — hide it. */
    .charter_details_popup #sensors_info_container .systems-header {
        display: none !important;
    }
    /* ("Last message" label shortening removed — the horizontal tracker card
       has room for the full label on phones now; user call.) */
    /* Internet card: same treatment — "WiFi password" → "WiFi pass". */
    .charter_details_popup #sensors_info_container .systems-stat-label-wifipass {
        font-size: 0 !important;
    }
    .charter_details_popup #sensors_info_container .systems-stat-label-wifipass::after {
        content: "WiFi pass";
        font-size: 0.7rem;
    }

    /* ── TRIPS tab — DataTables compaction ─────────────────────────────
       NB: outer-container padding lives on `.charter_details_popup
       #trips_info_container { padding: 30px 50px 60px !important }`
       (line ~8206). Equal-specificity isn't enough — mirror the chain
       so we actually win. Same for stats / alerts below. */
    .charter_details_popup #trips_info_container {
        padding: 8px !important;
    }
    .charter_details_popup #trips_info_container .dataTables_wrapper {
        padding: 0 !important;
    }
    .charter_details_popup #trips_list_table.dataTable thead th,
    .charter_details_popup #trips_list_table.dataTable tbody td {
        padding: 8px 6px !important;
        font-size: 11px !important;
        letter-spacing: 0.3px !important;
    }
    .charter_details_popup #trips_list_table.dataTable tbody td:first-child {
        padding-left: 10px !important;
    }
    .charter_details_popup #trips_list_table.dataTable tbody td:last-child {
        padding-right: 10px !important;
    }
    /* Hide the oversized per-row 3-dot detail icon column on phones —
       rows themselves are still clickable. */
    .charter_details_popup #trips_list_table.dataTable thead th:first-child,
    .charter_details_popup #trips_list_table.dataTable tbody td:first-child {
        display: none !important;
    }
    /* With column 1 hidden, the departure-date cell (column 2) becomes the
       leftmost visible cell — give it real left padding so it isn't flush
       against the popup edge. */
    .charter_details_popup #trips_list_table.dataTable thead th:nth-child(2),
    .charter_details_popup #trips_list_table.dataTable tbody td:nth-child(2) {
        padding-left: 22px !important;
    }
    /* Make sure cell content doesn't overflow horizontally. */
    .charter_details_popup #trips_list_table.dataTable tbody td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 130px;
    }
    /* Month-group header: trim the giant 35px-border padding to something
       sane on a phone. */
    .charter_details_popup #trips_list_table.dataTable tr.group-header td {
        border-top-width: 14px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* ── STATS tab — trim padding + fix Solo/Normal/Ideal pill ─────── */
    .charter_details_popup #stats_info_container {
        padding: 16px !important;   /* user paste, 6 Aug (was 8px) */
    }
    .charter_details_popup #stats_info_container .stats-panel {
        padding: 12px 12px 14px !important;
        margin-bottom: 10px;
    }
    /* Stats header: wrap so the Season-label + compare-toggle don't fight
       horizontally with the panel title. Title on row 1, season label
       row 2, compare-toggle row 3 — all left-aligned. */
    .charter_details_popup #stats_info_container .stats-panel-header {
        flex-wrap: wrap !important;
        gap: 6px 10px !important;
        padding-bottom: 10px !important;
    }
    .charter_details_popup #stats_info_container .stats-panel-header-meta {
        margin-left: 0 !important;
        font-size: 0.55rem !important;
    }
    .charter_details_popup #stats_info_container .stats-compare-caption-row {
        display: inline-flex;         /* caption + info icon on ONE row */
        align-items: center;
        gap: 6px;
        flex-basis: 100%;
    }
    .charter_details_popup #stats_info_container .stats-compare-caption {
        margin-left: 0 !important;
    }
    .charter_details_popup #stats_info_container .stats-compare-toggle {
        /* Full-width row — SAME treatment as the fleet-stats toggle (they're
           the standardised same menu). */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 4px !important;
        padding: 2px !important;
        gap: 3px !important;
        flex-wrap: wrap !important;
        flex-basis: 100%;
        width: 100%;
    }
    .charter_details_popup #stats_info_container .stats-compare-btn {
        padding: 4px 9px !important;
        font-size: 0.58rem !important;
        flex: 1 1 0;
        justify-content: center;
    }
    .charter_details_popup #stats_info_container .stats-compare-btn [data-lucide],
    .charter_details_popup #stats_info_container .stats-compare-btn svg {
        width: 10px !important;
        height: 10px !important;
    }
    .charter_details_popup #stats_info_container .stats-kpi-row {
        gap: 10px !important;
    }
    /* BOXED row keeps its hairline grid gap — the 10px above outranked the
       boxed 1px and the container bg showed through as a fat divider between
       Utilization and Days rented (user call). */
    .charter_details_popup #stats_info_container .stats-kpi-row-boxed {
        gap: 1px !important;
    }
    .charter_details_popup #stats_info_container .stats-kpi-value {
        font-size: 1.2rem !important;
    }
    .charter_details_popup #stats_info_container .stats-kpi-unit {
        font-size: 0.58rem !important;
    }
    .charter_details_popup #stats_info_container .stats-kpi-label {
        font-size: 0.55rem !important;
    }
    .charter_details_popup #stats_info_container .stats-month-track {
        height: 95px !important;
        margin: 0 0 4px !important;   /* 14px top was part of the dead band above the bars (user report, 6 Aug) */
    }
    .charter_details_popup #stats_info_container .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .charter_details_popup #stats_info_container .stats-row {
        padding: 6px 0 !important;
    }
    .charter_details_popup #stats_info_container .stats-row-label {
        font-size: 0.82rem !important;   /* was 0.66rem — too small to read on phones */
    }
    .charter_details_popup #stats_info_container .stats-row-value {
        font-size: 0.85rem !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   PHONE COMPACTION — fleet-wide popups (≤640px)
   Trips popup (#trips_fleet_popup) and Alerts popup (#alerts_fleet_popup)
   opened from the bottom-nav. Both inherit a 30/50/60px container
   padding that wastes ~27% of a phone screen — kill it. Both also have
   a classic navbar (filter pills) above the table that needs to fit
   the viewport width.
   ════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 640px) {

    /* ── Outer popup chrome — anchor to viewport, sit over the nav ─── */
    .popup.trips_fleet_popup,
    .popup.alerts_fleet_popup {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        z-index: 5000 !important;
    }
    /* Close button anchored to the top-right corner.
       trips_fleet_popup OUT (arc-popup shell owns close X). */
    .alerts_fleet_popup .popup_close_button {
        top: 12px !important;
        right: 12px !important;
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        margin: 0;
        z-index: 200002;
    }

    /* ── Inner container padding ─────────────────────────────────── */
    .alerts_fleet_popup .alerts-container {
        padding: 12px 10px 20px !important;
    }

    /* ── Navbar (filter pills row) ────────────────────────────────── */
    .trips_fleet_popup .classic_navbar,
    .alerts_fleet_popup .classic_navbar {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        gap: 4px;
        margin: 8px 0 12px !important;
        padding: 0 !important;
    }
    .trips_fleet_popup .classic-navbar-item,
    .alerts_fleet_popup .classic-navbar-item {
        flex: 1 1 0;
        font-size: 0.65rem !important;
        padding: 8px 6px !important;
        text-align: center;
    }

    /* ── Search filter — full-width row above the table ──────────── */
    .trips_fleet_popup .trips_fleet_search_container,
    .alerts_fleet_popup .alerts_fleet_search_container,
    .trips_fleet_popup #reports_list_table_filter,
    .alerts_fleet_popup #alerts_list_table_filter {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        text-align: left;
    }
    .trips_fleet_popup #reports_list_table_filter input[type="search"],
    .alerts_fleet_popup #alerts_list_table_filter input[type="search"] {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        background: rgba(148, 148, 200, 0.08) !important;
        border: 1px solid rgba(148, 148, 200, 0.18) !important;
        border-radius: 8px !important;
    }
    .trips_fleet_popup #reports_list_table_filter label,
    .alerts_fleet_popup #alerts_list_table_filter label {
        width: 100%;
        margin: 0 !important;
        font-size: 0 !important;
    }

    /* ── Trips table compaction ──────────────────────────────────── */
    .trips_fleet_popup #reports_list_table.dataTable thead th,
    .trips_fleet_popup #reports_list_table.dataTable tbody td {
        padding: 8px 6px !important;
        font-size: 11px !important;
        letter-spacing: 0.3px !important;
    }
    .trips_fleet_popup #reports_list_table.dataTable thead th:first-child,
    .trips_fleet_popup #reports_list_table.dataTable tbody td:first-child {
        padding-left: 10px !important;
    }
    .trips_fleet_popup #reports_list_table.dataTable thead th:last-child,
    .trips_fleet_popup #reports_list_table.dataTable tbody td:last-child {
        padding-right: 10px !important;
    }
    .trips_fleet_popup #reports_list_table.dataTable tbody td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 130px;
    }
    /* Export buttons (dt-buttons) — already hidden on mobile per the
       existing rule at line 7762. Belt-and-suspenders. */
    .trips_fleet_popup .dt-buttons {
        display: none !important;
    }
    /* Pagination */
    .trips_fleet_popup .dataTables_paginate {
        margin: 12px 0 0 !important;
        text-align: center;
    }
    .trips_fleet_popup .dataTables_paginate .paginate_button {
        padding: 5px 8px !important;
        font-size: 0.6rem !important;
        margin: 0 2px !important;
    }
    .trips_fleet_popup .dataTables_info {
        font-size: 0.6rem !important;
        padding: 6px 0 !important;
    }

    /* ── Alerts table compaction ─────────────────────────────────── */
    .alerts_fleet_popup #alerts_list_table.dataTable thead th,
    .alerts_fleet_popup #alerts_list_table.dataTable tbody td {
        padding: 8px 6px !important;
        font-size: 11px !important;
        letter-spacing: 0.3px !important;
    }
    .alerts_fleet_popup #alerts_list_table.dataTable tbody td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }
    /* Pagination matches trips */
    .alerts_fleet_popup .dataTables_paginate {
        margin: 12px 0 0 !important;
        text-align: center;
    }
    .alerts_fleet_popup .dataTables_paginate .paginate_button {
        padding: 5px 8px !important;
        font-size: 0.6rem !important;
        margin: 0 2px !important;
    }
    .alerts_fleet_popup .dataTables_info {
        font-size: 0.6rem !important;
        padding: 6px 0 !important;
    }

    /* Category containers inside Alerts popup (New / Active / Log) */
    .alerts_fleet_popup .fleet-alarms-details-category-container {
        padding: 0 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   PHONE COMPACTION — very small phones (≤380px)
   Galaxy S8+ (360), iPhone SE (375). Anything that still feels
   cramped at 640px-tuned sizing gets a further trim here.
   ════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 380px) {

    /* Battery bank slot — drop the pill chip background so the state
       label reads as plain text. Frees up the slot's horizontal width
       at 360px where the colored pill would push neighbours. */
    .charter_details_popup #sensors_info_container .battery-bank-slot-state,
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty-label,
    .charter_details_popup #sensors_info_container .battery-bank-slot-empty-sub {
        background: none !important;
        border: none !important;
        padding: 2px 0 !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
    /* slot-tag keeps the 12px bottom margin from the ≤640 rule (don't let the
       ≤380 reset stomp it back to 4px). */
    .charter_details_popup #sensors_info_container .battery-bank-slot-tag {
        background: none !important;
        border: none !important;
        padding: 2px 0 !important;
        margin-top: 4px !important;
        margin-bottom: 12px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   ACCOUNT TAB — last item in the menu. On mobile it sits as the 5th
   flex child of `.portal-intro-menus-wrapper > a` (existing flex:1 1 0
   rule from the bottom-nav block). On desktop it's lifted out of that
   wrapper via absolute positioning at the far right of .ds-top.

   The dropdown is teleported to <body> by the script so it escapes
   .ds-top's z-index 500 stacking context.
   ════════════════════════════════════════════════════════════════════ */

/* Desktop — float Account to the absolute right edge of the top bar.
   We pull it out of inline flow with position: absolute and pin to
   .ds-top via its top/right offsets. */
@media only screen and (min-width: 641px) {
    .ds-top {
        position: fixed;          /* already set elsewhere; reassert */
    }
    .ds-top .ds-user-menu-button {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
}

/* Strip default anchor styles — the inner .menu-buttons div carries
   ALL visuals identical to the other tabs. */
.ds-user-menu-button {
    text-decoration: none;
    color: inherit;
}

/* Active (dropdown open) — tint the inner pill so the active state
   is visible. */
.ds-top .ds-user-menu-button.is-open .menu-buttons,
.ds-top .ds-user-menu-button.is-open .menu-buttons .menu-button-icon {
    background: rgba(34, 211, 238, 0.1);
    color: #22D3EE;
}
/* DESKTOP override (user call, 4 Aug): the Settings button wears the
   navy-cyan HOVER look as its RESTING state, and deepens on hover —
   it's the one top-menu item that isn't a view, so it reads as always-
   available rather than another tab. Pointer devices only, so the touch
   :active feedback on phones is untouched. */
@media (hover: hover) and (min-width: 641px) {
    /* user paste, 4 Aug */
    .ds-top .ds-user-menu-button .menu-buttons {
        background: rgb(34 211 238 / 18%);
        color: #22D3EE;
        border: 1px solid #00ffff1a;
    }
    .ds-top .ds-user-menu-button .menu-buttons .menu-button-icon,
    .ds-top .ds-user-menu-button .menu-buttons svg {
        color: #22D3EE;
    }
    /* Hover just deepens the fill. */
    .ds-top .ds-user-menu-button:hover .menu-buttons {
        background: rgb(34 211 238 / 30%);
    }
}
.ds-user-menu-dropdown {
    /* Chrome comes from .arc-dropdown (this menu is its reference
       implementation). Hidden by default; .is-open reveals it. JS sets
       fixed position via getBoundingClientRect of the trigger button.
       z-index sits above EVERY popup chrome (popup_overlay=5000,
       popup_header=200000) so it never disappears behind anything. */
    min-width: 220px;
    max-width: 280px;
    z-index: 2147483000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
/* The dropdown is teleported to <body> on init (escapes .ds-top's
   z-index: 500 stacking context). Visibility is driven by .is-open
   on the dropdown itself. */
.ds-user-menu-dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
}
/* PHONES ONLY: the shared .arc-dropdown surface (#242434) is so close to the
   boat-list panel behind it that the settings menu visually dissolved into it
   (user call, 4 Aug). Lift THIS menu's background only — an override, the
   standardized popover chrome elsewhere is untouched. */
@media (max-width: 640px) {
    .ds-user-menu-dropdown {
        background: #363852;
        border-color: rgb(0 0 0 / 26%);
    }
}

/* Header row — avatar + name + email block at the top of the menu. */
.ds-user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 12px;
}
.ds-user-menu-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22D3EE;
}
.ds-user-menu-avatar [data-lucide],
.ds-user-menu-avatar svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.6;
}
.ds-user-menu-identity {
    min-width: 0;
    flex: 1;
}
.ds-user-menu-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #d9deec;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-user-menu-email {
    font-size: 0.62rem;
    color: #6c7591;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Package pill — ESSENTIAL / PRO under the identity (user call): colored,
   NO border. PRO wears the cyan accent; ESSENTIAL stays slate-neutral. */
.ds-user-menu-pack {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}
.ds-user-menu-pack-pro {
    color: #22D3EE;
    background: rgba(34, 211, 238, 0.12);
}
.ds-user-menu-pack-essential {
    color: #9fabcb;
    background: rgba(148, 148, 200, 0.14);
}

/* Hairline between header and items. */
.ds-user-menu-divider {
    height: 1px;
    background: rgba(148, 148, 200, 0.14);
    margin: 4px 4px 6px;
}

/* Action items (Log out, etc.). */
.ds-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;   /* comfortable touch target (user call, 27 Jul) */
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #95a1b9;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ds-user-menu-item:hover {
    background: rgba(34, 211, 238, 0.08);
    color: #22D3EE;
}
.ds-user-menu-item [data-lucide],
.ds-user-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke-width: 1.6;
}

/* NB: phone direction (open UP from button) is handled by the JS
   positioning function in menubar.php — JS sets inline `position:
   fixed; bottom/left/top/right` based on the matchMedia check.
   Stylesheet-level direction overrides aren't needed any more. */


/* ═════════════════════════════════════════════════════════════════
   ADMIN demo/test menu (role 100) — mirrors the Account dropdown
   surface. Teleported to <body>; .is-open reveals it. Items are
   ON/OFF toggles (state chip on the right; .is-on tints cyan).
   ═════════════════════════════════════════════════════════════════ */
.ds-admin-menu-dropdown {
    position: fixed;
    min-width: 260px;
    max-width: 320px;
    padding: 8px;
    background: #1e1e2f;
    border: 1px solid rgba(148, 148, 200, 0.22);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px rgba(34, 211, 238, 0.1);
    z-index: 2147483000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    max-height: 80vh;
    overflow-y: auto;
}
.ds-admin-menu-dropdown.is-open { opacity: 1; pointer-events: auto; }

.ds-admin-menu-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 10px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.7);
}
.ds-admin-menu-head-icon { width: 14px; height: 14px; color: rgba(34, 211, 238, 0.65); }

.ds-admin-menu-section-label {
    padding: 8px 10px 4px;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6c7591;
}

.ds-admin-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #95a1b9;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ds-admin-menu-item:hover { background: rgba(34, 211, 238, 0.08); color: #d9deec; }
.ds-admin-menu-item-icon { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 1.6; }
.ds-admin-menu-item-label { flex: 1; min-width: 0; }
.ds-admin-menu-item-state {
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    color: #6c7591;
    background: rgb(148 148 200 / 14%);
}
.ds-admin-menu-item.is-on { color: #22D3EE; }
.ds-admin-menu-item.is-on .ds-admin-menu-item-icon { color: #22D3EE; }
.ds-admin-menu-item.is-on .ds-admin-menu-item-state {
    color: #22D3EE;
    background: rgba(34, 211, 238, 0.14);
}

.ds-admin-menu-divider {
    height: 1px;
    background: rgba(148, 148, 200, 0.14);
    margin: 6px 4px;
}
.ds-admin-menu-item-reset:hover { background: rgba(248, 113, 113, 0.1); color: #f77e83; }
.ds-admin-menu-item-reset:hover .ds-admin-menu-item-icon { color: #f77e83; }


/* ═════════════════════════════════════════════════════════════════
   FLEET INET POPUP — Fleet-Stats surface refresh
   Mirrors the Fleet Stats popup's exact vocabulary:
     • Solid #2b2b42 header band (NOT translucent)
     • Body bg inherits from .settings_popup (warmer page bg, not dark)
     • Width restored to .settings_popup default (55%)
     • Stats-panel wraps the table — same translucent surface used on
       the Fleet Stats KPI panels
     • Cyan accent on title + section labels, never on body text
   ═════════════════════════════════════════════════════════════════ */

/* Outer popup — let .settings_popup + the shared .popup family rule
   own width / position / bg (both = rgb(28 28 42) = #1c1c2a). Only
   shadow tweaked to match the alerts/trips/stats popup family. */
.popup.inet_fleet_popup {
    box-shadow: 0 0 30px rgba(23, 47, 113, 0.66);
}

/* ── Shell chrome (header band, title, search, issues pill, close X,
       content surface, body bg) is now owned by the shared Arconmar
       popup shell at /js/modules/utilities/popupShell/popupShell.css.
       The inet popup uses `.arc-popup` + `.arc-popup-*` classes for
       all of that. The rules below only style INET-SPECIFIC content
       (the card list, MORE button, status pills, copy button). The legacy
       DataTable + its Status/Wifis views were removed — cards are the model. */

/* Expected-speed chip — same translucent surface vocab as fleet-stats
   KPI cards. */
.inet_fleet_popup .inet-module-signal-rating.table-dark-highlight-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(148, 148, 200, 0.12);
    border-radius: 8px;
    padding: 4px 10px;
}

/* Error list — thin alert strip under the header. */
.inet_fleet_popup .inet-error-container {
    margin: 18px 22px 0;
    padding: 12px 14px;
    background: rgba(248, 113, 113, 0.05);
    border: 1px solid rgba(248, 113, 113, 0.18);
    border-radius: 10px;
    font-size: 0.75rem;
    line-height: 1.5;
}
.inet_fleet_popup .inet-error-container:empty {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   INET — CARDS A : EXACT Events-timeline row design, ported for Internet.
   ────────────────────────────────────────────────────────────────────
   The user wants the SAME look as Fleet-Stats-week / Events: one container
   holding lighter translucent rows. Row = [dot] · [body: bold name + status
   icon/title + right pill] · [grey detail line] · [chevron]. These styles
   mirror #events_popup .ev-tl-* (events_popup.css) but scoped to the inet
   popup and with NO time column. Two modes (status / wifi).
   ════════════════════════════════════════════════════════════════════ */
.inet-proto-a {
    width: 100%;
    box-sizing: border-box;
}
/* Row — mirrors .ev-tl-row, minus the 64px time column. Layout + card chrome
   key on .inet-ev-row (EVERY row has it); .inet-more-button is only the
   click-affordance marker (cursor + hover) carried by status rows — wifi rows
   dropped it (copy-only) and must keep the identical card look. */
.inet_fleet_popup .inet-ev-row {
    /* user paste, 5 Aug */
    display: grid;
    grid-template-columns: 12px 1fr 16px;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 15px;
    margin: 8px 0;
    border: 1px solid #ffffff14;
    background: #7f84aa45;
    transition: background 0.12s;
    /* neutralize the inherited cyan pill-button look from .inet-more-button */
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
}
.inet_fleet_popup .inet-ev-row.inet-more-button { cursor: pointer; }
.inet_fleet_popup .inet-ev-row:first-child { margin-top: 0; }
/* Clicky hover only on rows that actually open details (status view). */
.inet_fleet_popup .inet-ev-row.inet-more-button:hover { background: rgba(34, 211, 238, 0.05); }
.inet_fleet_popup .inet-ev-row:hover .ev-tl-chev { opacity: 0.7; transform: translateX(2px); }

/* Port the ev-tl-* pieces under the inet scope (events scopes them to
   #events_popup, so they don't reach here). */
.inet_fleet_popup .ev-tl-dot {
    width: 9px; height: 9px; border-radius: 50%;
    /* Row is align-items:center, so the dot self-centers vertically — no
       margin-top nudge (which used to push it off-center). */
    box-shadow: 0 0 8px currentColor;
}
.inet_fleet_popup .ev-tl-body { min-width: 0; }
.inet_fleet_popup .ev-tl-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inet_fleet_popup .ev-tl-boat { font-size: 0.85rem; font-weight: 600; color: #d6dbe7; }
.inet_fleet_popup .ev-tl-kindicon { width: 13px; height: 13px; flex-shrink: 0; }
.inet_fleet_popup .ev-tl-title { font-size: 0.85rem; font-weight: 500; }
.inet_fleet_popup .ev-tl-detail { font-size: 0.74rem; color: #95a1b9; margin-top: 3px; line-height: 1.4; }
.inet_fleet_popup .ev-tl-chev {
    width: 14px; height: 14px; color: #98a2bd;   /* matched to the brighter events chevron */
    /* Always visible (was hover-only); hover still bumps opacity + nudges. */
    opacity: 0.9; transition: opacity 0.12s, transform 0.12s;
}

/* Right-hand pill on line1 — pushed to the far right like the events durpill. */
.inet_fleet_popup .inet-ev-signal,
.inet_fleet_popup .inet-ev-offpill { margin-left: auto; }

/* WiFi rows: the password pill is its own grid cell (dot | body | pass) so it
   centers vertically against the whole 2-line card instead of riding the top
   line. No chevron cell — wifi rows don't open details. */
.inet_fleet_popup .inet-ev-row-wifi {
    grid-template-columns: 12px 1fr auto;
}

/* OFFLINE/Inactive duration pill — mirrors the alerts-table red pill. */
.inet-ev-offpill {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; font-weight: 600; line-height: 20px;
    padding: 0 9px; border-radius: 999px;
    /* Match the left-side "Offline" status text/dot color (#ff5775). */
    color: #ff5775; background: rgba(255, 87, 117, 0.10);
    border: 1px solid rgba(255, 87, 117, 0.28);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.inet-ev-row-inactive .inet-ev-offpill {
    color: #facc15; background: rgba(250, 204, 21, 0.10); border-color: rgba(250, 204, 21, 0.30);
}

/* Online signal block on line1 — graphic on top, RSRP/Noise readings
   beneath it, both right-aligned (margin-left:auto pushes it to the edge). */
.inet-ev-signal {
    display: inline-flex; flex-direction: column;
    align-items: flex-end; gap: 8px;
}
.inet-ev-readings {
    font-size: 0.65rem; color: #95a1b9; line-height: 1.2; font-weight: 500;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* WiFi password on line1 (wifi mode). Row is align-items:center so the pill
   sits vertically centered. The "WiFi password" label is a quiet gray cue
   before the value (desktop only — hidden on phones to save width). */
.inet-ev-pass {
    display: inline-flex; align-items: center;
    color: #c8d0e0; font-size: 0.8rem; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.inet-ev-pass-label {
    margin-right: 8px;
    color: #6c7591;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: normal;
}
/* Copy button — THE action on a wifi row (the row itself no longer opens
   details), so it carries a visible cyan-chip surface and a generous 32px
   hit target. position:relative so the "Copied" tooltip can anchor to it. */
.inet-ev-pass .inet-copy-pass {
    position: relative;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgb(34 211 238 / 19%);
    color: rgba(34, 211, 238, 0.75);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.inet-ev-pass .inet-copy-pass:hover {
    color: #22D3EE;
    background: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.38);
}
.inet-ev-pass .inet-copy-pass i,
.inet-ev-pass .inet-copy-pass svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}
.inet-ev-pass .inet-copy-pass.copied {
    color: #34d399;
}
/* "Copied" tooltip — appears above the copy button on .copied, then fades. */
.inet-ev-pass .inet-copy-pass::after {
    content: 'Copied';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    background: #0f111b;
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #34d399;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 5;
}
.inet-ev-pass .inet-copy-pass.copied::after {
    opacity: 1;
}

/* Signal bar — 5 colored segments (graphic only, no word label). */
.inet-sigbar { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.inet-sigseg { width: 4px; border-radius: 2px; align-self: flex-end; }
.inet-card-empty {
    padding: 30px; text-align: center; color: #6c7591; font-size: 0.85rem;
}

/* Header search — the shared .arc-popup-search slot is 380px which overruns
   the Internet header (title + Issues pill compete for the row). Constrain
   the inet slot + its input to a tighter width so everything fits. */
.inet_fleet_popup #inet_fleet_search_slot.arc-popup-search,
.inet_fleet_popup #inet_fleet_search_slot {
    width: 220px;
    max-width: 220px;
    flex: 0 1 220px;
}
.inet_fleet_popup #inet_fleet_search_slot .inet-cards-search {
    width: 100% !important;
    max-width: 220px !important;
}

@media only screen and (max-width: 640px) {
    .inet_fleet_popup,
    .inet-proto-a { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .inet_fleet_popup .arc-popup-content { padding-left: 12px !important; padding-right: 12px !important; }
    .inet_fleet_popup .inet-ev-row { padding: 10px 12px; gap: 10px; }
    /* "WiFi password" label is desktop-only — drop it on phones to save width. */
    .inet-ev-pass-label { display: none; }
    /* Online signal block on phones — show ONLY the visual bar rating; hide the
       RSRP/Noise readings text. With the text gone the block is one item, so
       center it vertically against the card. */
    .inet_fleet_popup .inet-ev-readings { display: none; }
    .inet_fleet_popup .inet-ev-signal {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }
}

/* Close X — owned by the shared popup shell
   (.arc-popup .arc-popup-close). No inet-specific overrides needed. */


/* ═════════════════════════════════════════════════════════════════
   STANDARDIZED FLEET POPUP CHROME
   Every fleet popup (alerts / trips / inet / stats / boat-details)
   shares the same 80px header band. Close button and search box
   were drifting per-popup; this block is the SINGLE source of truth.

   Goals:
     • Close X — always 32×32, vertically centered in the 80px band
       (= top: 24px), 16px from the right edge. Same on desktop and
       mobile. No `.popup_close_button` legacy padding/margin sneaks
       through because we zero them with !important.
     • Search input — capped at 250px wide so it stops being a
       "I'm trying to fill the row" gigantic field. Vertically and
       horizontally centered inside the header on desktop. On mobile
       (≤640px) it shifts to the left so it doesn't fight the X
       close button for real-estate.
   ═════════════════════════════════════════════════════════════════ */

/* ── Close X ───────────────────────────────────────────────────── */
/* Inet + Trips fleet popups are OUT — owned by the .arc-popup shell.
   This block still covers alerts/stats/settings until they migrate. */
.alerts_fleet_popup .popup_close_button,
.fleet_stats_popup .popup_close_button,
.settings_popup .popup_close_button {
    position: absolute !important;
    top: 24px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 14px !important;
    float: none !important;
    z-index: 200002 !important;
}
@media only screen and (max-width: 640px) {
    .alerts_fleet_popup .popup_close_button,
    .fleet_stats_popup .popup_close_button,
    .settings_popup .popup_close_button {
        top: 24px !important;
        right: 12px !important;
    }
}

/* ── Search box ────────────────────────────────────────────────── */
/* Inet + Trips OUT — use .arc-popup-search from popupShell.css. */
.alerts_fleet_popup .dataTables_filter {
    width: 380px !important;
    max-width: 380px !important;
    flex: 0 0 380px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.alerts_fleet_search_container {
    width: 380px !important;
    max-width: 380px !important;
    flex: 0 0 380px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.alerts_fleet_popup .dataTables_filter label {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    display: block !important;
}
.alerts_fleet_search_container input,
.alerts_fleet_popup .dataTables_filter input {
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #d6dbe7 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(148, 148, 200, 0.18) !important;
    border-bottom: 1px solid rgba(148, 148, 200, 0.18) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    text-align: left !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}
.alerts_fleet_search_container input::placeholder,
.alerts_fleet_popup .dataTables_filter input::placeholder {
    color: #95a1b9 !important;
}
.alerts_fleet_search_container input:focus,
.alerts_fleet_popup .dataTables_filter input:focus {
    outline: none !important;
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: rgba(34, 211, 238, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 0 14px rgba(34, 211, 238, 0.1) !important;
}
.alerts_fleet_search_container input::-webkit-search-cancel-button,
.alerts_fleet_popup .dataTables_filter input::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    appearance: none !important;
}

@media only screen and (max-width: 640px) {
    .alerts_fleet_popup .dataTables_filter,
    .alerts_fleet_search_container {
        margin: 0 !important;
        max-width: 250px !important;
        flex: 0 1 250px !important;
        justify-content: flex-start !important;
        padding-left: 14px !important;
    }
    .alerts_fleet_search_container input,
    .alerts_fleet_popup .dataTables_filter input {
        max-width: 250px !important;
    }
    /* And let the header's flex container left-align too. */
    .alerts_fleet_popup .alerts_fleet_popup_menu .portal-intro-menus-wrapper,
    .trips_fleet_popup .trips_fleet_popup_menu .portal-intro-menus-wrapper,
    .alerts_fleet_popup .alerts_fleet_popup_menu .portal-intro-menus-container,
    .trips_fleet_popup .trips_fleet_popup_menu .portal-intro-menus-container {
        justify-content: flex-start !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   📱 M2 — TOUCH TARGETS (phone ≤640px): pad hit areas to ~44px.
   Visual glyphs stay their size; we grow the tappable region + gaps.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Popup close X (arc-popup + bottom-sheet popups) → 44×44 hit area. */
    .arc-popup-close,
    .popup_close_button {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Trip tabs (Route / Battery / Speed / Playback) — 44px tall. */
    .trips-analysis-menu-button {
        min-height: 44px !important;
    }

    /* Trips / Alerts table cells: pad the cell so chevron / eye / pills get a
       44px row. (Targets the interactive cells, not every td.) */
    #reports_list_table td,
    #trips_list_table td,
    #alerts_list_table td {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Status / fuel / duration pills inside tables — bump tap height. */
    .reports_status,
    .trip-fuel-cell,
    .alarm_type_text {
        min-height: 28px;
    }

    /* Stats benchmark pills (Off/Low/Normal/Good) + info button. */
    .stats-compare-btn {
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
    .stats-info-btn {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Events popup — range + view buttons + day-card headers. */
    #events_popup .ev-range-btn,
    #events_popup .ev-month-btn,
    #events_popup .ev-proto-btn {
        min-height: 40px !important;
        display: inline-flex;
        align-items: center;
    }
    /* Range pills (Today / Week / Month) — pin an EXPLICIT equal height so the
       Month button (its chevron icon + wrapper used to make it taller than the
       text-only Today/Week) is identical. .ev-month-btn is the Month button;
       the old .ev-month-select class is dead. */
    #events_popup .ev-range-btn,
    #events_popup .ev-month-btn {
        height: 40px !important;
        box-sizing: border-box !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* The Month button sits inside the .ev-range-month wrapper — make the
       wrapper match so the button fills it exactly (no leftover line-box). */
    #events_popup .ev-range-month {
        height: 40px !important;
        display: inline-flex !important;
        align-items: stretch !important;
    }
    #events_popup .ev-day-row-summary {
        min-height: 48px;
    }

    /* Battery: charging day circles + night-drain cells — keep ≥40px tall
       (if the strip would shrink them below this, it horizontal-scrolls — the
       strips already scroll). */
    .battery-module .bm-day-cell,
    .battery-module .bm-nd-cell {
        min-height: 44px;
    }

    /* Battery accordion headers / sidebar buttons — already ~70px, ensure tabs
       and small controls clear 44. */
    .battery-module .acc-header {
        min-height: 56px;
    }
}

/* Popup drag tab (top-side grab) — widen the TOUCH area without changing the
   thin visual. The visual height stays; a transparent ::before extends the
   hittable zone upward. Applies on touch-ish widths. */
@media (max-width: 1024px) {
    .popup-drag-handle { position: relative; }
    .popup-drag-handle::before {
        content: "";
        position: absolute;
        left: -24px; right: -24px; top: -14px; bottom: -14px;
    }
}


/* ════════════════════════════════════════════════════════════════
   📱 M7 — TYPOGRAPHY FLOOR (phone ≤640px).
   Body/description COPY should not drop below ~14px (tables + chart axis
   labels are exempt — they're dense data / annotations). Inputs ≥16px so
   iOS doesn't auto-zoom on focus.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* iOS auto-zoom guard: any text input/select/textarea ≥16px. */
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Battery card descriptions / night-drain copy / recommendation cards —
       readable floor. (Scoped to the module's body-copy patterns.) */
    .battery-module .bm-empty-sub,
    .battery-module .leading-relaxed {
        font-size: 0.82rem !important;   /* ~13px → keep legible, not tiny */
        line-height: 1.5 !important;
    }

    /* Events row detail lines. */
    #events_popup .ev-tl-detail,
    #events_popup .ev-sec-item-detail {
        font-size: 0.8rem;
    }
}


/* ════════════════════════════════════════════════════════════════════
   STANDARDIZED POPUP CLOSE BUTTON — Lucide-X cyan button on LEGACY popups.

   The arc-popup shell (Events / Inet / Trips / Alerts) styles its close
   button via `.arc-popup .arc-popup-close` (popupShell.css). Legacy popups
   that DON'T use the arc shell (Fleet Stats, Boat Details, etc.) carry the
   same markup — `<button class="arc-popup-close popup_close_button">
   <i data-lucide="x"></i></button>` — but the scoped arc rule never reaches
   them. This block ports the identical visual to those buttons.

   Selector `.popup_close_button.arc-popup-close` (2 classes) matches the
   specificity of the legacy `.charter_details_popup .popup_close_button` /
   `.fleet_stats_popup .popup_close_button` overrides, and being LAST in
   source order it wins. Mirrors popupShell.css §close-button exactly.
   ════════════════════════════════════════════════════════════════════ */
.popup_close_button.arc-popup-close {
    position: absolute !important;
    /* CENTERED in the header (absolute child of position:relative
       .arc-popup-header) — top:50%+translateY(-50%), not a hardcoded top: that
       breaks whenever the header height changes. No per-breakpoint re-tuning. */
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid rgb(34 211 238 / 23%) !important;
    background: rgb(15 17 27 / 31%) !important;
    color: #22d3ee !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    float: none !important;
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease !important;
    z-index: 200010 !important;
}
.popup_close_button.arc-popup-close:hover {
    background: rgb(34 211 238 / 7%) !important;
    border-color: rgb(34 211 238 / 38%) !important;
}
.popup_close_button.arc-popup-close:active {
    transform: translateY(-50%) scale(0.96) !important;
}
.popup_close_button.arc-popup-close i,
.popup_close_button.arc-popup-close svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.8 !important;
    color: currentColor;
}
/* (No mobile right: override needed — base right:12px already applies, and the
   top:50% centering handles the shorter 60px phone header automatically.) */


/* ════════════════════════════════════════════════════════════════════
   THEMES — REMOVED (Jul 2026). One theme for everyone: dark base with
   the brighter bits the old Standard theme did well merged into the
   default rules (Live/Events/Stats + trip-tab pills, trip-details
   content, .trip-route-stats, Live-section panels via --brcol, stats
   panels/KPI box). The switcher UI + localStorage 'arcTheme' are gone.
   ════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   ECHARTS TOUCH STANDARD — ALL charts, current and future.
   On touch devices a vertical drag over ANY chart means "scroll the
   page"; horizontal drags and taps mean "show the tooltip here".
   ECharts stamps `_echarts_instance_` on every container it inits, so
   this one rule covers every chart in the app automatically — no
   per-module touch-action rules needed for new charts. (Outside-tap
   tooltip dismissal lives in utilities/charts/chartTouch.js.)
   ═══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
    [_echarts_instance_],
    [_echarts_instance_] div,
    [_echarts_instance_] canvas {
        touch-action: pan-y !important;
    }
}


/* 📱 Boat-details bottom sheet polish (user call, 28 Jul):
   1) The drag-handle strip read as a stray GREY TOP BORDER — blend it into
      the sheet surface (the grip pill stays as the affordance).
   2) Desktop's blue 0-0-30px glow is invisible on phones (sheet spans full
      width over a dark map) — give the sheet an explicit UPWARD shadow so
      it visibly floats above the map like desktop. */
@media (max-width: 640px) {
    /* Only the hairline goes — the handle keeps its normal strip look
       (user call, 29 Jul: the transparent bg read as an unasked color
       change). Shadow toned way down — the -12px/32px one was too big. */
    #boatdetails_popup > .popup-drag-handle {
        border-bottom: 0;
    }
    /* (mobile shadow override REMOVED — user call, 29 Jul: the sheet
       inherits the desktop .charter_details_popup shadow instead.) */
}

/* 📱 Boat-list second cell — right padding (user paste, 29 Jul). */
@media (max-width: 640px) {
    #boat_list_table td:nth-child(2) {
        padding-right: 15px !important;
    }
}

/* ── Stats month chart, phones (user report, 6 Aug): a dead band sat between
   the benchmark pill and the bars — the chart's 22px top margin, per-track
   top margins and the day-value row (which reads as empty at phone sizes)
   all stacked up. Applies to BOTH hosts (boat-details Stats tab + Fleet
   Stats popup) — the classes are shared. ── */
@media only screen and (max-width: 640px) {
    .stats-month-chart { margin: 6px 0 4px !important; }
    .stats-month-value { display: none !important; }
}