/* =========================================================
   VMS — VESSEL MONITORING SYSTEM
   FUTURISTIC MARINE UI
========================================================= */

:root {
    --bg-main: #06110f;
    --bg-deep: #030b0a;
    --bg-panel: rgba(12, 30, 27, 0.92);
    --bg-panel-soft: rgba(17, 42, 37, 0.72);

    --border: rgba(79, 184, 143, 0.20);
    --border-active: rgba(81, 221, 165, 0.55);

    --green: #4fe09d;
    --green-bright: #68ffb6;
    --cyan: #42d9e8;
    --blue: #4da3ff;
    --amber: #ffc247;
    --red: #ff4d5f;

    --text-main: #edf8f4;
    --text-soft: #9bb5ac;
    --text-muted: #647d75;

    --header-height: 72px;
    --footer-height: 30px;

    --radius: 12px;
    --transition: 180ms ease;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(33, 125, 93, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(30, 120, 130, 0.08),
            transparent 30%
        ),
        var(--bg-main);

    color: var(--text-main);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    overflow: hidden;
}


/* =========================================================
   APPLICATION
========================================================= */

#app {
    width: 100vw;
    height: 100vh;

    display: grid;

    grid-template-rows:
        var(--header-height)
        1fr
        var(--footer-height);
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    position: relative;
    z-index: 1000;

    display: flex;
    align-items: center;

    padding: 0 22px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 18, 15, 0.98),
            rgba(7, 28, 23, 0.96)
        );

    border-bottom: 1px solid var(--border);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    width: 255px;
    min-width: 255px;
    height: 100%;

    display: flex;
    align-items: center;
}

.brand-logo {
    display: block;
    width: 190px;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   NAVIGATION
========================================================= */

.main-nav {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 5px;

    flex: 1;
}

.nav-item {
    position: relative;

    height: 100%;

    padding: 0 17px;

    border: 0;

    background: transparent;

    color: var(--text-soft);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;

    cursor: pointer;

    transition: var(--transition);
}

.nav-item:focus,
.nav-item:focus-visible {
    outline: none;
    box-shadow: none;
}

.nav-item::-moz-focus-inner {
    border: 0;
}

.nav-item:hover {
    color: var(--text-main);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(79, 224, 157, 0.06)
        );
}

.nav-item.active {
    color: var(--green-bright);
}

.nav-item.active::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    bottom: 0;

    height: 2px;

    background: var(--green);

    box-shadow:
        0 0 12px rgba(79, 224, 157, 0.8);
}


/* =========================================================
   TOPBAR RIGHT
========================================================= */

.topbar-right {
    display: flex;
    align-items: center;

    gap: 25px;
}

.system-health,
.user-panel {
    display: flex;
    align-items: center;

    gap: 9px;
}

.system-health small,
.user-panel small {
    display: block;

    margin-bottom: 2px;

    color: var(--text-muted);

    font-size: 8px;
    letter-spacing: 1.3px;
}

.system-health strong,
.user-panel strong {
    display: block;

    font-size: 11px;
    letter-spacing: 0.8px;
}

.system-health strong {
    color: var(--green);
}

.health-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green-bright);

    box-shadow:
        0 0 10px var(--green);
}

.user-avatar {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--bg-panel-soft);

    border: 1px solid var(--border-active);

    color: var(--green-bright);

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   PAGE CONTENT
========================================================= */

#page-content {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   STARTUP SCREEN
========================================================= */

.startup-screen {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background:
        radial-gradient(
            circle,
            rgba(39, 169, 117, 0.08),
            transparent 35%
        );
}

.startup-logo {
    width: 86px;
    height: 86px;

    display: grid;
    place-items: center;

    margin-bottom: 25px;

    border: 1px solid var(--border-active);

    border-radius: 22px;

    color: var(--green-bright);

    font-size: 42px;
    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            rgba(79, 224, 157, 0.12),
            rgba(4, 20, 16, 0.5)
        );

    box-shadow:
        0 0 50px rgba(79, 224, 157, 0.12);
}

.startup-screen h1 {
    margin: 0;

    font-size: 24px;
    letter-spacing: 5px;
}

.startup-screen p {
    margin: 10px 0 28px;

    color: var(--text-soft);

    font-size: 11px;
    letter-spacing: 3px;

    text-transform: uppercase;
}

.startup-loader {
    width: 180px;
    height: 2px;

    position: relative;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.06);
}

.startup-loader::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 50px;

    background: var(--green-bright);

    box-shadow:
        0 0 12px var(--green);

    animation: loader 1.5s infinite ease-in-out;
}

@keyframes loader {
    from {
        left: -50px;
    }

    to {
        left: 180px;
    }
}


/* =========================================================
   GENERIC PANELS
========================================================= */

.vms-panel {
    background:
        linear-gradient(
            145deg,
            rgba(16, 38, 34, 0.94),
            rgba(8, 23, 20, 0.94)
        );

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(10px);
}

.panel-title {
    color: var(--text-main);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   STATUS COLORS
========================================================= */

.status-running {
    color: var(--blue);
}

.status-idle {
    color: var(--amber);
}

.status-docking {
    color: #b76cff;
}

.status-weather {
    color: var(--cyan);
}

.status-damage {
    color: var(--red);
}

.status-unreported {
    color: var(--red);

    animation: unreportedBlink 0.85s infinite;
}

@keyframes unreportedBlink {

    0%,
    100% {
        opacity: 1;

        text-shadow:
            0 0 12px rgba(255, 77, 95, 0.8);
    }

    50% {
        opacity: 0.25;

        text-shadow: none;
    }
}


/* =========================================================
   FOOTER
========================================================= */

.system-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;

    background: var(--bg-deep);

    border-top: 1px solid rgba(79, 184, 143, 0.12);

    color: var(--text-muted);

    font-size: 8px;
    letter-spacing: 1.2px;
}

.separator {
    margin: 0 7px;
}

.footer-status {
    display: flex;
    align-items: center;

    gap: 6px;
}

.footer-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--green);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-thumb {
    background: rgba(79, 184, 143, 0.35);

    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 224, 157, 0.55);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .brand {
        min-width: 190px;
    }

    .brand-text span {
        display: none;
    }

    .nav-item {
        padding: 0 10px;

        font-size: 10px;
    }

    .system-health {
        display: none;
    }
}
/* =========================================================
   POST LOGIN - MAP TRACKING SHELL
========================================================= */

.tracking-page {
    position: absolute;
    inset: 0;

    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr)
        285px;

    grid-template-rows:
        minmax(0, 1fr)
        84px;

    background: #03110e;

    overflow: hidden;
}


/* =========================================================
   LEFT SIDEBAR
========================================================= */

.map-sidebar {
    grid-column: 1;
    grid-row: 1 / 3;

    padding: 18px 16px;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            rgba(3, 18, 14, 0.98),
            rgba(2, 12, 10, 0.98)
        );

    border-right:
        1px solid rgba(103, 114, 100, 0.20);
}


.panel-heading {
    padding-bottom: 15px;

    margin-bottom: 18px;

    border-bottom:
        1px solid rgba(103,114,100,0.16);
}

.panel-heading small {
    display: block;

    margin-bottom: 4px;

    color: #677264;

    font-size: 8px;

    letter-spacing: 1.6px;
}

.panel-heading strong {
    color: #ffffff;

    font-size: 13px;

    letter-spacing: 1px;
}


.map-tool-section {
    margin-bottom: 22px;
}

.map-tool-label {
    display: block;

    margin-bottom: 8px;

    color: #b6bfb6;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;
}


.map-select,
.map-search {
    width: 100%;

    height: 38px;

    padding: 0 11px;

    border:
        1px solid rgba(103,114,100,0.30);

    border-radius: 5px;

    background: #0b1814;

    color: #ffffff;

    font-size: 11px;

    outline: none;
}


.status-filter-list {
    display: grid;

    gap: 5px;
}


.status-filter {
    min-height: 36px;

    display: grid;

    grid-template-columns:
        10px
        1fr
        auto;

    align-items: center;

    gap: 8px;

    padding: 0 10px;

    border:
        1px solid transparent;

    border-radius: 5px;

    background: transparent;

    color: #b6bfb6;

    text-align: left;

    font-size: 10px;

    cursor: pointer;
}


.status-filter:hover,
.status-filter.active {
    border-color:
        rgba(103,114,100,0.24);

    background:
        rgba(22,64,23,0.16);

    color: #ffffff;
}


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}


.status-operational {
    background: #36a9ff;
}

.status-docking {
    background: #b6bfb6;
}

.status-damage {
    background: #ff4d4d;
}

.status-weather {
    background: #9a7dff;
}

.status-unreported {
    background: #ff9f1c;

    box-shadow:
        0 0 8px rgba(255,159,28,0.85);

    animation:
        unreportedBlink 1.2s infinite;
}


@keyframes unreportedBlink {

    50% {
        opacity: 0.25;
    }

}


.status-count {
    color: #677264;
}


.map-action {
    width: 100%;

    min-height: 36px;

    margin-bottom: 6px;

    padding: 0 10px;

    border:
        1px solid rgba(103,114,100,0.20);

    border-radius: 5px;

    background:
        rgba(255,255,255,0.015);

    color: #b6bfb6;

    text-align: left;

    font-size: 10px;

    cursor: pointer;
}


/* =========================================================
   MAP STAGE
========================================================= */

.map-stage {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;
    min-height: 0;

    position: relative;

    background: #071511;
}


.map-stage-toolbar {
    position: absolute;

    z-index: 10;

    top: 14px;
    left: 14px;
    right: 14px;

    height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 13px;

    border:
        1px solid rgba(103,114,100,0.20);

    border-radius: 5px;

    background:
        rgba(3,17,14,0.88);

    backdrop-filter:
        blur(8px);
}


.map-stage-toolbar small {
    display: block;

    color: #677264;

    font-size: 7px;

    letter-spacing: 1.3px;
}


.map-stage-toolbar strong {
    display: block;

    margin-top: 2px;

    color: #ffffff;

    font-size: 10px;

    letter-spacing: 0.8px;
}


.map-stage-status {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #b6bfb6;

    font-size: 8px;

    letter-spacing: 1px;
}


.map-stage-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 9px rgba(70,255,130,0.75);
}


.map-placeholder {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(22,64,23,0.20),
            transparent 48%
        ),
        #06130f;
}


.map-placeholder-center {
    display: grid;

    justify-items: center;

    gap: 7px;

    opacity: 0.45;
}


.map-placeholder-center img {
    width: 56px;
    height: 56px;

    object-fit: contain;
}


.map-placeholder-center strong {
    color: #ffffff;

    font-size: 12px;

    letter-spacing: 2px;
}


.map-placeholder-center span {
    color: #677264;

    font-size: 9px;

    letter-spacing: 0.7px;
}


/* =========================================================
   RIGHT FLEET PANEL
========================================================= */

.fleet-sidebar {
    grid-column: 3;
    grid-row: 1 / 3;

    padding: 18px 16px;

    background:
        linear-gradient(
            180deg,
            rgba(3,18,14,0.98),
            rgba(2,12,10,0.98)
        );

    border-left:
        1px solid rgba(103,114,100,0.20);
}


.fleet-summary-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    margin-bottom: 20px;
}


.fleet-stat {
    min-height: 66px;

    padding: 10px;

    border:
        1px solid rgba(103,114,100,0.18);

    border-radius: 5px;

    background:
        rgba(255,255,255,0.015);
}


.fleet-stat span {
    display: block;

    color: #677264;

    font-size: 8px;

    letter-spacing: 1px;
}


.fleet-stat strong {
    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-size: 22px;
}


.fleet-stat.alert strong {
    color: #ff9f1c;
}


.selected-vessel {
    padding: 14px;

    border:
        1px solid rgba(103,114,100,0.18);

    border-radius: 5px;
}


.selected-vessel small {
    display: block;

    color: #677264;

    font-size: 8px;

    letter-spacing: 1.2px;
}


.selected-vessel strong {
    display: block;

    margin-top: 9px;

    color: #ffffff;

    font-size: 11px;

    letter-spacing: 0.6px;
}


.selected-vessel span {
    display: block;

    margin-top: 5px;

    color: #677264;

    font-size: 9px;
}


/* =========================================================
   BOTTOM VESSEL INFO
========================================================= */

.vessel-info-strip {
    grid-column: 2;
    grid-row: 2;

    display: grid;

    grid-template-columns:
        1.4fr
        1.5fr
        0.8fr
        0.8fr
        1.2fr
        1.1fr;

    border-top:
        1px solid rgba(103,114,100,0.20);

    background:
        #04100d;
}


.vessel-info-item {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 0 13px;

    border-right:
        1px solid rgba(103,114,100,0.14);
}


.vessel-info-item small {
    color: #677264;

    font-size: 7px;

    letter-spacing: 1px;
}


.vessel-info-item strong {
    margin-top: 5px;

    overflow: hidden;

    color: #ffffff;

    font-size: 11px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.vessel-info-item.prediction strong {
    color: #b6bfb6;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {

    .tracking-page {
        grid-template-columns:
            220px
            minmax(0, 1fr)
            240px;
    }

}
/* =========================================================
   POST LOGIN HEADER CLOCK
========================================================= */

.header-clock {
    min-width: 175px;
    text-align: right;
}

.header-clock small {
    display: block;
    margin-bottom: 2px;

    color: var(--text-muted);

    font-size: 8px;
    letter-spacing: 1.3px;
}

.header-clock strong {
    display: block;

    color: var(--text-main);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;

    white-space: nowrap;
}


/* =========================================================
   POST LOGIN FOOTER FINAL
========================================================= */

.system-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-api {
    display: flex;
    align-items: center;
    gap: 7px;
}

.footer-api-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 4px rgba(255,255,255,0.95),
        0 0 9px rgba(70,255,130,0.65);
}

.footer-company {
    color: var(--text-soft);

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
}
/* =========================================================
   LEAFLET MAP
========================================================= */

#map {
    width: 100%;
    height: 100%;

    background: #06130f;

    z-index: 1;
}


/* Leaflet controls */

#map .leaflet-control-zoom {
    border: 1px solid rgba(103,114,100,0.30);
    border-radius: 5px;

    overflow: hidden;

    box-shadow: none;
}

#map .leaflet-control-zoom a {
    background: rgba(3,17,14,0.94);

    color: #b6bfb6;

    border-color: rgba(103,114,100,0.20);
}

#map .leaflet-control-zoom a:hover {
    background: #164017;

    color: #ffffff;
}


/* Attribution */

#map .leaflet-control-attribution {
    background: rgba(3,17,14,0.80);

    color: #677264;

    font-size: 8px;
}

#map .leaflet-control-attribution a {
    color: #b6bfb6;
}

/* =========================================================
   LEAFLET CORE - DARK/LIGHT ONLY
========================================================= */

#map .leaflet-pane,
#map .leaflet-tile,
#map .leaflet-marker-icon,
#map .leaflet-marker-shadow,
#map .leaflet-tile-container,
#map .leaflet-pane > svg,
#map .leaflet-pane > canvas,
#map .leaflet-zoom-box,
#map .leaflet-image-layer,
#map .leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}

#map.leaflet-container {
    overflow: hidden;
}

#map .leaflet-tile {
    visibility: hidden;
}

#map .leaflet-tile-loaded {
    visibility: inherit;
}

#map .leaflet-pane {
    z-index: 400;
}

#map .leaflet-tile-pane {
    z-index: 200;
}

#map .leaflet-overlay-pane {
    z-index: 400;
}

#map .leaflet-shadow-pane {
    z-index: 500;
}

#map .leaflet-marker-pane {
    z-index: 600;
}

#map .leaflet-tooltip-pane {
    z-index: 650;
}

#map .leaflet-popup-pane {
    z-index: 700;
}

#map .leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: auto;
}

#map .leaflet-top,
#map .leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

#map .leaflet-top {
    top: 58px;
}

#map .leaflet-bottom {
    bottom: 0;
}

#map .leaflet-left {
    left: 0;
}

#map .leaflet-right {
    right: 0;
}

#map .leaflet-control-zoom {
    margin-top: 10px;
    margin-left: 14px;
}



/* =========================================================
   QUICK WEATHER
========================================================= */

.quick-weather-section {
    display: none;
}

.quick-weather-section.active {
    display: block;
}

.quick-weather-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.quick-weather-btn {
    height: 34px;

    border: 1px solid rgba(79, 224, 157, 0.20);
    border-radius: 4px;

    background: rgba(4, 18, 14, 0.90);

    color: var(--text-soft);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;

    cursor: pointer;

    transition: var(--transition);
}

.quick-weather-btn:hover {
    color: #fff;

    border-color:
        rgba(79, 224, 157, 0.50);
}

.quick-weather-btn.active {
    color: var(--green-bright);

    border-color: var(--green);

    background:
        rgba(79, 224, 157, 0.08);
}


/* =========================================================
   MAP ENGINE STACK - FINAL
========================================================= */

.map-stage {
    position: relative;
}

.map-stack {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.map-engine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.map-engine.active {
    display: block;
}

#map,
#windy {
    width: 100%;
    height: 100%;
    background: #06130f;
}


/* =========================================================
   LEAFLET DARK/LIGHT CONTROLS - SCOPED ONLY TO #map
========================================================= */

#map .leaflet-control-zoom {
    border: 1px solid rgba(90, 125, 110, 0.45);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: none;
}

#map .leaflet-control-zoom a {
    display: block;

    width: 30px;
    height: 30px;
    line-height: 30px;

    text-align: center;
    text-decoration: none;

    background: rgba(3, 17, 14, 0.96);
    color: #d4ddd7;

    border-bottom:
        1px solid rgba(90, 125, 110, 0.25);

    font-size: 18px;
    font-weight: 400;
}

#map .leaflet-control-zoom a:last-child {
    border-bottom: 0;
}

#map .leaflet-control-zoom a:hover {
    background: #123a27;
    color: #ffffff;
}

#map .leaflet-control-zoom a.leaflet-disabled {
    opacity: 0.35;
    cursor: default;
}


/* Keep zoom below GLOBAL FLEET MAP toolbar */

#map .leaflet-top.leaflet-left {
    top: 58px;
}

#map .leaflet-control-zoom {
    margin-top: 10px;
    margin-left: 14px;
}


/* Attribution */

#map .leaflet-control-attribution {
    padding: 2px 5px;

    background: rgba(3, 17, 14, 0.78);

    color: #738078;

    font-size: 8px;
}

#map .leaflet-control-attribution a {
    color: #aeb8b1;
}


/* =========================================================
   WINDY NATIVE UI CLEARANCE
   Keep Windy controls below Global Fleet Map toolbar
========================================================= */

#windy {
    top: 58px;
    bottom: auto;
    height: calc(100% - 58px);
}


/* =========================================================
   ROBUST VESSEL MARKERS
========================================================= */

.robust-vessel-div-icon {
    background: transparent;
    border: 0;
}

.vessel-marker {
    width: 40px;
    height: 52px;

    transform-origin: 50% 50%;

    filter:
        drop-shadow(
            0 1px 2px rgba(0,0,0,0.95)
        )
        drop-shadow(
            0 0 3px rgba(255,255,255,0.65)
        );
}

.vessel-marker svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.vessel-marker-shape {
    fill: var(--vessel-fill);

    stroke: var(--vessel-edge);
    stroke-width: 3;

    stroke-linejoin: round;

    paint-order:
        stroke fill;

    filter:
        drop-shadow(
            0 0 2px
            var(--vessel-edge)
        );
}

.vessel-marker-center {
    fill:
        rgba(0,0,0,0.65);

    stroke:
        rgba(255,255,255,0.90);

    stroke-width: 1;
}

.vessel-marker-selected::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 54px;
    height: 54px;

    transform:
        translate(-50%, -50%);

    border:
        2px solid rgba(255,255,255,0.95);

    border-radius: 50%;

    box-shadow:
        0 0 10px
        rgba(255,255,255,0.80);

    pointer-events: none;
}


/* =========================================================
   COMPACT VESSEL VECTOR MARKER
========================================================= */

.robust-vessel-vector-icon {
    background: transparent !important;
    border: 0 !important;
}

.vessel-vector-marker {
    width: 14px;
    height: 18px;

    transform-origin: 50% 50%;

    filter:
        drop-shadow(
            0 1px 1px
            rgba(0, 0, 0, 0.95)
        );
}

.vessel-vector-marker svg {
    display: block;

    width: 14px;
    height: 18px;

    overflow: visible;
}

.vessel-vector-shape {
    fill:
        var(--marker-fill);

    stroke:
        var(--marker-edge);

    stroke-width:
        1.5px;

    stroke-linejoin:
        round;

    stroke-linecap:
        round;

    paint-order:
        stroke fill;
}


/* SELECTED VESSEL */

.vessel-vector-marker.selected {
    filter:
        drop-shadow(
            0 0 2px #ffffff
        )
        drop-shadow(
            0 0 5px #ffffff
        );
}



/* =========================================================
   MAP FIRST LAYOUT
========================================================= */

.tracking-page {
    grid-template-columns:
        minmax(0, 1fr)
        285px;

    grid-template-rows:
        minmax(0, 1fr);

    position: relative;
}


/* LEFT TRACKING TOOLS AS DRAWER */

.map-sidebar {
    position: absolute;

    z-index: 1200;

    left: 0;
    top: 0;
    bottom: 0;

    width: 250px;

    transform:
        translateX(-100%);

    transition:
        transform 220ms ease;

    box-shadow:
        14px 0 40px
        rgba(0, 0, 0, 0.42);

    backdrop-filter:
        blur(10px);
}

.map-sidebar.open {
    transform:
        translateX(0);
}


/* MAP NOW USES FULL AVAILABLE WIDTH */

.map-stage {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;
    min-height: 0;
}


/* RIGHT SUMMARY REMAINS */

.fleet-sidebar {
    grid-column: 2;
    grid-row: 1;

    position: relative;
    z-index: 10;
}


/* TRACKING TOOLS OPEN BUTTON */

.tracking-tools-toggle {
    position: absolute;

    z-index: 1100;

    left: 14px;
    top: 72px;

    min-height: 34px;

    padding: 0 12px;

    border:
        1px solid rgba(103, 114, 100, 0.35);

    border-radius: 5px;

    background:
        rgba(3, 17, 14, 0.92);

    color: #d8e0da;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.9px;

    cursor: pointer;

    backdrop-filter:
        blur(8px);
}

.tracking-tools-toggle:hover {
    background:
        rgba(22, 64, 23, 0.82);

    color: #ffffff;
}


/* DRAWER HEADER */

.tracking-drawer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tracking-tools-close {
    width: 30px;
    height: 30px;

    border:
        1px solid rgba(103, 114, 100, 0.28);

    border-radius: 50%;

    background:
        transparent;

    color: #b6bfb6;

    font-size: 18px;

    cursor: pointer;
}


/* =========================================================
   VESSEL QUICK INFO
   Hidden until a vessel is selected
========================================================= */

.vessel-info-strip {
    position: absolute;

    z-index: 1000;

    left: 0;
    right: 285px;
    bottom: 0;

    height: 84px;

    display: grid;

    transform:
        translateY(100%);

    opacity: 0;

    pointer-events: none;

    transition:
        transform 220ms ease,
        opacity 220ms ease;
}

.vessel-info-strip.visible {
    transform:
        translateY(0);

    opacity: 1;

    pointer-events: auto;
}


/* Give map full height by default */

.map-stage,
.map-stack,
#map,
#windy {
    height: 100%;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .tracking-page {
        grid-template-columns:
            minmax(0, 1fr)
            240px;
    }

    .vessel-info-strip {
        right: 240px;
    }

}


/* =========================================================
   MAP FIRST HEIGHT FIX
   Full viewport map when vessel info is closed
========================================================= */

.tracking-page {
    height: calc(100vh - 80px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.map-stage {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.map-stack {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#map,
#windy {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Quick vessel info remains overlay.
   It must NOT reserve permanent vertical space. */

.vessel-info-strip {
    position: absolute !important;
    left: 0 !important;
    right: 285px !important;
    bottom: 0 !important;
    z-index: 1050 !important;
}


/* =========================================================
   FULL MAP CONTROL CLEARANCE - FINAL
========================================================= */

/* Toolbar GLOBAL FLEET MAP selalu paling atas */
.map-stage-toolbar {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;

    z-index: 1400 !important;
}


/* Tracking Tools button di bawah toolbar */
.tracking-tools-toggle {
    top: 76px !important;
    left: 14px !important;

    z-index: 1350 !important;
}


/* =========================================================
   LEAFLET DARK / LIGHT
========================================================= */

/* Zoom turun di bawah toolbar + Tracking Tools */
#map .leaflet-top.leaflet-left {
    top: 118px !important;
    left: 4px !important;
}

#map .leaflet-control-zoom {
    margin-top: 0 !important;
    margin-left: 10px !important;
}


/* =========================================================
   WINDY
========================================================= */

/*
   Windy tetap memenuhi area map.
   Kita hanya beri ruang visual di sisi atas untuk control.
*/

#windy {
    top: 0 !important;
    height: 100% !important;
}


/* Native Windy controls kanan atas */
#windy .leaflet-top.leaflet-right {
    top: 76px !important;
    right: 8px !important;
}


/* Bila Windy membuat control kiri atas */
#windy .leaflet-top.leaflet-left {
    top: 76px !important;
    left: 8px !important;
}


/* Native control harus tetap di atas map,
   tapi di bawah toolbar dashboard */
#windy .leaflet-control {
    z-index: 1300 !important;
}


/* =========================================================
   WINDY BOTTOM TIMELINE
========================================================= */

#windy .leaflet-bottom {
    bottom: 8px !important;
}


/* =========================================================
   COMPACT GLOBAL FLEET MAP BADGE
========================================================= */

.map-stage-toolbar {
    position: absolute !important;

    top: 14px !important;
    left: 14px !important;
    right: auto !important;

    width: 240px !important;
    height: 48px !important;

    padding: 8px 12px !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(79, 224, 157, 0.18) !important;
    border-radius: 6px !important;

    background: rgba(3, 17, 14, 0.92) !important;

    z-index: 1400 !important;
}


/* Compact text */

.map-stage-toolbar small {
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
}

.map-stage-toolbar strong {
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.7px !important;
}


/* LIVE indicator */

.map-stage-status {
    font-size: 8px !important;
    margin-left: auto !important;
}


/* Tracking Tools sits directly below badge */

.tracking-tools-toggle {
    top: 70px !important;
    left: 14px !important;
}


/* Leaflet zoom below Tracking Tools */

#map .leaflet-top.leaflet-left {
    top: 112px !important;
}


/* Windy native right controls no longer need
   large clearance because toolbar is only on left */

#windy .leaflet-top.leaflet-right {
    top: 10px !important;
    right: 8px !important;
}


/* =========================================================
   TOPBAR MAP STATUS
========================================================= */

.topbar-map-status {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-left: 12px;
    padding-left: 16px;

    border-left:
        1px solid rgba(79, 224, 157, 0.14);
}

.topbar-map-status small {
    display: block;

    color: var(--text-muted);

    font-size: 6px;
    line-height: 1;

    letter-spacing: 1px;
}

.topbar-map-status strong {
    display: block;

    margin-top: 3px;

    color: var(--text-main);

    font-size: 9px;
    line-height: 1;

    letter-spacing: 0.7px;
}

.topbar-map-live {
    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--text-soft);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.7px;
}

.topbar-map-live i {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green-bright);

    box-shadow:
        0 0 8px var(--green);
}


/* Old floating toolbar no longer used */

.map-stage-toolbar {
    display: none !important;
}


/* Controls can now use upper map area */

.tracking-tools-toggle {
    top: 14px !important;
}

#map .leaflet-top.leaflet-left {
    top: 56px !important;
}

#windy .leaflet-top.leaflet-right {
    top: 8px !important;
}


/* =========================================================
   RIGHT FLEET SIDEBAR - SLIM + TRANSPARENT
========================================================= */

/* Reduce right sidebar width approximately 25% */
.right-sidebar {
    width: 225px !important;
    min-width: 225px !important;
}

/* Transparent fleet panel */
.right-sidebar,
.fleet-sidebar,
.vessel-summary {
    background: rgba(2, 16, 13, 0.25) !important;
}

/* Keep cards readable */
.right-sidebar .summary-card,
.right-sidebar .selected-vessel {
    background: rgba(2, 16, 13, 0.72) !important;
}

/* Slightly tighter internal spacing */
.right-sidebar {
    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* =========================================================
   LEFT + BOTTOM PANELS - TRANSPARENT FINAL
========================================================= */


/* ---------------------------------------------------------
   LEFT TRACKING TOOLS
   75% transparent / 25% background
--------------------------------------------------------- */

.tracking-sidebar {
    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* Keep controls readable */

.tracking-sidebar select,
.tracking-sidebar input,
.tracking-sidebar button {
    background:
        rgba(2, 16, 13, 0.62) !important;
}


/* ---------------------------------------------------------
   BOTTOM VESSEL QUICK INFO / WINDOW LOG
--------------------------------------------------------- */

.vessel-info-strip {
    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* Individual bottom information cells */

.vessel-info-item {
    background:
        rgba(2, 16, 13, 0.42) !important;
}


/* ---------------------------------------------------------
   PANEL BORDERS
   Keep separation visible without solid blocks
--------------------------------------------------------- */

.tracking-sidebar {
    border-right:
        1px solid rgba(79, 224, 157, 0.14) !important;
}

.vessel-info-strip {
    border-top:
        1px solid rgba(79, 224, 157, 0.14) !important;
}


/* =========================================================
   RIGHT FLEET SIDEBAR - FINAL SLIM VERSION
   25% narrower + 75% transparent background
========================================================= */

/* Main layout:
   old right panel = 285px
   new = ~214px
*/
.tracking-page {
    grid-template-columns:
        minmax(0, 1fr)
        214px !important;
}


/* Right fleet panel */
.fleet-sidebar {
    width: 214px !important;
    min-width: 214px !important;

    padding:
        14px 10px !important;

    box-sizing:
        border-box !important;

    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* Summary cards remain readable,
   but still slightly transparent */
.fleet-stat {
    background:
        rgba(2, 16, 13, 0.55) !important;
}


/* Selected vessel card */
.selected-vessel {
    padding:
        11px !important;

    background:
        rgba(2, 16, 13, 0.55) !important;
}


/* Slightly compact typography */

.fleet-sidebar .panel-heading strong {
    font-size:
        13px !important;
}

.fleet-sidebar .panel-heading small {
    font-size:
        7px !important;
}

.fleet-stat strong {
    font-size:
        18px !important;
}

.fleet-stat span {
    font-size:
        7px !important;
}


/* Bottom quick-info overlay must follow
   new right sidebar width */
.vessel-info-strip {
    right:
        214px !important;
}


/* Responsive correction */
@media (max-width: 1050px) {

    .tracking-page {
        grid-template-columns:
            minmax(0, 1fr)
            190px !important;
    }

    .fleet-sidebar {
        width:
            190px !important;

        min-width:
            190px !important;
    }

    .vessel-info-strip {
        right:
            190px !important;
    }

}


/* =========================================================
   LEFT + BOTTOM PANELS - TRANSPARENT FINAL
========================================================= */


/* ---------------------------------------------------------
   LEFT TRACKING TOOLS
   75% transparent / 25% background
--------------------------------------------------------- */

.tracking-sidebar {
    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* Keep controls readable */

.tracking-sidebar select,
.tracking-sidebar input,
.tracking-sidebar button {
    background:
        rgba(2, 16, 13, 0.62) !important;
}


/* ---------------------------------------------------------
   BOTTOM VESSEL QUICK INFO / WINDOW LOG
--------------------------------------------------------- */

.vessel-info-strip {
    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* Individual bottom information cells */

.vessel-info-item {
    background:
        rgba(2, 16, 13, 0.42) !important;
}


/* ---------------------------------------------------------
   PANEL BORDERS
   Keep separation visible without solid blocks
--------------------------------------------------------- */

.tracking-sidebar {
    border-right:
        1px solid rgba(79, 224, 157, 0.14) !important;
}

.vessel-info-strip {
    border-top:
        1px solid rgba(79, 224, 157, 0.14) !important;
}


/* =========================================================
   VMS MAP GLASS LAYOUT - FINAL
========================================================= */

/* ---------------------------------------------------------
   MAIN TRACKING CONTAINER
--------------------------------------------------------- */

.tracking-page {
    position: relative !important;
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   LEFT TRACKING TOOLS
   75% transparent
--------------------------------------------------------- */

.map-sidebar {
    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    border-right:
        1px solid rgba(79,224,157,0.18) !important;
}


/* Heading remains readable */

.map-sidebar .panel-heading {
    background:
        rgba(2,16,13,0.16) !important;
}


/* Inputs / selectors remain darker */

.map-sidebar select,
.map-sidebar input,
.map-sidebar .map-action {
    background:
        rgba(2,16,13,0.58) !important;

    backdrop-filter:
        blur(4px);
}


/* ---------------------------------------------------------
   RIGHT FLEET SUMMARY
   214 px + 75% transparent
--------------------------------------------------------- */

.tracking-page {
    grid-template-columns:
        minmax(0,1fr)
        214px !important;
}

.fleet-sidebar {
    width: 214px !important;
    min-width: 214px !important;

    padding:
        14px 10px !important;

    background:
        rgba(2,16,13,0.25) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    border-left:
        1px solid rgba(79,224,157,0.18) !important;
}


/* Cards readable but still transparent */

.fleet-stat,
.selected-vessel {
    background:
        rgba(2,16,13,0.48) !important;

    backdrop-filter:
        blur(5px);
}


/* ---------------------------------------------------------
   VESSEL QUICK INFO
   FLOATING OVER MAP
--------------------------------------------------------- */

.vessel-info-strip {
    position: absolute !important;

    left: 22px !important;
    right: 236px !important;
    bottom: 20px !important;

    width: auto !important;
    height: auto !important;

    min-height: 82px !important;

    grid-column: auto !important;
    grid-row: auto !important;

    display: grid !important;

    grid-template-columns:
        1.35fr
        1.45fr
        0.70fr
        0.70fr
        1.15fr
        1.05fr !important;

    align-items:
        stretch !important;

    padding:
        10px 12px !important;

    box-sizing:
        border-box !important;

    background:
        rgba(2,16,13,0.28) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    border:
        1px solid rgba(79,224,157,0.22) !important;

    border-radius:
        7px !important;

    box-shadow:
        0 10px 32px rgba(0,0,0,0.40);

    z-index:
        1250 !important;


    /* HIDDEN DEFAULT */

    transform:
        translateY(calc(100% + 40px)) !important;

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

    transition:
        transform 220ms ease,
        opacity 220ms ease,
        visibility 220ms ease !important;
}


/* Show ONLY after vessel selection */

.vessel-info-strip.visible {
    transform:
        translateY(0) !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;
}


/* Individual info cells */

.vessel-info-item {
    min-width:
        0 !important;

    padding:
        8px 12px !important;

    background:
        transparent !important;

    border-right:
        1px solid rgba(79,224,157,0.15) !important;
}

.vessel-info-item:last-child {
    border-right:
        0 !important;
}


/* Labels */

.vessel-info-item small {
    display:
        block !important;

    margin-bottom:
        6px !important;

    color:
        rgba(177,205,192,0.66) !important;

    font-size:
        7px !important;

    letter-spacing:
        1px !important;
}


/* Values */

.vessel-info-item strong {
    display:
        block !important;

    color:
        #ffffff !important;

    font-size:
        12px !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


/* ---------------------------------------------------------
   MAP REMAINS FULL SIZE
--------------------------------------------------------- */

.map-stage,
.map-stack,
#map,
#windy {
    width:
        100% !important;

    height:
        100% !important;
}


/* ---------------------------------------------------------
   MOBILE / SMALL SCREEN
--------------------------------------------------------- */

@media (max-width: 1050px) {

    .tracking-page {
        grid-template-columns:
            minmax(0,1fr)
            190px !important;
    }

    .fleet-sidebar {
        width:
            190px !important;

        min-width:
            190px !important;
    }

    .vessel-info-strip {
        right:
            210px !important;
    }
}


/* =========================================================
   TOP + RIGHT GLASS PANELS - FINAL OVERRIDE
========================================================= */

/* TOP NAVIGATION / HEADER */
.topbar {
    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    border-bottom:
        1px solid rgba(79, 224, 157, 0.16) !important;

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.18) !important;
}


/* Brand area must not stay opaque */
.topbar .brand,
.topbar .main-nav,
.topbar .topbar-right,
.topbar-map-status {
    background:
        transparent !important;
}


/* RIGHT FLEET SIDEBAR */
.fleet-sidebar {
    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(9px) !important;

    -webkit-backdrop-filter:
        blur(9px) !important;

    border-left:
        1px solid rgba(79, 224, 157, 0.16) !important;

    box-shadow:
        -8px 0 24px rgba(0, 0, 0, 0.16) !important;
}


/* Remove opaque background from heading */
.fleet-sidebar .panel-heading {
    background:
        transparent !important;
}


/* Cards remain readable but translucent */
.fleet-summary-grid .fleet-stat,
.fleet-sidebar .selected-vessel {
    background:
        rgba(2, 16, 13, 0.42) !important;

    backdrop-filter:
        blur(5px) !important;

    -webkit-backdrop-filter:
        blur(5px) !important;

    border-color:
        rgba(120, 190, 160, 0.22) !important;
}


/* =========================================================
   RIGHT PANEL - VESSEL LIST
========================================================= */

.fleet-sidebar {
    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* Summary stays compact */

.fleet-summary-grid {
    flex: 0 0 auto;
}


/* Vessel browser fills remaining height */

.fleet-vessel-browser {
    min-height: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    margin-top: 14px;
}


/* Search */

.fleet-vessel-search {
    display: block;

    flex: 0 0 auto;
}

.fleet-vessel-search > span {
    display: block;

    margin-bottom: 6px;

    color: rgba(177,205,192,0.60);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.1px;
}

.fleet-vessel-search input {
    width: 100%;
    height: 34px;

    box-sizing: border-box;

    padding: 0 10px;

    border:
        1px solid rgba(79,224,157,0.20);

    border-radius: 5px;

    outline: none;

    background:
        rgba(2,16,13,0.48);

    color: #ffffff;

    font-size: 10px;
}

.fleet-vessel-search input:focus {
    border-color:
        rgba(79,224,157,0.55);
}


/* Scrollable vessel list */

.fleet-vessel-list {
    min-height: 0;
    flex: 1;

    margin-top: 10px;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 2px;
}


/* Vessel item */

.fleet-vessel-row {
    width: 100%;

    display: grid;
    grid-template-columns:
        18px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 8px;

    box-sizing: border-box;

    margin-bottom: 6px;
    padding: 9px 8px;

    border:
        1px solid rgba(120,190,160,0.17);

    border-radius: 5px;

    background:
        rgba(2,16,13,0.40);

    cursor: pointer;

    transition:
        background 160ms ease,
        border-color 160ms ease;
}

.fleet-vessel-row:hover {
    background:
        rgba(2,16,13,0.62);

    border-color:
        rgba(79,224,157,0.35);
}

.fleet-vessel-row.selected {
    border-color:
        rgba(255,255,255,0.65);

    box-shadow:
        0 0 8px rgba(255,255,255,0.12);
}


/* Small heading-aware vessel symbol */

.fleet-vessel-symbol {
    width: 14px;
    height: 18px;

    display: grid;
    place-items: center;

    transform-origin: 50% 50%;
}

.fleet-vessel-symbol svg {
    width: 14px;
    height: 18px;

    overflow: visible;
}


/* Vessel text */

.fleet-vessel-main {
    min-width: 0;
}

.fleet-vessel-name {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
}

.fleet-vessel-report {
    display: block;

    margin-top: 3px;

    color: rgba(177,205,192,0.55);

    font-size: 7px;
}


/* Moving / Stop text */

.fleet-vessel-state {
    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

.fleet-vessel-state.moving {
    color: #16C7F3;
}

.fleet-vessel-state.stop {
    color: #FFD43B;
}


/* scrollbar */

.fleet-vessel-list::-webkit-scrollbar {
    width: 4px;
}

.fleet-vessel-list::-webkit-scrollbar-thumb {
    background:
        rgba(79,224,157,0.22);

    border-radius: 4px;
}


/* =========================================================
   FULL BLEED MAP BEHIND HEADER + SIDE PANELS
========================================================= */

:root {
    --vms-topbar-height: 80px;
}


/* Tracking canvas naik sampai ke belakang header */

.tracking-page {
    position: relative !important;

    margin-top:
        calc(-1 * var(--vms-topbar-height)) !important;

    padding-top:
        var(--vms-topbar-height) !important;

    height:
        100vh !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


/* Map benar-benar full canvas, termasuk di belakang header */

.map-stage {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;
}


/* Header berada di atas map */

.topbar {
    position: relative !important;

    z-index: 2000 !important;

    background:
        rgba(2, 16, 13, 0.26) !important;

    backdrop-filter:
        blur(10px) saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(10px) saturate(120%) !important;
}


/* Semua bagian header jangan punya background solid */

.topbar > *,
.topbar .brand,
.topbar .main-nav,
.topbar .topbar-right,
.topbar-map-status {
    background:
        transparent !important;
}


/* =========================================================
   RIGHT FLEET PANEL GLASS
========================================================= */

.fleet-sidebar {
    position: absolute !important;

    top:
        var(--vms-topbar-height) !important;

    right: 0 !important;
    bottom: 0 !important;

    width: 214px !important;
    min-width: 214px !important;

    z-index: 1500 !important;

    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(9px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(9px) saturate(115%) !important;
}


/* Remove remaining solid children */

.fleet-sidebar .panel-heading,
.fleet-vessel-browser {
    background:
        transparent !important;
}


.fleet-summary-grid .fleet-stat,
.fleet-sidebar .selected-vessel,
.fleet-vessel-row,
.fleet-vessel-search input {
    background:
        rgba(2, 16, 13, 0.42) !important;
}


/* =========================================================
   LEFT DRAWER
========================================================= */

.map-sidebar {
    top:
        var(--vms-topbar-height) !important;

    background:
        rgba(2, 16, 13, 0.25) !important;

    backdrop-filter:
        blur(9px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(9px) saturate(115%) !important;
}


/* =========================================================
   VESSEL QUICK INFO
========================================================= */

.vessel-info-strip {
    left: 286px !important;
    right: 234px !important;

    bottom: 18px !important;
}


/* =========================================================
   VESSEL LIST HEADING ICON
========================================================= */

.fleet-vessel-name-line {
    display: flex;
    align-items: center;

    gap: 6px;

    min-width: 0;
}

.fleet-vessel-name-line .fleet-vessel-name {
    flex: 1;
    min-width: 0;
}

.fleet-heading-icon {
    flex: 0 0 auto;

    display: inline-block;

    color: #ffffff;

    font-size: 8px;
    line-height: 1;

    transform-origin: 50% 50%;

    text-shadow:
        0 0 4px rgba(255,255,255,0.45);
}


/* =========================================================
   FLEET SUMMARY - 7 STATUS LAYOUT
========================================================= */

.fleet-summary-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 6px !important;
}

.fleet-stat {
    min-width: 0 !important;

    padding:
        8px 7px !important;
}

.fleet-stat.unreported {
    grid-column:
        1 / -1 !important;
}


/* STATUS COLORS */

.fleet-stat.active strong {
    color: #16C7F3 !important;
}

.fleet-stat.idle strong {
    color: #FFD43B !important;
}

.fleet-stat.docking strong {
    color: #A78BFA !important;
}

.fleet-stat.damage strong {
    color: #FF4D5A !important;
}

.fleet-stat.weather strong {
    color: #FF9F1C !important;
}

.fleet-stat.unreported strong {
    color: #FF5C35 !important;
}


/* =========================================================
   PANEL ALIGNMENT + WINDY CONTROL FINAL
========================================================= */

/* LEFT PANEL - start at top of tracking area */
.map-sidebar {
    top: 0 !important;
    bottom: 0 !important;
}


/* RIGHT PANEL - start at top of tracking area */
.fleet-sidebar {
    top: 0 !important;
    bottom: 0 !important;
}


/* Windy controls remain inside map,
   immediately left of right sidebar */
#windy .leaflet-top.leaflet-right {
    top: 10px !important;
    right: 224px !important;
}


/* Dark / Light controls */
#map .leaflet-top.leaflet-right {
    right: 224px !important;
}


/* Keep map full canvas */
.map-stage,
.map-stack,
#map,
#windy {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}


/* =========================================================
   QUICK INFO HEADING COMPASS
========================================================= */

.quick-heading-value {
    display: flex !important;
    align-items: center !important;

    gap: 7px;
}

.quick-heading-compass {
    width: 18px;
    height: 18px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    border:
        1px solid rgba(79,224,157,0.45);

    border-radius: 50%;

    background:
        rgba(2,16,13,0.45);

    position: relative;
}

.quick-heading-compass::before {
    content: "▲";

    color: #ffffff;

    font-size: 9px;
    line-height: 1;

    transform:
        rotate(var(--heading-angle, 0deg));

    transform-origin:
        50% 50%;
}



/* =========================================================
   ROBUST VMS
   COMPACT SUMMARY + LARGE HEADING COMPASS + ASSET PHOTO
========================================================= */


/* ---------------------------------------------------------
   FLEET SUMMARY - 50% SHORTER
--------------------------------------------------------- */

.fleet-summary-grid {
    gap: 5px !important;
    margin-bottom: 10px !important;
}

.fleet-stat {
    min-height: 34px !important;
    height: 34px !important;

    padding: 4px 7px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box !important;
}

.fleet-stat span {
    font-size: 6px !important;
    letter-spacing: 0.75px !important;
    line-height: 1 !important;
}

.fleet-stat strong {
    margin-top: 0 !important;

    font-size: 15px !important;
    line-height: 1 !important;
}


/* UNREPORTED full width but compact */

.fleet-stat.unreported {
    grid-column: 1 / -1 !important;
}


/* ---------------------------------------------------------
   BOTTOM QUICK INFO GRID
--------------------------------------------------------- */

.vessel-info-strip {
    grid-template-columns:
        105px
        1.35fr
        1.45fr
        0.75fr
        0.85fr
        1.15fr
        1.05fr !important;
}


/* ---------------------------------------------------------
   ASSET PHOTO
--------------------------------------------------------- */

.vessel-asset-photo {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 6px 10px;

    box-sizing: border-box;

    border-right:
        1px solid rgba(103,114,100,0.18);
}

.vessel-asset-photo small {
    color: #677264;

    font-size: 6px;
    letter-spacing: 1px;

    margin-bottom: 5px;
}

.asset-photo-frame {
    width: 78px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 4px;

    border:
        1px solid rgba(57,255,136,0.38);

    background:
        rgba(2,16,13,0.50);
}

.asset-photo-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.asset-photo-frame span {
    color:
        rgba(255,255,255,0.34);

    font-size: 6px;
    letter-spacing: 0.8px;
}


/* ---------------------------------------------------------
   HEADING VALUE
--------------------------------------------------------- */

.quick-heading-value {
    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   LARGE NEON HEADING COMPASS
--------------------------------------------------------- */

.quick-heading-compass {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    flex: 0 0 24px !important;

    border-radius: 50% !important;

    background:
        rgba(2,16,13,0.72) !important;

    border:
        2px solid #39ff88 !important;

    box-sizing:
        border-box !important;

    box-shadow:
        0 0 4px rgba(57,255,136,0.95),
        0 0 10px rgba(57,255,136,0.50) !important;
}


/* WHITE COMPASS ARROW */

.quick-heading-compass::before {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 0 !important;
    height: 0 !important;

    border-left:
        5px solid transparent !important;

    border-right:
        5px solid transparent !important;

    border-bottom:
        11px solid #ffffff !important;

    transform:
        translate(-50%, -58%)
        rotate(var(--heading-angle, 0deg)) !important;

    transform-origin:
        50% 58% !important;
}


/* small center pivot */

.quick-heading-compass::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 3px !important;
    height: 3px !important;

    transform:
        translate(-50%, -50%) !important;

    border-radius:
        50% !important;

    background:
        #ffffff !important;
}



/* =========================================================
   FINAL UI ADJUSTMENT
   1. SMALLER ROBUST LOGO
   2. WINDY CONTROLS BEFORE RIGHT FLEET PANEL
========================================================= */


/* ---------------------------------------------------------
   ROBUST LOGO - SMALLER
--------------------------------------------------------- */

.topbar .brand {
    display: flex !important;
    align-items: center !important;

    padding-left: 18px !important;

    width: 245px !important;
    min-width: 245px !important;
}

.topbar .brand-logo {
    width: 205px !important;
    max-width: 205px !important;
    height: auto !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   WINDY CONTROLS
   Move Wind / + / - to the LEFT of right fleet panel.

   fleet panel width = approximately 225px
   additional clearance = 12px
--------------------------------------------------------- */

#windy .leaflet-top.leaflet-right {
    right: 237px !important;
    left: auto !important;

    top: 10px !important;

    z-index: 1200 !important;
}


/* Make sure individual Windy controls follow container */
#windy .leaflet-right .leaflet-control {
    margin-right: 0 !important;
}


/* ---------------------------------------------------------
   LEAFLET NORMAL MAP
   Same position when Dark / Light map is selected
--------------------------------------------------------- */

#map .leaflet-top.leaflet-right {
    right: 237px !important;
    left: auto !important;

    top: 10px !important;

    z-index: 1200 !important;
}

#map .leaflet-right .leaflet-control {
    margin-right: 0 !important;
}


/* =========================================================
   HARD OVERRIDE - LOGO + WINDY CONTROL POSITION
========================================================= */

/* 1. ROBUST LOGO - clearly smaller */
header.topbar .brand {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;

    padding-left: 14px !important;
    padding-right: 10px !important;
}

header.topbar .brand img.brand-logo {
    width: 155px !important;
    max-width: 155px !important;
    height: auto !important;
}


/* 2. WINDY NATIVE CONTROLS
   Force entire right control group left of fleet sidebar
*/

#windy .leaflet-control-container .leaflet-top.leaflet-right,
#windy .leaflet-top.leaflet-right {
    right: 226px !important;
    left: auto !important;

    transform: translateX(-8px) !important;
}


/* Windy sometimes applies margins to individual controls */
#windy .leaflet-control-container .leaflet-right .leaflet-control,
#windy .leaflet-right .leaflet-control {
    margin-right: 0 !important;
}


/* Dark / Light equivalent position */
#map .leaflet-control-container .leaflet-top.leaflet-right,
#map .leaflet-top.leaflet-right {
    right: 226px !important;
    left: auto !important;

    transform: translateX(-8px) !important;
}



/* =========================================================
   FINAL - ROBUST LOGO SIZE
========================================================= */

.topbar .brand,
header.topbar .brand {
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;

    padding-left: 18px !important;
    padding-right: 12px !important;
}

.topbar .brand-logo,
header.topbar .brand img.brand-logo {
    width: 170px !important;
    max-width: 170px !important;
    height: auto !important;
}


/* =========================================================
   FINAL - WINDY NATIVE CONTROLS
========================================================= */

/*
 Right fleet panel ≈225px.

 Windy controls are moved LEFT of that panel,
 leaving approximately 14px clearance.
*/

#windy .robust-windy-position {
    position: fixed !important;

    right: 245px !important;
    left: auto !important;

    top: 91px !important;

    z-index: 5000 !important;
}


/* Zoom + / - */

#windy .robust-windy-zoom {
    position: relative !important;

    right: 235px !important;

    z-index: 5000 !important;
}


/* =========================================================
   ROBUST WINDY EXTERNAL CONTROL DOCK
========================================================= */

#robustWindyControlDock {

    position: absolute !important;

    top: 12px !important;

    right: 226px;

    z-index: 10000 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-end !important;

    gap: 5px !important;

    pointer-events: none !important;
}


/* Restore interaction only on actual controls */

#robustWindyControlDock
.robust-native-windy-control {

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    margin: 0 !important;

    pointer-events: auto !important;

    z-index: auto !important;
}


/* Wind button first */

#robustWindyControlDock
.robust-native-wind {

    order: 1 !important;
}


/* Zoom buttons below */

#robustWindyControlDock
.robust-native-zoom {

    order: 2 !important;
}


/* Right panel stays below control dock */

.fleet-sidebar {
    z-index: 1500 !important;
}


/* =========================================================
   RIGHT VESSEL PANEL AS DRAWER
========================================================= */

.fleet-sidebar {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 214px !important;
    min-width: 214px !important;

    transform:
        translateX(100%) !important;

    transition:
        transform 220ms ease !important;

    z-index: 1500 !important;
}

.fleet-sidebar.open {
    transform:
        translateX(0) !important;
}


/* open button */

.fleet-sidebar-toggle {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    z-index: 1450 !important;

    height: 34px;

    padding: 0 12px;

    border:
        1px solid rgba(79,224,157,0.30);

    border-radius: 5px;

    background:
        rgba(2,16,13,0.78);

    color: #e8f6ef;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.8px;

    cursor: pointer;

    backdrop-filter: blur(7px);
}

.fleet-sidebar-toggle:hover {
    border-color:
        rgba(79,224,157,0.60);

    color: #ffffff;
}


/* drawer heading */

.fleet-drawer-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.fleet-sidebar-close {
    width: 28px;
    height: 28px;

    border:
        1px solid rgba(79,224,157,0.25);

    border-radius: 50%;

    background: transparent;

    color: #c5d8cf;

    font-size: 17px;

    cursor: pointer;
}


/* Map uses full width */

.tracking-page,
.map-stage,
.map-stack,
#map,
#windy {
    width: 100% !important;
}


/* Quick info no longer reserves right sidebar width */

.vessel-info-strip {
    right: 22px !important;
}


/* Windy controls back to normal right edge */

#windy .leaflet-top.leaflet-right,
#map .leaflet-top.leaflet-right {
    right: 10px !important;
    transform: none !important;
}



/* =========================================================
   RIGHT PANEL - VESSEL LIST ONLY / DRAWER FINAL
========================================================= */

.fleet-sidebar {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 230px !important;
    min-width: 230px !important;

    padding: 14px 10px !important;

    display: flex !important;
    flex-direction: column !important;

    transform: translateX(100%) !important;

    transition: transform 220ms ease !important;

    background:
        rgba(2,16,13,0.30) !important;

    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;

    border-left:
        1px solid rgba(79,224,157,0.18) !important;

    z-index: 1600 !important;
}

.fleet-sidebar.open {
    transform: translateX(0) !important;
}


/* HEADER */

.fleet-drawer-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    flex: 0 0 auto !important;
}

.fleet-sidebar-close {
    width: 28px !important;
    height: 28px !important;

    display: grid !important;
    place-items: center !important;

    border:
        1px solid rgba(79,224,157,0.30) !important;

    border-radius: 50% !important;

    background:
        rgba(2,16,13,0.45) !important;

    color: #d6e7df !important;

    font-size: 17px !important;

    cursor: pointer !important;
}


/* OPEN BUTTON - ALWAYS VISIBLE WHEN CLOSED */

.fleet-sidebar-toggle {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    z-index: 1550 !important;

    height: 34px !important;

    padding: 0 12px !important;

    border:
        1px solid rgba(79,224,157,0.34) !important;

    border-radius: 5px !important;

    background:
        rgba(2,16,13,0.78) !important;

    color: #edf8f4 !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: 0.8px !important;

    cursor: pointer !important;

    backdrop-filter: blur(7px) !important;
}

.fleet-sidebar.open + .fleet-sidebar-toggle {
    display: none !important;
}


/* VESSEL BROWSER USES FULL PANEL */

.fleet-vessel-browser {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    margin-top: 12px !important;
}

.fleet-vessel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
}


/* map / quick info no longer reserve right panel */

.vessel-info-strip {
    right: 22px !important;
}


/* =========================================================
   ROBUST RIGHT VESSEL DRAWER - HARD FINAL
========================================================= */


/* ---------------------------------------------------------
   RIGHT PANEL
--------------------------------------------------------- */

.fleet-sidebar {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 230px !important;
    min-width: 230px !important;

    transform:
        translateX(100%) !important;

    transition:
        transform 220ms ease !important;

    z-index:
        8000 !important;

    background:
        rgba(2,16,13,0.34) !important;

    backdrop-filter:
        blur(9px) !important;

    -webkit-backdrop-filter:
        blur(9px) !important;
}


/* OPEN STATE */

.fleet-sidebar.robust-open {
    transform:
        translateX(0) !important;
}


/* ---------------------------------------------------------
   OPEN BUTTON
--------------------------------------------------------- */

#robustFleetToggle,
.robust-fleet-toggle {

    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    width: auto !important;
    height: 34px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        0 13px !important;

    border:
        1px solid rgba(79,224,157,0.55) !important;

    border-radius:
        5px !important;

    background:
        rgba(2,16,13,0.88) !important;

    color:
        #ffffff !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    letter-spacing:
        0.8px !important;

    cursor:
        pointer !important;

    z-index:
        9000 !important;

    pointer-events:
        auto !important;

    box-shadow:
        0 0 8px rgba(79,224,157,0.18) !important;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.robust-fleet-close {

    position: absolute !important;

    top: 13px !important;
    right: 12px !important;

    width: 28px !important;
    height: 28px !important;

    display: grid !important;
    place-items: center !important;

    border:
        1px solid rgba(79,224,157,0.45) !important;

    border-radius:
        50% !important;

    background:
        rgba(2,16,13,0.70) !important;

    color:
        #ffffff !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    z-index:
        9001 !important;
}


/* ---------------------------------------------------------
   RIGHT PANEL CONTENT
   Vessel list only
--------------------------------------------------------- */

.fleet-sidebar .fleet-summary-grid {
    display:
        none !important;
}

.fleet-vessel-browser {
    margin-top:
        42px !important;

    height:
        calc(100% - 52px) !important;

    min-height:
        0 !important;
}


/* Bottom quick-info uses full map width */

.vessel-info-strip {
    right:
        20px !important;
}


/* =========================================================
   ROBUST FLEET BUTTON - ABSOLUTE FINAL OVERRIDE
========================================================= */


/* OPEN BUTTON */

#robustFleetButton {

    position: fixed !important;

    top: 92px !important;
    right: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 126px !important;
    height: 36px !important;

    padding: 0 12px !important;

    border:
        1px solid rgba(79,224,157,0.65) !important;

    border-radius: 5px !important;

    background:
        rgba(2,16,13,0.90) !important;

    color: #ffffff !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: 0.8px !important;

    cursor: pointer !important;

    z-index: 2147483647 !important;

    pointer-events: auto !important;

    box-shadow:
        0 0 12px rgba(79,224,157,0.28) !important;
}


/* RIGHT DRAWER */

.fleet-sidebar {

    position: fixed !important;

    top: 78px !important;
    right: 0 !important;
    bottom: 28px !important;

    width: 230px !important;

    transform:
        translateX(105%) !important;

    transition:
        transform 220ms ease !important;

    z-index:
        2147483646 !important;
}


.fleet-sidebar.robustFleetOpen {

    transform:
        translateX(0) !important;
}


/* CLOSE BUTTON */

.robustFleetClose {

    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    width: 28px !important;
    height: 28px !important;

    display: grid !important;
    place-items: center !important;

    border:
        1px solid rgba(79,224,157,0.55) !important;

    border-radius: 50% !important;

    background:
        rgba(2,16,13,0.85) !important;

    color: white !important;

    font-size: 18px !important;

    cursor: pointer !important;

    z-index: 20 !important;
}


/* =========================================================
   FINAL VESSEL LIST BUTTON
   Neon outline + white ship
========================================================= */


/* ---------------------------------------------------------
   SMALLER ROBUST LOGO
--------------------------------------------------------- */

header.topbar .brand {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    padding-left: 16px !important;
    padding-right: 12px !important;
}

header.topbar .brand-logo {
    width: 165px !important;
    max-width: 165px !important;
    height: auto !important;
}


/* ---------------------------------------------------------
   VESSEL LIST BUTTON
--------------------------------------------------------- */

#robustFleetButton {

    position: fixed !important;

    /*
       Below native Windy controls
    */

    top: 178px !important;
    right: 18px !important;

    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border:
        2px solid #39ff88 !important;

    border-radius:
        50% !important;

    background:
        rgba(2,16,13,0.18) !important;

    color:
        #ffffff !important;

    backdrop-filter:
        blur(3px) !important;

    -webkit-backdrop-filter:
        blur(3px) !important;

    box-shadow:
        0 0 6px rgba(57,255,136,0.90),
        0 0 14px rgba(57,255,136,0.35) !important;

    cursor:
        pointer !important;

    z-index:
        2147483647 !important;

    pointer-events:
        auto !important;
}


/* icon size */

#robustFleetButton svg {

    width: 25px !important;
    height: 25px !important;

    display: block !important;

    overflow: visible !important;
}


/* White ship */

#robustFleetButton
.fleet-button-ship,

#robustFleetButton
.fleet-button-wave {

    fill:
        #ffffff !important;

    stroke:
        none !important;
}


#robustFleetButton:hover {

    background:
        rgba(57,255,136,0.14) !important;

    box-shadow:
        0 0 8px rgba(57,255,136,1),
        0 0 18px rgba(57,255,136,0.55) !important;
}


/* ---------------------------------------------------------
   RIGHT VESSEL DRAWER
--------------------------------------------------------- */

.fleet-sidebar {

    z-index:
        2147483600 !important;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
   MUST ALWAYS REMAIN CLICKABLE
--------------------------------------------------------- */

.robustFleetClose {

    position: fixed !important;

    top: 94px !important;
    right: 14px !important;

    width: 32px !important;
    height: 32px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;

    border:
        2px solid #39ff88 !important;

    border-radius:
        50% !important;

    background:
        rgba(2,16,13,0.45) !important;

    color:
        #ffffff !important;

    font-size:
        20px !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    pointer-events:
        auto !important;

    z-index:
        2147483647 !important;

    box-shadow:
        0 0 7px rgba(57,255,136,0.65) !important;
}


/* Hide X while drawer closed */

.fleet-sidebar:not(.robustFleetOpen)
.robustFleetClose {

    display:
        none !important;
}


/* Show X while drawer open */

.fleet-sidebar.robustFleetOpen
.robustFleetClose {

    display:
        grid !important;
}


/* =========================================================
   ROBUST MAP LAYOUT - STABLE RIGHT PANEL
   FINAL STRUCTURE:
   MAP | FIXED VESSEL LIST
========================================================= */

/* ---------------------------------------------------------
   PAGE AREA
   Topbar and footer remain outside tracking canvas
--------------------------------------------------------- */

#page-content {
    position: absolute !important;

    top: var(--header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--footer-height) !important;

    width: auto !important;
    height: auto !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   TRACKING PAGE
--------------------------------------------------------- */

.tracking-page {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   RIGHT VESSEL PANEL
   PERMANENT / OPAQUE / FULL HEIGHT
--------------------------------------------------------- */

.fleet-sidebar {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;

    height: 100% !important;

    margin: 0 !important;

    padding:
        16px 12px !important;

    display: flex !important;
    flex-direction: column !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    background:
        #03110e !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    border-left:
        1px solid rgba(79,224,157,0.18) !important;

    box-shadow:
        none !important;

    z-index: 1600 !important;

    pointer-events: auto !important;
}


/* ---------------------------------------------------------
   RIGHT PANEL HEADER
--------------------------------------------------------- */

.fleet-sidebar .panel-heading {
    flex: 0 0 auto !important;

    margin-bottom: 14px !important;

    background:
        transparent !important;
}


/* We no longer collapse the permanent right panel */

.robustFleetClose,
.robust-fleet-close,
.fleet-sidebar-close {
    display: none !important;
}


/* ---------------------------------------------------------
   REMOVE ALL OLD RIGHT-DRAWER OPEN BUTTONS
--------------------------------------------------------- */

#robustFleetButton,
#robustFleetToggle,
.robust-fleet-toggle,
.fleet-sidebar-toggle {
    display: none !important;
}


/* ---------------------------------------------------------
   VESSEL LIST USES REMAINING HEIGHT
--------------------------------------------------------- */

.fleet-vessel-browser {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    margin-top: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    background:
        transparent !important;
}


.fleet-vessel-list {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* ---------------------------------------------------------
   MAP AREA
   IMPORTANT:
   map STOPS before the 230px vessel panel
--------------------------------------------------------- */

.map-stage {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 230px !important;
    bottom: 0 !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    overflow: hidden !important;

    z-index: 1 !important;
}


.map-stack {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
}


.map-engine,
#map,
#windy {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
}


/* ---------------------------------------------------------
   WINDY NATIVE CONTROLS
   Back to natural right edge OF MAP
--------------------------------------------------------- */

#windy .leaflet-top.leaflet-right {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;

    transform: none !important;

    z-index: 1200 !important;
}


#windy .leaflet-right .leaflet-control {
    margin-right: 0 !important;
}


/* ---------------------------------------------------------
   DARK / LIGHT MAP CONTROLS
--------------------------------------------------------- */

#map .leaflet-top.leaflet-right {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   LEFT TRACKING DRAWER
   remains overlay / collapsible as currently working
--------------------------------------------------------- */

.map-sidebar {
    z-index: 1500 !important;
}


/* ---------------------------------------------------------
   BOTTOM SELECTED VESSEL INFO
   ends before permanent right panel
--------------------------------------------------------- */

.vessel-info-strip {
    right: 250px !important;
}


/* ---------------------------------------------------------
   REMOVE OLD EXTERNAL WINDY CONTROL DOCK
--------------------------------------------------------- */

#robustWindyControlDock {
    display: none !important;
}


/* =========================================================
   MAP TRACKING - FINAL 2 ITEMS ONLY
   1. Smaller Robust logo
   2. Heading = neon green ring + white arrow
========================================================= */


/* ---------------------------------------------------------
   1. ROBUST LOGO - SMALLER
--------------------------------------------------------- */

header.topbar .brand {
    width: 185px !important;
    min-width: 185px !important;
    max-width: 185px !important;

    padding-left: 12px !important;
    padding-right: 8px !important;

    display: flex !important;
    align-items: center !important;
}

header.topbar .brand img.brand-logo,
header.topbar .brand-logo {
    width: 145px !important;
    max-width: 145px !important;

    height: auto !important;
    max-height: 52px !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   2. HEADING COMPASS
   NO BLACK BLOCK
   Neon green circle + white arrow only
--------------------------------------------------------- */

.quick-heading-value {
    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    background: transparent !important;
}


/* Circle only */

.quick-heading-compass {
    position: relative !important;

    width: 26px !important;
    height: 26px !important;

    min-width: 26px !important;
    min-height: 26px !important;

    flex: 0 0 26px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border: 2px solid #39ff88 !important;
    border-radius: 50% !important;

    background: transparent !important;

    box-shadow:
        0 0 5px rgba(57,255,136,0.95),
        0 0 10px rgba(57,255,136,0.40) !important;

    overflow: visible !important;
}


/* White heading arrow */

.quick-heading-compass::before {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 0 !important;
    height: 0 !important;

    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: 12px solid #ffffff !important;

    transform:
        translate(-50%, -58%)
        rotate(var(--heading-angle, 0deg)) !important;

    transform-origin:
        50% 58% !important;
}


/* Remove center dot / black fill from older patches */

.quick-heading-compass::after {
    content: none !important;
    display: none !important;
}


/* Make sure the HEADING cell itself is not blacked out */

.vessel-info-item:has(.quick-heading-compass),
.vessel-info-item .quick-heading-value,
.vessel-info-item .quick-heading-compass {
    background: transparent !important;
}


/* =========================================================
   ROBUST VOYAGE ROUTE
========================================================= */


/* ---------------------------------------------------------
   ROUTE BASE
--------------------------------------------------------- */

.robust-voyage-route-base {

    stroke:
        #25d9ff !important;

    stroke-width:
        3px !important;

    stroke-opacity:
        0.58 !important;
}


/* ---------------------------------------------------------
   DIRECTION ANIMATION
   Moving dash follows voyage point order
--------------------------------------------------------- */

.robust-voyage-route-motion {

    stroke:
        #9cff00 !important;

    stroke-width:
        3px !important;

    stroke-linecap:
        round !important;

    stroke-dasharray:
        2 12 !important;

    animation:
        robustVoyageDirection
        1.15s
        linear
        infinite !important;

    filter:
        drop-shadow(
            0 0 3px
            rgba(156,255,0,0.72)
        );
}


@keyframes robustVoyageDirection {

    from {
        stroke-dashoffset:
            28;
    }

    to {
        stroke-dashoffset:
            0;
    }

}


/* ---------------------------------------------------------
   WAYPOINT
--------------------------------------------------------- */

.robust-voyage-waypoint {

    cursor:
        pointer;

    filter:
        drop-shadow(
            0 0 3px
            rgba(156,255,0,0.80)
        );
}


/* =========================================================
   TELEMETRY POPUP
========================================================= */


/* Remove default white Leaflet box */

.voyage-telemetry-popup
.leaflet-popup-content-wrapper {

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(57,255,136,0.38) !important;

    border-radius:
        6px !important;

    background:
        rgba(2,16,13,0.82) !important;

    color:
        #ffffff !important;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    box-shadow:
        0 8px 26px
        rgba(0,0,0,0.45) !important;
}


.voyage-telemetry-popup
.leaflet-popup-content {

    width:
        auto !important;

    margin:
        0 !important;
}


/* Popup arrow */

.voyage-telemetry-popup
.leaflet-popup-tip {

    background:
        rgba(2,16,13,0.88) !important;
}


/* Close */

.voyage-telemetry-popup
.leaflet-popup-close-button {

    top:
        5px !important;

    right:
        6px !important;

    color:
        #dce9e3 !important;

    font-size:
        17px !important;

    z-index:
        5;
}


/* ---------------------------------------------------------
   POPUP BODY
--------------------------------------------------------- */

.voyage-popup {

    width:
        320px;

    box-sizing:
        border-box;

    font-family:
        inherit;

    color:
        #ffffff;
}


/* HEADER */

.voyage-popup-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        9px 12px;

    border-bottom:
        1px solid
        rgba(79,224,157,0.18);

    background:
        rgba(0,0,0,0.18);
}


.voyage-popup-header small {

    display:
        block;

    color:
        #70a990;

    font-size:
        6px;

    letter-spacing:
        1px;
}


.voyage-popup-header strong {

    display:
        block;

    margin-top:
        2px;

    font-size:
        10px;
}


.voyage-popup-header > span {

    padding-right:
        14px;

    color:
        #a9c2b7;

    font-size:
        7px;
}


/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */

.voyage-popup-section {

    padding:
        7px 12px;

    border-bottom:
        1px solid
        rgba(79,224,157,0.12);
}


.voyage-popup-section > small {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #62c394;

    font-size:
        6px;

    font-weight:
        700;

    letter-spacing:
        1px;
}


/* GPS = 2 x 2 */

.voyage-gps-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        4px 12px;
}


.voyage-gps-grid div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        6px;
}


.voyage-gps-grid span {

    color:
        #718c80;

    font-size:
        6px;
}


.voyage-gps-grid strong {

    color:
        #ffffff;

    font-size:
        8px;
}


/* RPM + TANK = 3 columns */

.voyage-mini-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        4px;
}


.voyage-mini-item {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        4px;

    padding:
        4px 5px;

    border:
        1px solid
        rgba(79,224,157,0.12);

    border-radius:
        3px;

    background:
        rgba(2,16,13,0.28);
}


.voyage-mini-item span {

    color:
        #728d81;

    font-size:
        6px;
}


.voyage-mini-item strong {

    color:
        #ffffff;

    font-size:
        8px;
}


/* ---------------------------------------------------------
   CONSUMED
--------------------------------------------------------- */

.voyage-consumed {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        8px 12px;

    background:
        rgba(57,255,136,0.045);
}


.voyage-consumed span {

    color:
        #79a58f;

    font-size:
        6px;

    letter-spacing:
        0.8px;
}


.voyage-consumed strong {

    color:
        #68ffb6;

    font-size:
        11px;
}


/* =========================================================
   WAYPOINT TELEMETRY POPUP - MORE TRANSPARENT
========================================================= */

/* Main popup glass */
.voyage-telemetry-popup .leaflet-popup-content-wrapper {
    background: rgba(2, 16, 13, 0.58) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;

    border: 1px solid rgba(57, 255, 136, 0.42) !important;
}

/* Popup pointer */
.voyage-telemetry-popup .leaflet-popup-tip {
    background: rgba(2, 16, 13, 0.58) !important;
}

/* Header */
.voyage-popup-header {
    background: rgba(0, 0, 0, 0.12) !important;
}

/* GPS / RPM / Tank sections */
.voyage-popup-section {
    background: transparent !important;
}

/* Individual RPM + Tank cells */
.voyage-mini-item {
    background: rgba(2, 16, 13, 0.28) !important;
}

/* Consumed footer */
.voyage-consumed {
    background: rgba(57, 255, 136, 0.035) !important;
}


/* =========================================================
   RETURN VOYAGE ROUTE
========================================================= */

.robust-return-route-base {

    stroke:
        #ffb347 !important;

    stroke-width:
        3px !important;

    stroke-opacity:
        0.60 !important;
}


/* Return direction animation
   Different pattern + speed from outbound
*/

.robust-return-route-motion {

    stroke:
        #ffffff !important;

    stroke-width:
        3px !important;

    stroke-linecap:
        round !important;

    stroke-dasharray:
        7 10 !important;

    animation:
        robustReturnDirection
        1.35s
        linear
        infinite !important;

    filter:
        drop-shadow(
            0 0 3px
            rgba(255,179,71,0.75)
        );
}


@keyframes robustReturnDirection {

    from {
        stroke-dashoffset:
            0;
    }

    to {
        stroke-dashoffset:
            34;
    }
}


/* Return waypoint */

.robust-return-waypoint {

    cursor:
        pointer;

    filter:
        drop-shadow(
            0 0 3px
            rgba(255,179,71,0.85)
        );
}


/* =========================================================
   RETURN ROUTE - REVERSE ANIMATION DIRECTION FIX
========================================================= */

/* OUTBOUND:
   animated dots move in forward visual direction
*/
.robust-voyage-route-motion {
    stroke-dasharray: 2 12 !important;

    animation:
        robustVoyageDirectionForward
        1.15s
        linear
        infinite !important;
}

@keyframes robustVoyageDirectionForward {

    from {
        stroke-dashoffset: 28;
    }

    to {
        stroke-dashoffset: 0;
    }

}


/* RETURN:
   force opposite visual movement
*/
.robust-return-route-motion {
    stroke-dasharray: 7 10 !important;

    animation:
        robustVoyageDirectionReverse
        1.15s
        linear
        infinite !important;
}

@keyframes robustVoyageDirectionReverse {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -34;
    }

}


/* =========================================================
   WAYPOINT HIT AREA / HOVER
========================================================= */


/* invisible clickable area */

.robust-waypoint-hit-area {

    cursor:
        pointer !important;

    fill:
        rgba(255,255,255,0.001) !important;

    stroke:
        transparent !important;
}


/* visible waypoint on hover */

.robust-waypoint-hover {

    filter:
        drop-shadow(
            0 0 4px
            rgba(255,255,255,0.95)
        )
        drop-shadow(
            0 0 8px
            rgba(57,255,136,0.80)
        ) !important;
}


/* =========================================================
   ROBUST HISTORICAL TRACK PERIOD SELECTOR
========================================================= */

#robustHistoricalPeriod {

    position:
        fixed;

    left:
        50%;

    bottom:
        76px;

    transform:
        translate(-50%, 12px);

    width:
        350px;

    box-sizing:
        border-box;

    padding:
        9px 10px;

    border:
        1px solid
        rgba(57,255,136,0.38);

    border-radius:
        6px;

    background:
        rgba(2,16,13,0.66);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,0.32);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 160ms ease,
        transform 160ms ease;

    z-index:
        5000;
}


#robustHistoricalPeriod.visible {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate(-50%,0);

}


/* HEADER */

.historical-period-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;

}


.historical-period-title small {

    display:
        block;

    color:
        #67a88a;

    font-size:
        6px;

    letter-spacing:
        1.1px;

}


.historical-period-title strong {

    display:
        block;

    margin-top:
        2px;

    color:
        #ffffff;

    font-size:
        9px;

    letter-spacing:
        0.4px;

}


/* CLOSE */

#historicalPeriodClose {

    width:
        22px;

    height:
        22px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(57,255,136,0.42);

    border-radius:
        50%;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        14px;

    line-height:
        1;

    cursor:
        pointer;

}


/* PERIOD BUTTONS */

.historical-period-buttons {

    display:
        grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:
        4px;

}


.historical-period-buttons button {

    height:
        26px;

    padding:
        0 5px;

    border:
        1px solid
        rgba(103,114,100,0.28);

    border-radius:
        3px;

    background:
        rgba(0,0,0,0.18);

    color:
        #a9bbb2;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.5px;

    cursor:
        pointer;

}


.historical-period-buttons button:hover {

    border-color:
        rgba(57,255,136,0.55);

    color:
        #ffffff;

}


.historical-period-buttons button.active {

    border-color:
        #39ff88;

    background:
        rgba(57,255,136,0.13);

    color:
        #72ffad;

    box-shadow:
        0 0 6px
        rgba(57,255,136,0.22);

}


.historical-period-buttons
.historical-clear {

    color:
        #ffb347;

}


/* Large invisible waypoint hit area */

.historical-waypoint-hit {

    cursor:
        pointer;

    fill:
        rgba(255,255,255,0.001) !important;

    stroke:
        transparent !important;

}


/* =========================================================
   OVERLAPPING WAYPOINT REPORT SELECTOR
========================================================= */

.robust-overlap-hit-area {

    cursor:
        pointer !important;

    fill:
        rgba(255,255,255,0.001) !important;

    stroke:
        transparent !important;
}


/* ---------------------------------------------------------
   MINI SELECTOR POPUP
--------------------------------------------------------- */

.overlap-report-popup
.leaflet-popup-content-wrapper {

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(57,255,136,0.42) !important;

    border-radius:
        6px !important;

    background:
        rgba(2,16,13,0.64) !important;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,0.36) !important;
}


.overlap-report-popup
.leaflet-popup-content {

    margin:
        0 !important;

    width:
        auto !important;
}


.overlap-report-popup
.leaflet-popup-tip {

    background:
        rgba(2,16,13,0.64) !important;
}


.overlap-report-popup
.leaflet-popup-close-button {

    top:
        4px !important;

    right:
        6px !important;

    color:
        #ffffff !important;
}


/* ---------------------------------------------------------
   SELECTOR BODY
--------------------------------------------------------- */

.overlap-selector {

    width:
        245px;

    color:
        #ffffff;
}


.overlap-selector-heading {

    padding:
        8px 11px;

    border-bottom:
        1px solid
        rgba(57,255,136,0.16);
}


.overlap-selector-heading small {

    display:
        block;

    color:
        #68b28e;

    font-size:
        6px;

    letter-spacing:
        1px;
}


.overlap-selector-heading strong {

    display:
        block;

    margin-top:
        2px;

    font-size:
        9px;
}


.overlap-selector-list {

    padding:
        5px;
}


.overlap-report-row {

    width:
        100%;

    min-height:
        31px;

    display:
        grid;

    grid-template-columns:
        61px
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        6px;

    padding:
        5px 7px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    background:
        transparent;

    color:
        #ffffff;

    cursor:
        pointer;

    text-align:
        left;
}


.overlap-report-row:last-child {

    border-bottom:
        0;
}


.overlap-report-row:hover {

    background:
        rgba(57,255,136,0.09);
}


.overlap-report-direction {

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.6px;
}


.overlap-report-direction.outbound {

    color:
        #9cff00;
}


.overlap-report-direction.return {

    color:
        #ffb347;
}


.overlap-report-time {

    color:
        #a7bbb1;

    font-size:
        7px;

    white-space:
        nowrap;
}


.overlap-report-row strong {

    color:
        #ffffff;

    font-size:
        7px;

    white-space:
        nowrap;
}


/* =========================================================
   HISTORICAL TRACK - TWO VISUAL LANES
========================================================= */

/*
   These transforms affect route SVG only.
   Waypoints remain at real GPS coordinates.
*/

.robust-voyage-route-base,
.robust-voyage-route-motion {

    transform:
        translateY(-4px);

}


.robust-return-route-base,
.robust-return-route-motion {

    transform:
        translateY(4px);

}


/* =========================================================
   PIXEL OVERLAP SELECTOR
========================================================= */

.pixel-overlap-hit {

    cursor:
        pointer !important;

    fill:
        rgba(255,255,255,0.001) !important;

    stroke:
        transparent !important;

}


.pixel-overlap-popup
.leaflet-popup-content-wrapper {

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(57,255,136,0.44) !important;

    border-radius:
        6px !important;

    background:
        rgba(2,16,13,0.62) !important;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

}


.pixel-overlap-popup
.leaflet-popup-content {

    margin:
        0 !important;

    width:
        auto !important;

}


.pixel-overlap-popup
.leaflet-popup-tip {

    background:
        rgba(2,16,13,0.62) !important;

}


.pixel-overlap-popup
.leaflet-popup-close-button {

    color:
        #ffffff !important;

}


/* BODY */

.pixel-overlap-selector {

    width:
        250px;

}


.pixel-overlap-header {

    padding:
        8px 10px;

    border-bottom:
        1px solid
        rgba(57,255,136,0.17);

}


.pixel-overlap-header small {

    display:
        block;

    color:
        #65b48c;

    font-size:
        6px;

    letter-spacing:
        1px;

}


.pixel-overlap-header strong {

    display:
        block;

    margin-top:
        2px;

    color:
        #ffffff;

    font-size:
        9px;

}


.pixel-report-choice {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        60px
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 9px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    background:
        transparent;

    color:
        #aebdb6;

    text-align:
        left;

    font-size:
        7px;

    cursor:
        pointer;

}


.pixel-report-choice:hover {

    background:
        rgba(57,255,136,0.10);

}


.pixel-report-choice strong {

    color:
        #ffffff;

    font-size:
        7px;

}


.pixel-report-type {

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        0.5px;

}


.pixel-report-type.outbound {

    color:
        #9cff00;

}


.pixel-report-type.return {

    color:
        #ffb347;

}


/* =========================================================
   GEOMETRIC LANE OVERRIDE
   Disable previous CSS path translations
========================================================= */

.robust-voyage-route-base,
.robust-voyage-route-motion,
.robust-return-route-base,
.robust-return-route-motion {
    transform: none !important;
}


/* =========================================================
   GEOMETRIC LANE OVERRIDE
   Disable previous CSS path translations
========================================================= */

.robust-voyage-route-base,
.robust-voyage-route-motion,
.robust-return-route-base,
.robust-return-route-motion {
    transform: none !important;
}


/* =========================================================
   VESSEL QUICK INFO
========================================================= */

.vessel-info-strip{
    position:relative;
    transition:transform .25s ease, opacity .25s ease;
}

.vessel-info-strip.hidden{
    transform:translateY(120%);
    opacity:0;
    pointer-events:none;
}

.vessel-info-strip.active{
    transform:translateY(0);
    opacity:1;
}

.quickinfo-close{

    position:absolute;
    top:10px;
    right:12px;

    width:24px;
    height:24px;

    border-radius:50%;
    border:1px solid rgba(57,255,136,.45);

    background:rgba(2,16,13,.45);
    backdrop-filter:blur(5px);

    color:#39FF88;
    font-size:12px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
}

.quickinfo-close:hover{

    background:rgba(57,255,136,.18);
    box-shadow:0 0 8px rgba(57,255,136,.35);

}


/* =========================================================
   VESSEL QUICK INFO CLOSE - FINAL
========================================================= */

/*
 Existing panel visibility is controlled by:
 .vessel-info-strip.visible

 No active/hidden state is used here.
*/


/* Disable obsolete close button from previous patch */

.quickinfo-close {
    display: none !important;
}


/* Ensure Quick Info remains a positioning context */

#vesselQuickInfo {
    position: absolute !important;
}


/* Final close button */

.quickinfo-close-final {

    position: absolute !important;

    top: 8px !important;
    right: 8px !important;

    width: 26px !important;
    height: 26px !important;

    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border:
        1.5px solid #39ff88 !important;

    border-radius:
        50% !important;

    background:
        rgba(2,16,13,0.30) !important;

    color:
        #ffffff !important;

    font-size:
        17px !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    pointer-events:
        auto !important;

    z-index:
        99999 !important;

    box-shadow:
        0 0 5px
        rgba(57,255,136,0.65) !important;
}


.quickinfo-close-final:hover {

    background:
        rgba(57,255,136,0.14) !important;

    box-shadow:
        0 0 9px
        rgba(57,255,136,0.85) !important;
}


/* Panel itself must accept interaction while visible */

#vesselQuickInfo.visible {

    pointer-events:
        auto !important;

}


/* =========================================================
   10-VESSEL FLEET / STATUS FILTER
========================================================= */

.robust-fleet-marker-icon {
    background: transparent !important;
    border: 0 !important;
}

.fleet-map-marker {
    width: 14px;
    height: 18px;

    transform-origin:
        50% 50%;

    filter:
        drop-shadow(
            0 1px 1px
            rgba(0,0,0,0.95)
        );
}

.fleet-map-marker svg {
    width: 14px;
    height: 18px;

    display: block;

    overflow: visible;
}

.fleet-map-marker path {
    fill:
        var(--marker-fill);

    stroke:
        var(--marker-edge);

    stroke-width:
        1.5;

    stroke-linejoin:
        round;
}


/* ---------------------------------------------------------
   VESSEL LIST MINI ICON
--------------------------------------------------------- */

.fleet-vessel-mini-marker {
    width: 14px;
    height: 18px;

    display: block;

    transform-origin:
        50% 50%;
}

.fleet-vessel-mini-marker svg {
    width: 14px;
    height: 18px;

    display: block;

    overflow: visible;
}

.fleet-vessel-mini-marker path {
    fill:
        var(--marker-fill);

    stroke:
        var(--marker-edge);

    stroke-width:
        1.5;
}


/* ---------------------------------------------------------
   STATUS COLORS
--------------------------------------------------------- */

.fleet-vessel-state.moving {
    color: #16C7F3 !important;
}

.fleet-vessel-state.stop {
    color: #FFD43B !important;
}

.fleet-vessel-state.docking {
    color: #A78BFA !important;
}

.fleet-vessel-state.damage {
    color: #FF4D5A !important;
}

.fleet-vessel-state.weather {
    color: #FF9F1C !important;
}

.fleet-vessel-state.unreported {
    color: #FF5C35 !important;
}


/* ---------------------------------------------------------
   LEFT STATUS FILTER
--------------------------------------------------------- */

[data-vessel-filter] {
    cursor: pointer;

    transition:
        border-color 150ms ease,
        background 150ms ease;
}

[data-vessel-filter].active-filter {
    border-color:
        rgba(57,255,136,0.70) !important;

    background:
        rgba(57,255,136,0.10) !important;

    box-shadow:
        0 0 6px
        rgba(57,255,136,0.20);
}


/* =========================================================
   FINAL FLEET STATUS + OPERATION BEHAVIOR
========================================================= */


/* OPERATION */

.status-operational {
    background:
        #39ff88 !important;

    box-shadow:
        0 0 6px
        rgba(57,255,136,0.65) !important;
}


/* ---------------------------------------------------------
   OPERATION BEHAVIOR COLORS IN VESSEL LIST
--------------------------------------------------------- */

.fleet-vessel-state.running {
    color:
        #39ff88 !important;
}

.fleet-vessel-state.idling {
    color:
        #ffd43b !important;
}

.fleet-vessel-state.stopped {
    color:
        #9aa8a1 !important;
}

.fleet-vessel-state.stationary {
    color:
        #b7a6ff !important;
}


/* Non-operation fleet status */

.fleet-vessel-state.operation {
    color:
        #39ff88 !important;
}

.fleet-vessel-state.docking {
    color:
        #a78bfa !important;
}

.fleet-vessel-state.damage {
    color:
        #ff4d5a !important;
}

.fleet-vessel-state.weather {
    color:
        #ff9f1c !important;
}

.fleet-vessel-state.unreported {
    color:
        #ff5c35 !important;
}


/* =========================================================
   FINAL DARK VESSEL STATUS COLORS
========================================================= */


/* ---------------------------------------------------------
   STATUS COUNTER NUMBER = WHITE
--------------------------------------------------------- */

.status-filter .status-count,
.status-count {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   LEFT STATUS DOTS
--------------------------------------------------------- */

.status-operational {
    background: #0B1E3A !important;
    border: 1px solid #B8860B !important;
    box-shadow: 0 0 5px rgba(184,134,11,.55) !important;
}

.status-docking {
    background: #2B1B4D !important;
    border: 1px solid #6A3D9A !important;
    box-shadow: 0 0 5px rgba(106,61,154,.55) !important;
}

.status-damage {
    background: #4B0F1F !important;
    border: 1px solid #8B1E3F !important;
    box-shadow: 0 0 5px rgba(139,30,63,.55) !important;
}

.status-weather {
    background: #2B2F36 !important;
    border: 1px solid #5A5F68 !important;
    box-shadow: 0 0 5px rgba(90,95,104,.55) !important;
}

.status-unreported {
    background: #8A4D00 !important;
    border: 1px solid #FF8C00 !important;
    box-shadow:
        0 0 6px rgba(255,140,0,.80) !important;

    animation:
        robustUnreportedStatusBlink
        1.2s
        ease-in-out
        infinite !important;
}


/* ---------------------------------------------------------
   UNREPORTED MAP MARKER BLINK
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"] {
    animation:
        robustUnreportedMarkerBlink
        1.2s
        ease-in-out
        infinite !important;

    filter:
        drop-shadow(0 0 4px rgba(255,140,0,.95))
        drop-shadow(0 0 8px rgba(255,140,0,.45)) !important;
}


/* Vessel List mini marker also follows Unreported state */

.fleet-vessel-row:has(.fleet-vessel-state.unreported)
.fleet-vessel-mini-marker {
    animation:
        robustUnreportedMarkerBlink
        1.2s
        ease-in-out
        infinite !important;
}


/* ---------------------------------------------------------
   BLINK ANIMATION
--------------------------------------------------------- */

@keyframes robustUnreportedMarkerBlink {

    0%,
    100% {
        opacity: 1;
        filter:
            brightness(1.25)
            drop-shadow(0 0 6px rgba(255,140,0,.95));
    }

    50% {
        opacity: .30;
        filter:
            brightness(.55)
            drop-shadow(0 0 2px rgba(255,140,0,.30));
    }
}


@keyframes robustUnreportedStatusBlink {

    0%,
    100% {
        opacity: 1;
        box-shadow:
            0 0 7px rgba(255,140,0,.85);
    }

    50% {
        opacity: .40;
        box-shadow:
            0 0 2px rgba(255,140,0,.25);
    }
}


/* ---------------------------------------------------------
   VESSEL LIST STATUS TEXT
--------------------------------------------------------- */

.fleet-vessel-state.operation,
.fleet-vessel-state.running {
    color: #7FA7D8 !important;
}

.fleet-vessel-state.idling {
    color: #B8860B !important;
}

.fleet-vessel-state.stopped {
    color: #9AA2AA !important;
}

.fleet-vessel-state.stationary {
    color: #8794A3 !important;
}

.fleet-vessel-state.docking {
    color: #8D67BD !important;
}

.fleet-vessel-state.damage {
    color: #B7405C !important;
}

.fleet-vessel-state.weather {
    color: #89919B !important;
}

.fleet-vessel-state.unreported {
    color: #FF8C00 !important;
}


/* =========================================================
   FINAL STATUS MARKER PRESENTATION
========================================================= */

/* Operation keeps visible edge */
.fleet-map-marker[data-status="operation"] path {
    stroke-width: 1.5 !important;
}


/* Docking / Damage / Weather / Unreported:
   solid vessel icon, no contrasting edge
*/
.fleet-map-marker[data-status="docking"] path,
.fleet-map-marker[data-status="damage"] path,
.fleet-map-marker[data-status="weather"] path,
.fleet-map-marker[data-status="unreported"] path {
    stroke: var(--marker-fill) !important;
    stroke-width: 0 !important;
}


/* ---------------------------------------------------------
   UNREPORTED:
   Vessel stays solid.
   Only circular halo blinks.
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"] {
    position: relative !important;

    animation: none !important;

    filter:
        drop-shadow(
            0 1px 1px
            rgba(0,0,0,.95)
        ) !important;
}


/* Blinking circular ring */

.fleet-map-marker[data-status="unreported"]::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 28px;
    height: 28px;

    transform:
        translate(-50%, -50%);

    border:
        1.5px solid #FF8C00;

    border-radius:
        50%;

    box-sizing:
        border-box;

    pointer-events:
        none;

    animation:
        robustUnreportedRingBlink
        1.2s
        ease-in-out
        infinite;

    box-shadow:
        0 0 5px
        rgba(255,140,0,.65);
}


/* Optional second outer pulse for stronger visibility */

.fleet-map-marker[data-status="unreported"]::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 34px;
    height: 34px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255,140,0,.55);

    border-radius:
        50%;

    box-sizing:
        border-box;

    pointer-events:
        none;

    animation:
        robustUnreportedOuterRing
        1.2s
        ease-in-out
        infinite;
}


@keyframes robustUnreportedRingBlink {

    0%,
    100% {
        opacity: 1;

        box-shadow:
            0 0 8px
            rgba(255,140,0,.85);
    }

    50% {
        opacity: .20;

        box-shadow:
            0 0 2px
            rgba(255,140,0,.20);
    }
}


@keyframes robustUnreportedOuterRing {

    0%,
    100% {
        opacity: .75;
        transform:
            translate(-50%, -50%)
            scale(.92);
    }

    50% {
        opacity: .10;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}


/* Left status dot can still blink subtly */
.status-unreported {
    animation:
        robustUnreportedStatusBlink
        1.2s
        ease-in-out
        infinite !important;
}


/* =========================================================
   STATUS COLORS - BETTER DIFFERENTIATION
========================================================= */


/* Map vessel icons:
   Operation keeps edge.
   Other status remains solid.
*/

.fleet-map-marker[data-status="docking"] path {
    fill: #5B2A86 !important;
    stroke: none !important;
}

.fleet-map-marker[data-status="damage"] path {
    fill: #8E1B3A !important;
    stroke: none !important;
}

.fleet-map-marker[data-status="weather"] path {
    fill: #59636F !important;
    stroke: none !important;
}

.fleet-map-marker[data-status="unreported"] path {
    fill: #C66A00 !important;
    stroke: none !important;
}


/* Left status dots */

.status-docking {
    background: #5B2A86 !important;
}

.status-damage {
    background: #8E1B3A !important;
}

.status-weather {
    background: #59636F !important;
}

.status-unreported {
    background: #C66A00 !important;
}


/* =========================================================
   QUICK INFO STATUS CONTROL
========================================================= */

.quickinfo-status-control {

    position: relative;

    min-width: 145px;

    padding:
        0 12px;

    border-left:
        1px solid
        rgba(255,255,255,.08);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.quickinfo-status-control > small {

    color:
        rgba(184,211,199,.58);

    font-size:
        6px;

    letter-spacing:
        1px;

    margin-bottom:
        5px;

}


/* STATUS BUTTON */

.quickinfo-status-button {

    min-width:
        125px;

    height:
        29px;

    padding:
        0 10px;

    border:
        1px solid
        var(
            --quick-status-color,
            #39ff88
        );

    border-radius:
        4px;

    background:
        rgba(2,16,13,.32);

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .45px;

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        inset 3px 0 0
        var(
            --quick-status-color,
            #39ff88
        );

}


.quickinfo-status-button:hover {

    background:
        rgba(255,255,255,.06);

}


/* =========================================================
   STATUS MENU
========================================================= */

.quickinfo-status-menu {

    position:
        absolute;

    left:
        10px;

    bottom:
        calc(100% + 7px);

    width:
        190px;

    padding:
        5px;

    border:
        1px solid
        rgba(57,255,136,.30);

    border-radius:
        5px;

    background:
        rgba(2,16,13,.90);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.38);

    display:
        none;

    z-index:
        100000;

}


.quickinfo-status-menu.visible {

    display:
        block;

}


.quickinfo-status-menu button {

    width:
        100%;

    min-height:
        31px;

    display:
        grid;

    grid-template-columns:
        10px
        1fr
        auto;

    align-items:
        center;

    gap:
        7px;

    padding:
        5px 7px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        700;

    text-align:
        left;

    cursor:
        pointer;

}


.quickinfo-status-menu button:hover {

    background:
        rgba(57,255,136,.08);

}


.quickinfo-status-menu button small {

    color:
        rgba(185,207,197,.50);

    font-size:
        5px;

    letter-spacing:
        .5px;

}


/* menu dots */

.status-menu-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

}


.status-menu-dot.operation {
    background: #163A63;
}

.status-menu-dot.docking {
    background: #5B2A86;
}

.status-menu-dot.damage {
    background: #8E1B3A;
}

.status-menu-dot.weather {
    background: #59636F;
}


/* AUTO NOTE */

.status-menu-auto-note {

    padding:
        7px;

    color:
        #C66A00;

    font-size:
        6px;

    letter-spacing:
        .4px;

    text-align:
        center;

}


/* =========================================================
   VESSEL LIST TEXT COLORS
========================================================= */

.fleet-vessel-state.docking {
    color: #9C6AC7 !important;
}

.fleet-vessel-state.damage {
    color: #D14A68 !important;
}

.fleet-vessel-state.weather {
    color: #A7B0BA !important;
}

.fleet-vessel-state.unreported {
    color: #FF9A24 !important;
}


/* =========================================================
   UNREPORTED MARKER
   SOLID VESSEL + OUTWARD CIRCULAR PULSE
========================================================= */


/*
   Remove ALL previous blinking from actual ship.
*/

.fleet-map-marker[data-status="unreported"] {

    position:
        relative !important;

    overflow:
        visible !important;

    animation:
        none !important;

    opacity:
        1 !important;

    filter:
        none !important;

}


/*
   Ship itself stays solid dark orange.
*/

.fleet-map-marker[data-status="unreported"] path {

    fill:
        #C66A00 !important;

    stroke:
        none !important;

    opacity:
        1 !important;

}


/* ---------------------------------------------------------
   PULSE RING #1

   Starts from center of vessel and expands outward.
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"]::before {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        50% !important;

    top:
        50% !important;

    width:
        22px !important;

    height:
        22px !important;

    margin-left:
        -11px !important;

    margin-top:
        -11px !important;

    border:
        1.5px solid
        #FF8C00 !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    box-sizing:
        border-box !important;

    pointer-events:
        none !important;

    transform:
        scale(.20) !important;

    transform-origin:
        center center !important;

    opacity:
        0 !important;

    animation:
        robustUnreportedPulse
        1.8s
        ease-out
        infinite !important;

}


/* ---------------------------------------------------------
   PULSE RING #2
   Delayed second wave.
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"]::after {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        50% !important;

    top:
        50% !important;

    width:
        22px !important;

    height:
        22px !important;

    margin-left:
        -11px !important;

    margin-top:
        -11px !important;

    border:
        1px solid
        rgba(
            255,
            140,
            0,
            .80
        ) !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    box-sizing:
        border-box !important;

    pointer-events:
        none !important;

    transform:
        scale(.20) !important;

    transform-origin:
        center center !important;

    opacity:
        0 !important;

    animation:
        robustUnreportedPulse
        1.8s
        ease-out
        .9s
        infinite !important;

}


/* ---------------------------------------------------------
   TRUE RADAR-LIKE OUTWARD PULSE
--------------------------------------------------------- */

@keyframes robustUnreportedPulse {

    0% {

        transform:
            scale(.20);

        opacity:
            .95;

        box-shadow:
            0 0 3px
            rgba(
                255,
                140,
                0,
                .90
            );

    }


    65% {

        opacity:
            .42;

    }


    100% {

        transform:
            scale(2.20);

        opacity:
            0;

        box-shadow:
            0 0 10px
            rgba(
                255,
                140,
                0,
                0
            );

    }

}


/*
   Left-panel Unreported dot:
   do NOT pulse. Status counter is enough.
*/

.status-unreported {

    animation:
        none !important;

}


/* =========================================================
   UNREPORTED FINAL
   DARK GREEN VESSEL + NEON GREEN OUTWARD PULSE

   Orange is reserved for DISTRESS / SSAS.
========================================================= */


/* Leaflet wrapper MUST allow pulse outside marker bounds */

.robust-fleet-marker-icon,
.leaflet-marker-icon.robust-fleet-marker-icon {
    overflow: visible !important;
}


/* ---------------------------------------------------------
   UNREPORTED VESSEL
   Solid dark green, NOT blinking
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"] {

    position: relative !important;

    overflow: visible !important;

    animation: none !important;

    opacity: 1 !important;

    filter:
        drop-shadow(
            0 1px 2px
            rgba(0,0,0,.85)
        ) !important;

}


.fleet-map-marker[data-status="unreported"] path {

    fill: #0B3D2E !important;

    stroke: none !important;

    stroke-width: 0 !important;

    opacity: 1 !important;

}


/* ---------------------------------------------------------
   OUTWARD PULSE #1
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"]::before {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 24px !important;
    height: 24px !important;

    margin-left: -12px !important;
    margin-top: -12px !important;

    border:
        2px solid #39FF88 !important;

    border-radius: 50% !important;

    background: transparent !important;

    box-sizing: border-box !important;

    pointer-events: none !important;

    transform:
        scale(.15) !important;

    transform-origin:
        center center !important;

    opacity: 0;

    z-index: -1 !important;

    animation:
        robustUnreportedGreenPulse
        1.8s
        ease-out
        infinite !important;

}


/* ---------------------------------------------------------
   OUTWARD PULSE #2
   delayed second radar wave
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"]::after {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 24px !important;
    height: 24px !important;

    margin-left: -12px !important;
    margin-top: -12px !important;

    border:
        1.5px solid rgba(57,255,136,.85) !important;

    border-radius: 50% !important;

    background: transparent !important;

    box-sizing: border-box !important;

    pointer-events: none !important;

    transform:
        scale(.15) !important;

    transform-origin:
        center center !important;

    opacity: 0;

    z-index: -1 !important;

    animation:
        robustUnreportedGreenPulse
        1.8s
        ease-out
        .9s
        infinite !important;

}


/* ---------------------------------------------------------
   RADAR-LIKE EXPANSION
--------------------------------------------------------- */

@keyframes robustUnreportedGreenPulse {

    0% {

        transform:
            scale(.15);

        opacity: .95;

        box-shadow:
            0 0 4px
            rgba(57,255,136,.90);

    }

    35% {

        opacity: .80;

    }

    70% {

        opacity: .35;

    }

    100% {

        transform:
            scale(2.6);

        opacity: 0;

        box-shadow:
            0 0 12px
            rgba(57,255,136,0);

    }

}


/* ---------------------------------------------------------
   LEFT PANEL
--------------------------------------------------------- */

.status-unreported {

    background:
        #0B3D2E !important;

    border:
        1px solid #39FF88 !important;

    box-shadow:
        0 0 4px
        rgba(57,255,136,.45) !important;

    animation:
        none !important;

}


/* ---------------------------------------------------------
   VESSEL LIST
--------------------------------------------------------- */

.fleet-vessel-state.unreported {

    color:
        #39C985 !important;

}


/* Mini vessel in Vessel List stays solid dark green */

.fleet-vessel-row:has(.fleet-vessel-state.unreported)
.fleet-vessel-mini-marker {

    animation:
        none !important;

}

.fleet-vessel-row:has(.fleet-vessel-state.unreported)
.fleet-vessel-mini-marker path {

    fill:
        #0B3D2E !important;

    stroke:
        none !important;

}


/* =========================================================
   ROBUST VMS
   UNIFIED VESSEL CALLOUT
   Dark Map / Light Map / Windy
========================================================= */


/* ---------------------------------------------------------
   LEAFLET POPUP CONTAINER
--------------------------------------------------------- */

.leaflet-popup-content-wrapper {

    background:
        rgba(5, 24, 19, .92) !important;

    color:
        #ffffff !important;

    border:
        1px solid
        rgba(57, 255, 136, .28) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .38) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


/* compact like Windy */

.leaflet-popup-content {

    margin:
        12px 22px 12px 14px !important;

    min-width:
        145px !important;

    font-size:
        12px !important;

    line-height:
        1.45 !important;

    color:
        #ffffff !important;

}


/* Everything inside popup follows same text color */

.leaflet-popup-content,
.leaflet-popup-content div,
.leaflet-popup-content span,
.leaflet-popup-content strong,
.leaflet-popup-content b {

    color:
        #ffffff !important;

}


/* Vessel name */

.leaflet-popup-content strong:first-child,
.leaflet-popup-content b:first-child {

    display:
        inline-block;

    margin-bottom:
        2px;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    color:
        #ffffff !important;

}


/* ---------------------------------------------------------
   POPUP TIP
--------------------------------------------------------- */

.leaflet-popup-tip {

    background:
        rgba(5, 24, 19, .92) !important;

    box-shadow:
        none !important;

}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.leaflet-container
.leaflet-popup-close-button {

    top:
        5px !important;

    right:
        6px !important;

    width:
        20px !important;

    height:
        20px !important;

    line-height:
        18px !important;

    padding:
        0 !important;

    color:
        rgba(255,255,255,.72) !important;

    font-size:
        18px !important;

    font-weight:
        400 !important;

    text-align:
        center !important;

}


.leaflet-container
.leaflet-popup-close-button:hover {

    color:
        #39ff88 !important;

}


/* =========================================================
   LIGHT MAP

   Deliberately keep SAME dark translucent callout.
   This gives much better contrast over white map tiles.
========================================================= */

body.light-map
.leaflet-popup-content-wrapper,
.map-light
.leaflet-popup-content-wrapper,
[data-map-theme="light"]
.leaflet-popup-content-wrapper {

    background:
        rgba(5, 24, 19, .92) !important;

    color:
        #ffffff !important;

}


body.light-map
.leaflet-popup-tip,
.map-light
.leaflet-popup-tip,
[data-map-theme="light"]
.leaflet-popup-tip {

    background:
        rgba(5, 24, 19, .92) !important;

}


/* =========================================================
   UNREPORTED FINAL PULSE FIX

   Dark-green ship remains stationary.
   Neon-green ring expands from center.
========================================================= */


/*
   Leaflet icon wrapper must NOT crop pseudo-elements.
*/

.leaflet-marker-icon,
.leaflet-div-icon {

    overflow:
        visible !important;

}


/*
   Marker is the positioning parent.
*/

.fleet-map-marker[data-status="unreported"] {

    position:
        relative !important;

    overflow:
        visible !important;

    isolation:
        isolate;

    animation:
        none !important;

    opacity:
        1 !important;

}


/*
   Vessel itself stays above pulse.
*/

.fleet-map-marker[data-status="unreported"] svg {

    position:
        relative;

    z-index:
        3;

}


.fleet-map-marker[data-status="unreported"] path {

    fill:
        #0B3D2E !important;

    stroke:
        none !important;

    opacity:
        1 !important;

}


/* ---------------------------------------------------------
   FIRST OUTWARD WAVE
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"]::before {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        50% !important;

    top:
        50% !important;

    width:
        26px !important;

    height:
        26px !important;

    margin-left:
        -13px !important;

    margin-top:
        -13px !important;

    box-sizing:
        border-box !important;

    border:
        2px solid
        #39FF88 !important;

    border-radius:
        50% !important;

    background:
        rgba(57,255,136,.05) !important;

    pointer-events:
        none !important;

    z-index:
        1 !important;

    transform:
        scale(.10);

    transform-origin:
        center center;

    opacity:
        0;

    animation-name:
        robustUnreportedRadarPulse !important;

    animation-duration:
        1.8s !important;

    animation-timing-function:
        cubic-bezier(.15,.65,.30,1) !important;

    animation-iteration-count:
        infinite !important;

    animation-delay:
        0s !important;

}


/* ---------------------------------------------------------
   SECOND OUTWARD WAVE
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"]::after {

    content:
        "" !important;

    position:
        absolute !important;

    left:
        50% !important;

    top:
        50% !important;

    width:
        26px !important;

    height:
        26px !important;

    margin-left:
        -13px !important;

    margin-top:
        -13px !important;

    box-sizing:
        border-box !important;

    border:
        1.5px solid
        rgba(57,255,136,.90) !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    pointer-events:
        none !important;

    z-index:
        1 !important;

    transform:
        scale(.10);

    transform-origin:
        center center;

    opacity:
        0;

    animation-name:
        robustUnreportedRadarPulse !important;

    animation-duration:
        1.8s !important;

    animation-timing-function:
        cubic-bezier(.15,.65,.30,1) !important;

    animation-iteration-count:
        infinite !important;

    animation-delay:
        .9s !important;

}


@keyframes robustUnreportedRadarPulse {

    0% {

        transform:
            scale(.10);

        opacity:
            1;

        box-shadow:
            0 0 3px
            rgba(57,255,136,.95);

    }


    20% {

        opacity:
            .90;

    }


    65% {

        opacity:
            .40;

    }


    100% {

        transform:
            scale(2.7);

        opacity:
            0;

        box-shadow:
            0 0 12px
            rgba(57,255,136,0);

    }

}


/* Make sure old orange/unreported animations are dead */

.fleet-map-marker[data-status="unreported"] {

    --unreported-color:
        #39FF88 !important;

}


/* Vessel-list text follows green Unreported language */

.fleet-vessel-state.unreported {

    color:
        #39D98A !important;

}


/* =========================================================
   UNREPORTED PULSE - REAL DOM ELEMENT VERSION
   No pseudo-element / :has dependency
========================================================= */


/* Disable ALL previous pseudo pulse experiments */

.fleet-map-marker[data-status="unreported"]::before,
.fleet-map-marker[data-status="unreported"]::after,
.robust-fleet-marker-icon::before,
.robust-fleet-marker-icon::after {

    display: none !important;
    content: none !important;

}


/* ---------------------------------------------------------
   MARKER
--------------------------------------------------------- */

.fleet-map-marker[data-status="unreported"] {

    position: relative !important;

    overflow: visible !important;

    animation: none !important;

    opacity: 1 !important;

}


/* Actual vessel remains static */

.fleet-map-marker[data-status="unreported"] svg {

    position: relative !important;

    z-index: 5 !important;

}


.fleet-map-marker[data-status="unreported"] path {

    fill: #0B3D2E !important;

    stroke: none !important;

    opacity: 1 !important;

}


/* ---------------------------------------------------------
   REAL PULSE WAVES
--------------------------------------------------------- */

.unreported-pulse-wave {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 24px !important;
    height: 24px !important;

    margin-left: -12px !important;
    margin-top: -12px !important;

    border-radius: 50% !important;

    border:
        1.8px solid
        #39FF88 !important;

    background:
        transparent !important;

    box-sizing:
        border-box !important;

    pointer-events:
        none !important;

    z-index: 1 !important;

    transform:
        scale(.08);

    transform-origin:
        center center;

    opacity: 0;

    animation:
        robustRealUnreportedPulse
        1.8s
        ease-out
        infinite !important;

}


.unreported-pulse-wave.wave-2 {

    animation-delay:
        .9s !important;

}


/* ---------------------------------------------------------
   CENTER -> OUTWARD RADAR PULSE
--------------------------------------------------------- */

@keyframes robustRealUnreportedPulse {

    0% {

        transform:
            scale(.08);

        opacity:
            .95;

        box-shadow:
            0 0 4px
            rgba(57,255,136,.95);

    }


    25% {

        opacity:
            .85;

    }


    65% {

        opacity:
            .38;

    }


    100% {

        transform:
            scale(2.8);

        opacity:
            0;

        box-shadow:
            0 0 12px
            rgba(57,255,136,0);

    }

}


/* Leaflet wrapper must allow wave outside icon */

.robust-fleet-marker-icon,
.leaflet-marker-icon.robust-fleet-marker-icon {

    overflow:
        visible !important;

}


/* =========================================================
   RESTORE WINDY NATIVE CONTROLS
========================================================= */

/* make sure Windy control container is visible */
#windy .leaflet-control-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* restore top-right native Windy controls */
#windy .leaflet-top.leaflet-right {
    top: 10px !important;
    right: 12px !important;
    left: auto !important;

    transform: none !important;

    z-index: 3000 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* restore individual Windy controls */
#windy .leaflet-right .leaflet-control {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin-right: 0 !important;

    pointer-events: auto !important;
}

/* specifically keep Wind / zoom buttons visible */
#windy .leaflet-control-zoom,
#windy .mobile-orientation,
#windy .top-border {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* do not let fleet sidebar sit above Windy control */
.fleet-sidebar {
    z-index: 2000 !important;
}


/* =========================================================
   ROBUST VMS
   WINDY CONTROL DOCK - FINAL RESTORE
========================================================= */

/*
   Windy picker actually lives here:
   #robustWindyControlDock
   #mobile-ovr-select

   Keep it LEFT of the Vessel List drawer.
*/


#robustWindyControlDock {

    position:
        fixed !important;

    top:
        92px !important;

    /*
       Vessel List panel approx 225px wide.
       Give Windy control a small breathing space.
    */
    right:
        245px !important;

    left:
        auto !important;

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;

    z-index:
        5000 !important;

    transform:
        none !important;

}


/* ---------------------------------------------------------
   ACTUAL WINDY "WIND" CONTROL
--------------------------------------------------------- */

#mobile-ovr-select,
#robustWindyControlDock #mobile-ovr-select {

    display:
        flex !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;

    position:
        relative !important;

    top:
        auto !important;

    right:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;

}


/* Preserve Windy native clickability */

#mobile-ovr-select *,
#robustWindyControlDock * {

    pointer-events:
        auto !important;

}


/* ---------------------------------------------------------
   WHEN RIGHT VESSEL PANEL IS CLOSED
   Keep Windy control near right edge.
--------------------------------------------------------- */

body:has(.fleet-sidebar:not(.open))
#robustWindyControlDock {

    right:
        18px !important;

}


/*
   Fallback for current drawer implementations where
   hidden/closed state uses transform or class.
*/

.fleet-sidebar.closed ~ #robustWindyControlDock,
.fleet-sidebar.hidden ~ #robustWindyControlDock {

    right:
        18px !important;

}


/* =========================================================
   ROBUST VMS
   WINDY NATIVE CONTROL - VISUAL RESTORE
========================================================= */


/* ---------------------------------------------------------
   CONTROL DOCK
--------------------------------------------------------- */

#robustWindyControlDock {

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

}


/* ---------------------------------------------------------
   ACTUAL WIND CONTROL
--------------------------------------------------------- */

#mobile-ovr-select {

    box-sizing:
        border-box !important;

    min-width:
        58px !important;

    width:
        auto !important;

    height:
        27px !important;

    padding:
        0 9px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        4px !important;

    border:
        1px solid
        rgba(255,255,255,.20) !important;

    border-radius:
        14px !important;

    background:
        rgba(4,20,16,.72) !important;

    backdrop-filter:
        blur(5px) !important;

    -webkit-backdrop-filter:
        blur(5px) !important;

    color:
        #ffffff !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        27px !important;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.85) !important;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.30) !important;

    cursor:
        pointer !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

}


/* ---------------------------------------------------------
   WINDY INTERNAL TEXT / ICON
--------------------------------------------------------- */

#mobile-ovr-select span,
#mobile-ovr-select div {

    color:
        #ffffff !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

}


/* Windy's yellow overlay icon remains visible */

#mobile-ovr-select .uiyellow {

    color:
        #F4B000 !important;

}


/* ---------------------------------------------------------
   FALLBACK LABEL

   If Windy's internal text is visually suppressed by its
   own stylesheet, display our label without replacing the
   native clickable control.
--------------------------------------------------------- */

#mobile-ovr-select::before {

    content:
        "Wind";

    display:
        inline-block;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .2px;

    pointer-events:
        none;

}


/*
   Avoid duplicate visible "Wind" if native text returns.
   Keep Windy's icon / functional descendants alive.
*/

#mobile-ovr-select > span.uiyellow {

    display:
        inline-block !important;

}


/* =========================================================
   ROBUST VMS - BOOKMARK AREA STANDALONE
========================================================= */

.robust-bookmark-panel {
    position: fixed;
    top: 90px;
    left: 220px;

    width: 270px;
    padding: 10px;

    box-sizing: border-box;

    display: none;

    z-index: 9000;

    color: #fff;

    background:
        rgba(4,20,16,.92);

    border:
        1px solid rgba(57,255,136,.28);

    border-radius: 7px;

    box-shadow:
        0 10px 28px rgba(0,0,0,.38);

    backdrop-filter: blur(8px);
}

.robust-bookmark-panel.open {
    display: block;
}

.rbm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1px 1px 9px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    color: #39ff88;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.rbm-header button {
    width: 22px;
    height: 22px;
    padding: 0;

    border: 0;

    background: transparent;

    color: #39ff88;
    font-size: 18px;

    cursor: pointer;
}

.rbm-center-row {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 0;
}

.rbm-center-info {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rbm-center-info small,
.rbm-entry label,
.rbm-list-label {
    color: rgba(190,215,204,.52);
    font-size: 7px;
    letter-spacing: .8px;
}

.rbm-center-info strong {
    color: #fff;
    font-size: 9px;
}

.rbm-add {
    height: 28px;
    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.52);

    border-radius: 4px;

    background:
        rgba(57,255,136,.10);

    color: #39ff88;

    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.rbm-entry {
    display: none;

    padding: 9px;
    margin-bottom: 10px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 5px;

    background:
        rgba(255,255,255,.035);
}

.rbm-entry.open {
    display: block;
}

.rbm-entry input {
    width: 100%;
    height: 30px;

    margin-top: 5px;
    padding: 0 8px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.22);

    border-radius: 4px;

    outline: none;

    background:
        rgba(0,0,0,.25);

    color: #fff;
    font-size: 9px;
}

.rbm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;

    margin-top: 8px;
}

.rbm-actions button {
    height: 25px;
    padding: 0 10px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 4px;

    background:
        rgba(255,255,255,.04);

    color:
        rgba(255,255,255,.72);

    font-size: 7px;
    font-weight: 700;

    cursor: pointer;
}

.rbm-actions .primary {
    border-color:
        rgba(57,255,136,.52);

    background:
        rgba(57,255,136,.10);

    color: #39ff88;
}

.rbm-list-label {
    padding: 3px 1px 6px;
}

.rbm-list {
    max-height: 225px;
    overflow-y: auto;
}

.rbm-row {
    display: flex;
    align-items: center;

    border-top:
        1px solid rgba(255,255,255,.055);
}

.rbm-location {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 3px;

    border: 0;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;
}

.rbm-star {
    color: #39ff88;
    font-size: 10px;
}

.rbm-main {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rbm-main strong {
    overflow: hidden;

    color: #fff;
    font-size: 8px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.rbm-main small {
    color: rgba(190,215,204,.42);
    font-size: 6px;
}

.rbm-delete {
    width: 25px;
    height: 25px;

    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.35);

    cursor: pointer;
}

.rbm-delete:hover {
    color: #ff6575;
}

.rbm-empty {
    padding: 15px 5px;

    color:
        rgba(190,215,204,.35);

    font-size: 7px;

    text-align: center;
}


/* =========================================================
   VESSEL SEARCH
========================================================= */

#vesselSearch {

    transition:
        border-color .15s ease,
        box-shadow .15s ease;

}


#vesselSearch:focus {

    border-color:
        rgba(57,255,136,.65) !important;

    box-shadow:
        0 0 0 1px
        rgba(57,255,136,.12) !important;

}


/* =========================================================
   WV7 RECAL FINAL
   Layout only — NO color/status logic changes
========================================================= */

/* Extend vessel window to the LEFT.
   Right boundary remains exactly where it is now. */
#vesselQuickInfo {
    left: 8px !important;
}

/* True 7-column layout */
#vesselQuickInfo .wv7-grid {
    width: 100% !important;
    height: 108px !important;

    display: grid !important;

    grid-template-columns:
        125px
        1.35fr
        1.35fr
        1.15fr
        1.05fr
        1.05fr
        1.25fr !important;

    grid-template-rows: 108px !important;

    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
}

/* Every column = exactly two vertical information zones */
#vesselQuickInfo .wv7-col {
    min-width: 0 !important;
    height: 108px !important;

    padding: 10px 12px !important;

    box-sizing: border-box !important;

    display: grid !important;
    grid-template-rows: 1fr 1fr !important;

    align-items: start !important;

    row-gap: 5px !important;

    overflow: visible !important;
}

/* PHOTO remains its own dedicated field */
#vesselQuickInfo .wv7-photo-col {
    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-start !important;
    align-items: flex-start !important;

    gap: 7px !important;
}

#vesselQuickInfo .wv7-photo {
    width: 82px !important;
    height: 52px !important;

    flex: 0 0 52px !important;
}

/* Consistent internal field alignment */
#vesselQuickInfo .wv7-field {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;
}

#vesselQuickInfo .wv7-label {
    margin: 0 0 5px 0 !important;
}

#vesselQuickInfo .wv7-value {
    width: 100% !important;
    min-width: 0 !important;

    font-size: 11px !important;
    line-height: 1.15 !important;
}

#vesselQuickInfo .wv7-vessel {
    font-size: 13px !important;
}

/* =========================================================
   COL 2 — EXISTING STATUS CONTROL
   Layout only. Existing button/menu/handler untouched.
========================================================= */

#vesselQuickInfo .wv7-status-slot {
    width: 100% !important;
    min-width: 0 !important;

    align-self: start !important;

    overflow: visible !important;
}

#vesselQuickInfo
.wv7-status-slot
.quickinfo-status-control {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

#vesselQuickInfo
.wv7-status-slot
.quickinfo-status-button {
    width: 100% !important;
    max-width: 210px !important;

    height: 25px !important;
    min-height: 25px !important;

    pointer-events: auto !important;
}

/* =========================================================
   COL 6 — HEADING
   Larger + centered in its complete column
========================================================= */

#vesselQuickInfo .wv7-heading-col {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Heading label stays aligned with other column labels */
#vesselQuickInfo
.wv7-heading-col > .wv7-label {
    width: 100% !important;
    text-align: left !important;

    margin-bottom: 5px !important;
}

/* Compass + value centered */
#vesselQuickInfo .wv7-heading {
    width: 100% !important;
    flex: 1 1 auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

#vesselQuickInfo .wv-heading-display {
    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    margin: 0 auto !important;
}

/* Larger compass.
   Existing colors deliberately NOT overridden. */
#vesselQuickInfo .wv-compass {
    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    flex: 0 0 46px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    margin: 0 !important;
}

/* White arrow larger and geometrically centered */
#vesselQuickInfo .wv-arrow {
    width: 22px !important;
    height: 22px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 20px !important;
    line-height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform-origin: 50% 50% !important;
}

/* Heading number */
#vesselQuickInfo
.wv-heading-display strong {
    font-size: 13px !important;
    line-height: 1 !important;

    margin: 0 !important;
}

/* =========================================================
   COL 7
========================================================= */

#vesselQuickInfo .wv7-data-type {
    max-width: 100% !important;
}

/* Keep close button safely above layout */
#vesselQuickInfo .quickinfo-close-final {
    z-index: 2147483500 !important;
}


/* ===== ROBUST WINDOW VESSEL 7 COLUMN ===== */

#vesselQuickInfo {
    left: 8px !important;
    right: 258px !important;
    width: auto !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

#vesselQuickInfo .wv-old-hidden {
    display: none !important;
}

#vesselQuickInfo .wv-final-grid {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 126px !important;

    display: grid !important;

    grid-template-columns:
        125px
        1.45fr
        1.35fr
        1.15fr
        1.05fr
        1.05fr
        1.25fr !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#vesselQuickInfo .wv-final-col {
    height: 126px !important;
    min-width: 0 !important;

    padding: 11px 13px !important;

    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    row-gap: 7px !important;

    box-sizing: border-box !important;

    border-right: 1px solid rgba(255,255,255,.10) !important;

    overflow: visible !important;
}

#vesselQuickInfo .wv-final-col:last-child {
    border-right: 0 !important;
}

#vesselQuickInfo .wv-label {
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .6px !important;
    margin-bottom: 6px !important;
    opacity: .7 !important;
    white-space: nowrap !important;
}

#vesselQuickInfo .wv-value {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#vesselQuickInfo .wv-name {
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* PHOTO */

#vesselQuickInfo .wv-photo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

#vesselQuickInfo .wv-photo-box {
    width: 88px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 7px !important;

    border-radius: 3px !important;
}

/* ORIGINAL STATUS CONTROL ONLY */

#vesselQuickInfo .wv-status-home {
    width: 100% !important;
    overflow: visible !important;
}

#vesselQuickInfo .wv-status-home .quickinfo-status-control {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#vesselQuickInfo .wv-status-home .quickinfo-status-button {
    width: 100% !important;
    max-width: 220px !important;
    min-height: 28px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#vesselQuickInfo .quickinfo-status-menu {
    z-index: 2147483000 !important;
}

/* HEADING */

#vesselQuickInfo .wv-heading-col {
    display: flex !important;
    flex-direction: column !important;
}

#vesselQuickInfo .wv-heading-box {
    flex: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 11px !important;
}

#vesselQuickInfo .wv-heading-circle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 2px solid #39ff88 !important;
    border-radius: 50% !important;

    background: transparent !important;

    box-shadow: 0 0 7px rgba(57,255,136,.55) !important;
}

#vesselQuickInfo .wv-heading-arrow {
    width: 24px !important;
    height: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    font-size: 22px !important;
    line-height: 24px !important;

    transform-origin: 50% 50% !important;
}

#vesselQuickInfo .wv-heading-value {
    font-size: 14px !important;
}

/* CLOSE BUTTON */

#vesselQuickInfo .quickinfo-close-final {
    z-index: 2147483500 !important;
}


/* =========================================================
   ROBUST VMS
   WINDOW VESSEL - TYPOGRAPHY + COMPASS FINAL TUNING
   Layout / colors / status logic untouched
========================================================= */

/* Slightly taller to reproduce the cleaner visual balance */
#vesselQuickInfo {
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
}

/* 7-column grid follows panel */
#vesselQuickInfo .wv-final-grid {
    height: 138px !important;
}

/* Column breathing room */
#vesselQuickInfo .wv-final-col {
    height: 138px !important;
    padding: 13px 15px !important;
    row-gap: 10px !important;
}

/* ---------------------------------------------------------
   LABEL TYPOGRAPHY
--------------------------------------------------------- */

#vesselQuickInfo .wv-label {
    margin-bottom: 7px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 8.5px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: .45px !important;

    opacity: .78 !important;

    white-space: nowrap !important;
}

/* ---------------------------------------------------------
   MAIN DATA VALUES
--------------------------------------------------------- */

#vesselQuickInfo .wv-value {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.15 !important;

    letter-spacing: .05px !important;
}

/* Vessel name becomes the strongest field */
#vesselQuickInfo .wv-name {
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* SN / IMO / Coordinates */
#vesselQuickInfo .wv-sn,
#vesselQuickInfo .wv-imo,
#vesselQuickInfo .wv-lon,
#vesselQuickInfo .wv-lat {
    font-size: 13px !important;
}

/* Speed / Fuel */
#vesselQuickInfo .wv-speed,
#vesselQuickInfo .wv-fuel {
    font-size: 13px !important;
}

/* Timestamp */
#vesselQuickInfo .wv-time {
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* ---------------------------------------------------------
   PHOTO
--------------------------------------------------------- */

#vesselQuickInfo .wv-photo-box {
    width: 92px !important;
    height: 78px !important;

    font-size: 7px !important;
}

/* ---------------------------------------------------------
   ORIGINAL STATUS CONTROL
   VISUAL ONLY
--------------------------------------------------------- */

#vesselQuickInfo
.wv-status-home
.quickinfo-status-control > small {
    margin-bottom: 7px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 8.5px !important;
    font-weight: 700 !important;

    letter-spacing: .45px !important;

    opacity: .78 !important;
}

#vesselQuickInfo
.wv-status-home
.quickinfo-status-button {
    max-width: 230px !important;

    height: 32px !important;
    min-height: 32px !important;

    padding: 0 10px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    line-height: 30px !important;

    text-align: left !important;
}

/* ---------------------------------------------------------
   HEADING COLUMN
--------------------------------------------------------- */

#vesselQuickInfo .wv-heading-col {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Center complete compass block */
#vesselQuickInfo .wv-heading-box {
    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 13px !important;
}

/* Bigger compass, still existing neon-green language */
#vesselQuickInfo .wv-heading-circle {
    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
    min-height: 64px !important;

    flex: 0 0 64px !important;

    border-width: 2px !important;

    background: transparent !important;

    box-shadow:
        0 0 10px rgba(57,255,136,.58) !important;
}

/* White arrow larger and centered */
#vesselQuickInfo .wv-heading-arrow {
    width: 30px !important;
    height: 30px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 27px !important;
    line-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform-origin: 50% 50% !important;
}

/* Heading value */
#vesselQuickInfo .wv-heading-value {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
}

/* ---------------------------------------------------------
   DATA TYPE
--------------------------------------------------------- */

#vesselQuickInfo .wv-type {
    width: fit-content !important;

    min-height: 28px !important;

    padding: 5px 9px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;
}


/* =========================================================
   ROBUST VMS - NAUTICAL COMPASS SAFE CSS
   No JS / status / layout changes
========================================================= */

#vesselQuickInfo .wv-heading-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

#vesselQuickInfo .wv-heading-circle {
    position: relative !important;

    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    flex: 0 0 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border: 2px solid #39ff88 !important;
    border-radius: 50% !important;

    background: transparent !important;

    box-shadow:
        0 0 9px rgba(57,255,136,.50) !important;

    overflow: hidden !important;
}

/* tick marks */
#vesselQuickInfo .wv-heading-circle::before {
    content: "" !important;

    position: absolute !important;
    inset: 4px !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(57,255,136,.95) 0deg 1deg,
            transparent 1deg 10deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 82%,
            #000 83% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 82%,
            #000 83% 100%
        ) !important;

    pointer-events: none !important;
}

/* cardinal indication */
#vesselQuickInfo .wv-heading-circle::after {
    content: "N" !important;

    position: absolute !important;
    top: 7px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    color: #39ff88 !important;

    font-size: 8px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    text-shadow:
        0 0 4px rgba(57,255,136,.55) !important;

    pointer-events: none !important;
}

/* existing rotating pointer */
#vesselQuickInfo .wv-heading-arrow {
    position: relative !important;
    z-index: 5 !important;

    width: 30px !important;
    height: 30px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;

    font-size: 27px !important;
    line-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform-origin: 50% 50% !important;

    text-shadow:
        0 0 4px rgba(255,255,255,.40) !important;
}

/* heading number */
#vesselQuickInfo .wv-heading-value {
    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    min-width: 38px !important;
}


/* =========================================================
   ROBUST VMS
   MOCKUP NAUTICAL COMPASS
========================================================= */

#vesselQuickInfo .wv-heading-box {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        5px !important;

}


/* =========================================================
   COMPASS BODY
========================================================= */

#vesselQuickInfo .wv-mockup-compass {

    position:
        relative !important;

    width:
        78px !important;

    height:
        78px !important;

    min-width:
        78px !important;

    min-height:
        78px !important;

    flex:
        0 0 78px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid rgba(57,255,136,.82) !important;

    border-radius:
        50% !important;

    background:
        rgba(0,20,18,.12) !important;

    box-shadow:
        0 0 8px rgba(57,255,136,.36) !important;

}


/* =========================================================
   PERIMETER TICKS
========================================================= */

#vesselQuickInfo .wv-mc-ticks {

    position:
        absolute !important;

    inset:
        3px !important;

    border-radius:
        50% !important;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(57,255,136,.95) 0deg 1deg,
            transparent 1deg 7.5deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 82%,
            #000 83% 100%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 82%,
            #000 83% 100%
        ) !important;

    pointer-events:
        none !important;

}


/* inner compass ring */

#vesselQuickInfo .wv-mc-ring {

    position:
        absolute !important;

    inset:
        10px !important;

    border:
        1px solid rgba(57,255,136,.32) !important;

    border-radius:
        50% !important;

}


/* =========================================================
   N E S W
========================================================= */

#vesselQuickInfo .wv-mc-cardinal {

    position:
        absolute !important;

    z-index:
        4 !important;

    color:
        #39ff88 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    text-shadow:
        0 0 4px rgba(57,255,136,.45) !important;

}


#vesselQuickInfo .mc-n {

    top:
        7px !important;

    left:
        50% !important;

    transform:
        translateX(-50%) !important;

}


#vesselQuickInfo .mc-e {

    right:
        6px !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;

}


#vesselQuickInfo .mc-s {

    bottom:
        6px !important;

    left:
        50% !important;

    transform:
        translateX(-50%) !important;

}


#vesselQuickInfo .mc-w {

    left:
        6px !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;

}


/* =========================================================
   NAVIGATION POINTER
========================================================= */

#vesselQuickInfo .wv-mc-pointer {

    position:
        absolute !important;

    left:
        50% !important;

    top:
        50% !important;

    width:
        30px !important;

    height:
        54px !important;

    z-index:
        6 !important;

    transform-origin:
        50% 50% !important;

}


/* Large green arrow like mockup */

#vesselQuickInfo .wv-mc-pointer-head {

    position:
        absolute !important;

    top:
        0 !important;

    left:
        50% !important;

    width:
        0 !important;

    height:
        0 !important;

    transform:
        translateX(-50%) !important;

    border-left:
        11px solid transparent !important;

    border-right:
        11px solid transparent !important;

    border-bottom:
        30px solid #39ff88 !important;

    filter:
        drop-shadow(
            0 0 3px rgba(57,255,136,.55)
        ) !important;

}


/* white rear pointer */

#vesselQuickInfo .wv-mc-pointer-tail {

    position:
        absolute !important;

    bottom:
        4px !important;

    left:
        50% !important;

    width:
        3px !important;

    height:
        19px !important;

    transform:
        translateX(-50%) !important;

    border-radius:
        2px !important;

    background:
        rgba(255,255,255,.72) !important;

}


/* central pivot */

#vesselQuickInfo .wv-mc-center {

    position:
        absolute !important;

    left:
        50% !important;

    top:
        50% !important;

    width:
        6px !important;

    height:
        6px !important;

    z-index:
        10 !important;

    transform:
        translate(-50%, -50%) !important;

    border-radius:
        50% !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.55) !important;

}


/* Heading degree */

#vesselQuickInfo .wv-heading-value {

    min-width:
        0 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    text-align:
        center !important;

}


/* =========================================================
   ROBUST VMS
   WINDOW VESSEL - UNIFORM FONT FINAL
   Compass / colors / layout / logic untouched
========================================================= */

/* Uniform font family */
#vesselQuickInfo,
#vesselQuickInfo * {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* Labels */
#vesselQuickInfo .wv-label,
#vesselQuickInfo .quickinfo-status-control > small {

    font-size:
        8px !important;

    font-weight:
        700 !important;

    line-height:
        1.1 !important;

    letter-spacing:
        .35px !important;

}


/* All information values */
#vesselQuickInfo .wv-value,
#vesselQuickInfo .wv-name,
#vesselQuickInfo .wv-sn,
#vesselQuickInfo .wv-imo,
#vesselQuickInfo .wv-lon,
#vesselQuickInfo .wv-lat,
#vesselQuickInfo .wv-speed,
#vesselQuickInfo .wv-fuel,
#vesselQuickInfo .wv-time,
#vesselQuickInfo .wv-type,
#vesselQuickInfo .wv-heading-value {

    font-size:
        11px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        0 !important;

}


/* Vessel name stays same size, only slightly bolder */
#vesselQuickInfo .wv-name {

    font-size:
        11px !important;

    font-weight:
        800 !important;

}


/* Existing native status button */
#vesselQuickInfo
.wv-status-home
.quickinfo-status-button {

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    line-height:
        1.1 !important;

}


/* Data type follows same typography */
#vesselQuickInfo .wv-type {

    font-size:
        10px !important;

    font-weight:
        800 !important;

}


/* Heading number follows same data sizing */
#vesselQuickInfo .wv-heading-value {

    font-size:
        11px !important;

    font-weight:
        700 !important;

}


/* Photo placeholder */
#vesselQuickInfo .wv-photo-box {

    font-size:
        7px !important;

    font-weight:
        600 !important;

}


/* =========================================================
   WINDOW VESSEL - MAIN DATA 14PX
========================================================= */

#vesselQuickInfo .wv-value,
#vesselQuickInfo .wv-name,
#vesselQuickInfo .wv-sn,
#vesselQuickInfo .wv-imo,
#vesselQuickInfo .wv-lon,
#vesselQuickInfo .wv-lat,
#vesselQuickInfo .wv-speed,
#vesselQuickInfo .wv-fuel,
#vesselQuickInfo .wv-time,
#vesselQuickInfo .wv-heading-value {
    font-size: 14px !important;
}

/* STATUS */
#vesselQuickInfo
.wv-status-home
.quickinfo-status-button {
    font-size: 14px !important;
}

/* DATA TYPE */
#vesselQuickInfo .wv-type {
    font-size: 14px !important;
}

/* Labels remain 8px */
#vesselQuickInfo .wv-label,
#vesselQuickInfo .quickinfo-status-control > small {
    font-size: 8px !important;
}


/* =========================================================
   WINDOW VESSEL - SEGOE UI
========================================================= */

#vesselQuickInfo,
#vesselQuickInfo * {
    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;
}

/* LABEL */
#vesselQuickInfo .wv-label,
#vesselQuickInfo .quickinfo-status-control > small {
    font-size: 8px !important;
}

/* MAIN DATA */
#vesselQuickInfo .wv-value,
#vesselQuickInfo .wv-name,
#vesselQuickInfo .wv-sn,
#vesselQuickInfo .wv-imo,
#vesselQuickInfo .wv-lon,
#vesselQuickInfo .wv-lat,
#vesselQuickInfo .wv-speed,
#vesselQuickInfo .wv-fuel,
#vesselQuickInfo .wv-time,
#vesselQuickInfo .wv-heading-value {
    font-size: 14px !important;
}

/* STATUS */
#vesselQuickInfo
.wv-status-home
.quickinfo-status-button {
    font-size: 14px !important;
}

/* DATA TYPE */
#vesselQuickInfo .wv-type {
    font-size: 14px !important;
}


/* WINDOW VESSEL - VESSEL NAME + STATUS REGULAR */

#vesselQuickInfo .wv-name,
#vesselQuickInfo .wv-status-home .quickinfo-status-button {
    font-weight: 400 !important;
}


/* =========================================================
   WINDOW VESSEL - SEGOE UI REGULAR FINAL
========================================================= */

/* ALL MAIN DATA = REGULAR */
#vesselQuickInfo .wv-value,
#vesselQuickInfo .wv-name,
#vesselQuickInfo .wv-sn,
#vesselQuickInfo .wv-imo,
#vesselQuickInfo .wv-lon,
#vesselQuickInfo .wv-lat,
#vesselQuickInfo .wv-speed,
#vesselQuickInfo .wv-fuel,
#vesselQuickInfo .wv-time,
#vesselQuickInfo .wv-type,
#vesselQuickInfo .wv-heading-value,
#vesselQuickInfo .wv-status-home .quickinfo-status-button {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* LABELS = REGULAR TOO */
#vesselQuickInfo .wv-label,
#vesselQuickInfo .quickinfo-status-control > small {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 400 !important;
}


/* =========================================================
   WINDOW VESSEL - ASSET PHOTO
========================================================= */

#vesselQuickInfo .wv-photo-box {
    width: 92px !important;
    height: 78px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 3px !important;
}

#vesselQuickInfo .wv-vessel-photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* =========================================================
   VOYAGE ROUTE PHASE 1
========================================================= */

#voyageRoutePanel {
    position: fixed;
    top: 92px;
    left: 220px;

    width: 300px;

    padding: 12px;

    display: none;

    z-index: 12000;

    box-sizing: border-box;

    font-family: "Segoe UI", Arial, sans-serif;

    color: #fff;

    background: rgba(4,20,16,.94);

    border: 1px solid rgba(57,255,136,.32);
    border-radius: 6px;

    box-shadow: 0 10px 30px rgba(0,0,0,.42);

    backdrop-filter: blur(8px);
}

#voyageRoutePanel.open {
    display: block;
}

#voyageRoutePanel .vr-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 9px;
    margin-bottom: 11px;

    border-bottom: 1px solid rgba(255,255,255,.09);

    font-size: 10px;
    font-weight: 400;
    letter-spacing: .5px;
}

#voyageRoutePanel #vrClose {
    width: 24px;
    height: 24px;

    padding: 0;

    border: 0;

    background: transparent;
    color: #39ff88;

    font-size: 19px;

    cursor: pointer;
}

#voyageRoutePanel .vr-field {
    margin-bottom: 11px;
}

#voyageRoutePanel .vr-field label {
    display: block;

    margin-bottom: 5px;

    color: rgba(220,235,228,.65);

    font-size: 8px;
    font-weight: 400;

    letter-spacing: .35px;
}

#voyageRoutePanel select {
    width: 100%;
    height: 34px;

    padding: 0 9px;

    box-sizing: border-box;

    border: 1px solid rgba(57,255,136,.28);
    border-radius: 4px;

    outline: none;

    background: rgba(0,20,18,.80);
    color: #fff;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: 12px;
    font-weight: 400;
}

#voyageRoutePanel select:focus {
    border-color: rgba(57,255,136,.75);
}

#voyageRoutePanel select:disabled {
    opacity: .42;
}

#voyageRoutePanel .vr-state {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 7px 9px;

    box-sizing: border-box;

    border: 1px solid rgba(57,255,136,.12);
    border-radius: 4px;

    background: rgba(57,255,136,.045);

    font-size: 10px;
    font-weight: 400;
}

#voyageRoutePanel .vr-state-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #39ff88;

    box-shadow: 0 0 5px rgba(57,255,136,.65);
}


/* VOYAGE ROUTE - VISIBLE WAYPOINT */
.leaflet-interactive.robust-vr-waypoint {
    stroke: #ffffff !important;
    stroke-width: 2px !important;
    fill: #00ff88 !important;
    fill-opacity: 1 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}


/* =========================================================
   VOYAGE ROUTE VISUAL
========================================================= */

.robust-vr-demo-route {
    stroke: #168cff;
    stroke-width: 4px;
    fill: none;
}

.robust-vr-route-motion {
    stroke: #ffffff;
    stroke-width: 2px;
    stroke-linecap: round;
    fill: none;
}

.robust-vr-waypoint-visible {
    stroke: #ffffff;
    stroke-width: 2px;
    fill: #00ff88;
}

.robust-vr-moving-dot {
    stroke: #ffffff;
    stroke-width: 2px;
    fill: #00ff88;
    filter: drop-shadow(0 0 5px #00ff88);
}

.robust-vr-waypoint-label {
    background: rgba(3,25,20,.92);
    border: 1px solid rgba(0,255,136,.65);
    color: #ffffff;
    box-shadow: none;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    padding: 2px 5px;
}

.robust-vr-waypoint-label:before {
    display: none;
}


/* =========================================================
   VOYAGE ROUTE - CLEAN SINGLE PATH
========================================================= */

.robust-vr-demo-route {
    stroke-width: 4px !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
}

.robust-vr-route-motion {
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
}

.robust-vr-waypoint-visible {
    stroke-width: 2px !important;
    fill-opacity: 1 !important;
}


.vrf-base,
.vrf-motion {
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.vrf-waypoint {
    cursor: pointer !important;
}

.vrf-moving {
    filter: drop-shadow(0 0 6px #00ff88) !important;
}

.vrf-label {
    background: rgba(3,25,20,.92) !important;
    border: 1px solid #00ff88 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    padding: 2px 5px !important;
}

.vrf-label::before {
    display: none !important;
}


/* =========================================================
   VOYAGE ROUTE - START / END SELECTION
========================================================= */

.vrf-waypoint {
    cursor: pointer !important;
}

.vr-selection-result {
    margin-top: 10px;
    padding: 8px 9px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 7px 12px;

    border:
        1px solid rgba(57,255,136,.18);

    border-radius: 4px;

    background:
        rgba(57,255,136,.04);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 8px;
    font-weight: 400;

    color:
        rgba(215,232,223,.60);
}

.vr-selection-result strong {
    display: block;

    margin-top: 3px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 400;
}


/* VOYAGE PLAN PHASE 1 */

#voyagePlanPanel{
 position:fixed;
 top:92px;
 left:220px;
 width:310px;
 padding:12px;
 display:none;
 z-index:12500;
 box-sizing:border-box;
 font-family:"Segoe UI",Arial,sans-serif;
 color:#fff;
 background:rgba(4,20,16,.94);
 border:1px solid rgba(57,255,136,.32);
 border-radius:6px;
 box-shadow:0 10px 30px rgba(0,0,0,.42);
 backdrop-filter:blur(8px);
}

#voyagePlanPanel.open{display:block}

#voyagePlanPanel .vp-title{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding-bottom:9px;
 margin-bottom:10px;
 border-bottom:1px solid rgba(255,255,255,.09);
 font-size:10px;
}

#voyagePlanPanel .vp-title button{
 border:0;
 background:transparent;
 color:#39ff88;
 font-size:19px;
 cursor:pointer;
}

#voyagePlanPanel label{
 display:block;
 margin:9px 0 5px;
 font-size:8px;
 font-weight:400;
 color:rgba(220,235,228,.65);
}

#voyagePlanPanel select,
#voyagePlanPanel input,
#voyagePlanPanel .vp-box{
 width:100%;
 min-height:34px;
 padding:7px 9px;
 box-sizing:border-box;
 border:1px solid rgba(57,255,136,.25);
 border-radius:4px;
 background:rgba(0,20,18,.78);
 color:#fff;
 font:400 11px "Segoe UI",Arial,sans-serif;
}

#vpResults{
 max-height:180px;
 overflow:auto;
}

#vpResults button{
 display:block;
 width:100%;
 padding:7px 9px;
 border:0;
 border-bottom:1px solid rgba(255,255,255,.06);
 background:rgba(2,30,24,.96);
 color:#fff;
 text-align:left;
 cursor:pointer;
 font:400 10px "Segoe UI",Arial,sans-serif;
}

#vpResults button:hover{
 background:rgba(57,255,136,.10);
}

#voyagePlanPanel .vp-summary{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:7px 10px;
 margin-top:12px;
 padding:9px;
 border:1px solid rgba(57,255,136,.14);
 border-radius:4px;
 font-size:8px;
 color:rgba(220,235,228,.60);
}

#voyagePlanPanel .vp-summary b{
 display:block;
 margin-top:2px;
 color:#fff;
 font-size:10px;
 font-weight:400;
}


/* =========================================================
   VOYAGE PLAN PHASE 3
========================================================= */

#vpRouteOptions {
    margin-top: 12px;
    padding-top: 10px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.vp-route-buttons {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
}

.vp-route-buttons button {
    height: 30px;

    border:
        1px solid rgba(57,255,136,.22);

    border-radius: 4px;

    background:
        rgba(57,255,136,.04);

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 400;

    cursor: pointer;
}

.vp-route-buttons button.active {
    border-color:
        rgba(57,255,136,.75);

    background:
        rgba(57,255,136,.14);

    color:
        #39ff88;
}

#vpManualPerf {
    margin-top: 8px;
}

#vpManualPerf input {
    width: 100%;
    height: 32px;

    padding: 0 8px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.22);

    border-radius: 4px;

    background:
        rgba(0,20,18,.75);

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 11px;
}

.vp-calc {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 7px 10px;

    margin-top: 12px;
    padding: 9px;

    border:
        1px solid rgba(57,255,136,.14);

    border-radius: 4px;

    background:
        rgba(57,255,136,.035);

    font-size: 8px;

    color:
        rgba(220,235,228,.60);
}

.vp-calc b {
    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 11px;
    font-weight: 400;
}


/* =========================================================
   VOYAGE PLAN - 2 COLUMN COMPACT LAYOUT
========================================================= */

#voyagePlanPanel {
    width: 640px !important;
    max-height: calc(100vh - 120px) !important;
    overflow: auto !important;
}

#voyagePlanPanel .vp-main-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}

#voyagePlanPanel .vp-left-column,
#voyagePlanPanel .vp-right-column {
    min-width: 0 !important;
}

#voyagePlanPanel .vp-right-column {
    padding-left: 14px !important;
    border-left: 1px solid rgba(255,255,255,.08) !important;
}

#voyagePlanPanel #vpRouteOptions {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

#voyagePlanPanel #vpPlanName {
    margin-bottom: 10px !important;
}

#voyagePlanPanel .vp-calc {
    grid-template-columns: 1fr 1fr !important;
}

/* Old duplicate summary no longer needed */
#voyagePlanPanel .vp-summary {
    display: none !important;
}


/* =========================================================
   VOYAGE PLAN - GLASS + MAP PICKER
========================================================= */

#voyagePlanPanel {
    background: rgba(3, 24, 20, .72) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;

    border:
        1px solid rgba(57,255,136,.24) !important;

    box-shadow:
        0 14px 38px rgba(0,0,0,.32) !important;
}


/* Hide full planner while selecting map coordinate */
#voyagePlanPanel.vp-map-picking {
    display: none !important;
}


/* Small floating picker */
#vpMapPickBar {
    position: fixed;

    top: 96px;
    left: 50%;

    transform: translateX(-50%);

    min-width: 270px;
    height: 42px;

    padding: 0 8px 0 14px;

    display: none;
    align-items: center;
    justify-content: space-between;

    z-index: 20000;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.55);

    border-radius: 6px;

    background:
        rgba(2,25,20,.72);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 24px rgba(0,0,0,.38);

    color: #ffffff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 400;
}


#vpMapPickBar.active {
    display: flex;
}


#vpMapPickBar::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 9px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #39ff88;

    box-shadow:
        0 0 7px rgba(57,255,136,.75);
}


#vpMapPickTitle {
    flex: 1;
}


#vpMapPickCancel {
    width: 25px;
    height: 25px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #39ff88;

    font-size: 18px;

    cursor: pointer;
}


/* Make selectable map fields obvious */
#vpDeparture,
#vpDestination {
    transition:
        border-color .15s ease,
        background .15s ease;
}

#vpDeparture:hover,
#vpDestination:hover {
    border-color:
        rgba(57,255,136,.65) !important;

    background:
        rgba(57,255,136,.07) !important;
}


/* =========================================================
   VOYAGE PLAN PHASE 4
========================================================= */

.vp-vessel-profile {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;

    margin-top: 7px;
    padding: 7px;

    border:
        1px solid rgba(57,255,136,.12);

    border-radius: 4px;

    font-size: 7px;
    color: rgba(220,235,228,.55);
}

.vp-vessel-profile b {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 9px;
    font-weight: 400;
}


#vpPlanActions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 12px;
}


#vpPlanActions button {
    height: 34px;

    border:
        1px solid rgba(57,255,136,.55);

    border-radius: 4px;

    background:
        rgba(57,255,136,.08);

    color: #fff;

    font:
        400 10px
        "Segoe UI",
        Arial,
        sans-serif;

    cursor: pointer;
}


#vpPlanActions button:last-child {
    background:
        rgba(57,255,136,.20);

    color:
        #39ff88;
}


#vpPlanActions button:disabled {
    opacity: .30;
    cursor: default;
}


/* BLUE MOVING VESSEL */

.vp-sim-vessel-icon {
    background: transparent !important;
    border: 0 !important;
}


.vp-blue-vessel {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #168cff;

    font-size: 25px;
    line-height: 28px;

    transform-origin: 50% 50%;

    text-shadow:
        0 0 4px rgba(22,140,255,.85);

    filter:
        drop-shadow(
            0 0 4px rgba(22,140,255,.75)
        );
}


/* =========================================================
   VOYAGE PLAN - SAVED LIST
========================================================= */

#vpSavedPlans {
    margin-top: 12px;
    padding-top: 9px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.vp-saved-title {
    margin-bottom: 6px;

    color:
        rgba(220,235,228,.62);

    font-size: 8px;
    font-weight: 400;

    letter-spacing: .4px;
}

#vpSavedList {
    max-height: 145px;
    overflow-y: auto;
}

.vp-saved-row {
    display: grid;

    grid-template-columns:
        1fr 30px 26px;

    align-items: center;

    border-top:
        1px solid rgba(255,255,255,.055);
}

.vp-saved-main {
    min-width: 0;

    padding: 7px 4px;

    border: 0;

    background: transparent;

    color: #fff;

    text-align: left;

    cursor: pointer;
}

.vp-saved-main strong {
    display: block;

    overflow: hidden;

    font:
        400 10px
        "Segoe UI",
        Arial,
        sans-serif;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.vp-saved-main small {
    display: block;

    margin-top: 2px;

    color:
        rgba(220,235,228,.46);

    font:
        400 7px
        "Segoe UI",
        Arial,
        sans-serif;
}

.vp-saved-go,
.vp-saved-delete {
    width: 25px;
    height: 25px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.vp-saved-go {
    color: #39ff88;
}

.vp-saved-delete {
    color:
        rgba(255,255,255,.45);
}

.vp-saved-delete:hover {
    color: #ff6575;
}

.vp-saved-empty {
    padding: 10px 3px;

    color:
        rgba(220,235,228,.35);

    font-size: 8px;
}


/* =========================================================
   VOYAGE PLAN - ANIMATED SIMULATION
========================================================= */

.vp-plan-route-base,
.vp-plan-route-motion {
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.vp-moving-ship-icon {
    background: transparent !important;
    border: 0 !important;
}

.vp-moving-ship {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform-origin: 50% 50%;

    filter:
        drop-shadow(
            0 0 5px
            rgba(22,140,255,.85)
        );
}

.vp-moving-ship svg {
    width: 28px;
    height: 28px;

    overflow: visible;
}

.vp-moving-ship path {
    fill: #168cff;
    stroke: #ffffff;
    stroke-width: 1.4;
}

.vp-moving-ship rect {
    fill: #86c8ff;
}


/* =========================================================
   VESSEL MANAGEMENT
========================================================= */

.app-page {
    display: none;
}

.app-page.active {
    display: block;
}

#vesselsPage {
    position: fixed;
    inset: 74px 0 0 0;
    z-index: 11000;

    padding: 24px 30px;

    box-sizing: border-box;

    overflow: auto;

    background:
        linear-gradient(
            180deg,
            rgba(4,18,16,.98),
            rgba(3,14,13,.99)
        );

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}

.vessel-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.vessel-page-header small {
    font-size: 9px;
    opacity: .55;
}

.vessel-page-header h1 {
    margin: 3px 0 0;
    font-size: 22px;
    font-weight: 400;
}

#addVesselBtn {
    height: 36px;
    padding: 0 16px;

    border:
        1px solid rgba(57,255,136,.55);

    border-radius: 4px;

    background:
        rgba(57,255,136,.10);

    color: #39ff88;

    cursor: pointer;
}

.vessel-list-card {
    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 6px;

    background:
        rgba(255,255,255,.025);
}

.vessel-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

#vesselMgmtSearch {
    width: 280px;
    height: 32px;

    padding: 0 9px;

    border:
        1px solid rgba(57,255,136,.20);

    border-radius: 4px;

    background:
        rgba(0,20,18,.70);

    color: #fff;
}

.vessel-row {
    display: grid;

    grid-template-columns:
        1.6fr
        1.4fr
        1fr
        1.2fr
        1fr;

    gap: 14px;

    padding: 11px 14px;

    border-top:
        1px solid rgba(255,255,255,.055);
}

.vessel-row small {
    display: block;

    margin-bottom: 3px;

    font-size: 7px;

    opacity: .50;
}

.vessel-row strong,
.vessel-row span {
    font-size: 12px;
    font-weight: 400;
}

.vessel-empty {
    padding: 30px;

    text-align: center;

    opacity: .35;
}


/* =========================================================
   ADD VESSEL WIZARD
========================================================= */

#addVesselWizard {
    position: fixed;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 30000;

    background:
        rgba(0,0,0,.56);
}

#addVesselWizard.open {
    display: flex;
}

.vessel-wizard-card {
    width: min(900px, calc(100vw - 80px));
    max-height: calc(100vh - 100px);

    overflow: auto;

    padding: 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.30);

    border-radius: 7px;

    background:
        rgba(4,22,18,.96);

    color: #fff;

    box-shadow:
        0 20px 55px rgba(0,0,0,.45);
}

.vessel-wizard-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
}

.vessel-wizard-title button {
    border: 0;
    background: transparent;

    color: #39ff88;

    font-size: 21px;

    cursor: pointer;
}

.vessel-steps {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 6px;

    margin-bottom: 14px;
}

.vessel-steps button {
    height: 34px;

    border:
        1px solid rgba(57,255,136,.15);

    border-radius: 4px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.55);

    cursor: pointer;
}

.vessel-steps button.active {
    border-color:
        rgba(57,255,136,.65);

    background:
        rgba(57,255,136,.09);

    color:
        #39ff88;
}

.vessel-step-panel {
    display: none;
}

.vessel-step-panel.active {
    display: block;
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 11px 12px;
}

.form-grid .field.full {
    grid-column:
        1 / -1;
}

.form-grid label {
    display: block;

    margin-bottom: 5px;

    font-size: 8px;

    opacity: .60;
}

.form-grid input {
    width: 100%;
    height: 34px;

    padding: 0 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.20);

    border-radius: 4px;

    outline: none;

    background:
        rgba(0,20,18,.72);

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}

.wizard-placeholder {
    min-height: 280px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    opacity: .45;
}

.wizard-placeholder small {
    margin-top: 7px;
}

.vessel-wizard-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 16px;

    padding-top: 12px;

    border-top:
        1px solid rgba(255,255,255,.07);
}

.vessel-wizard-actions button {
    height: 34px;

    padding: 0 14px;

    border:
        1px solid rgba(57,255,136,.25);

    border-radius: 4px;

    background:
        rgba(255,255,255,.03);

    color: #fff;

    cursor: pointer;
}

#vmSave,
#vmNext {
    border-color:
        rgba(57,255,136,.60);

    background:
        rgba(57,255,136,.11);

    color:
        #39ff88;
}


/* =========================================================
   VESSEL MANAGEMENT - ENGINE PAGE
========================================================= */

.vm-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.vm-section-heading strong {
    display: block;

    font-size: 11px;
    font-weight: 400;
}

.vm-section-heading small {
    display: block;

    margin-top: 3px;

    font-size: 8px;

    color:
        rgba(255,255,255,.45);
}

#vmAddEngine {
    height: 32px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.45);

    border-radius: 4px;

    background:
        rgba(57,255,136,.08);

    color:
        #39ff88;

    cursor: pointer;
}

.vm-engine-card {
    margin-bottom: 11px;

    padding: 12px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 5px;

    background:
        rgba(255,255,255,.018);
}

.vm-engine-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;
}

.vm-engine-head strong {
    font-size: 10px;
    font-weight: 400;

    color:
        #39ff88;
}

.vm-remove-engine {
    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.40);

    font-size: 8px;

    cursor: pointer;
}

.vm-remove-engine:hover {
    color: #ff6575;
}

#addVesselWizard select {
    width: 100%;
    height: 34px;

    padding: 0 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.20);

    border-radius: 4px;

    background:
        rgba(0,20,18,.72);

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   VESSEL MANAGEMENT - MANUFACTURER PERFORMANCE DATA
========================================================= */

.vm-engine-section-title {
    margin-bottom: 9px;

    color: rgba(255,255,255,.55);

    font-size: 8px;
    font-weight: 400;

    letter-spacing: .45px;
}


.vm-performance-section {
    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px solid rgba(255,255,255,.07);
}


.vm-performance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 9px;
}


.vm-performance-head strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
    font-weight: 400;
}


.vm-performance-head small {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.40);

    font-size: 7px;
}


.vm-add-performance {
    height: 29px;

    padding: 0 10px;

    flex: 0 0 auto;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color:
        #39ff88;

    font:
        400 8px
        "Segoe UI",
        Arial,
        sans-serif;

    cursor: pointer;
}


.vm-performance-table {
    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 4px;

    overflow: hidden;
}


.vm-performance-header,
.vm-performance-row {
    display: grid;

    grid-template-columns:
        42px
        1fr
        1fr
        1fr
        1fr
        34px;

    gap: 7px;

    align-items: center;
}


.vm-performance-header {
    min-height: 30px;

    padding: 0 8px;

    box-sizing: border-box;

    background:
        rgba(255,255,255,.035);

    color:
        rgba(255,255,255,.48);

    font-size: 7px;
}


.vm-performance-row {
    padding: 7px 8px;

    border-top:
        1px solid rgba(255,255,255,.055);
}


.vm-performance-no {
    color:
        rgba(255,255,255,.45);

    font-size: 9px;

    text-align: center;
}


.vm-performance-row input {
    width: 100%;
    height: 31px;

    padding: 0 7px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.16);

    border-radius: 3px;

    outline: none;

    background:
        rgba(0,20,18,.65);

    color: #fff;

    font:
        400 10px
        "Segoe UI",
        Arial,
        sans-serif;
}


.vm-remove-performance {
    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        rgba(255,255,255,.38);

    font-size: 16px;

    cursor: pointer;
}


.vm-remove-performance:hover {
    color: #ff6575;
}


/* =========================================================
   VESSEL MANAGEMENT - EQUIPMENT PAGE
========================================================= */

.vm-equipment-table {
    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 4px;

    overflow-x: auto;
}


.vm-equipment-header,
.vm-equipment-row {
    display: grid;

    grid-template-columns:
        38px
        130px
        minmax(160px,1.5fr)
        minmax(130px,1fr)
        60px
        120px
        80px
        100px
        34px;

    gap: 7px;

    align-items: center;

    min-width: 950px;
}


.vm-equipment-header {
    min-height: 31px;

    padding: 0 8px;

    box-sizing: border-box;

    background:
        rgba(255,255,255,.035);

    color:
        rgba(255,255,255,.48);

    font-size: 7px;
}


.vm-equipment-row {
    padding: 7px 8px;

    border-top:
        1px solid rgba(255,255,255,.055);
}


.vm-equipment-no {
    text-align: center;

    color:
        rgba(255,255,255,.45);

    font-size: 9px;
}


.vm-equipment-row input,
.vm-equipment-row select {
    width: 100%;
    height: 31px;

    padding: 0 7px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.16);

    border-radius: 3px;

    outline: none;

    background:
        rgba(0,20,18,.65);

    color: #fff;

    font:
        400 9px
        "Segoe UI",
        Arial,
        sans-serif;
}


.vm-remove-equipment {
    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        rgba(255,255,255,.38);

    font-size: 16px;

    cursor: pointer;
}


.vm-remove-equipment:hover {
    color: #ff6575;
}


.vm-equipment-note {
    display: grid;

    grid-template-columns:
        repeat(4,auto);

    gap: 12px;

    align-items: center;

    margin-top: 10px;

    padding: 8px 10px;

    border:
        1px solid rgba(57,255,136,.10);

    border-radius: 4px;

    background:
        rgba(57,255,136,.025);

    color:
        rgba(255,255,255,.45);

    font-size: 7px;
}


.vm-equipment-note strong {
    color: #39ff88;

    font-weight: 400;
}


#vmAddEquipment {
    height: 32px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.45);

    border-radius: 4px;

    background:
        rgba(57,255,136,.08);

    color:
        #39ff88;

    cursor: pointer;
}


/* =========================================================
   EQUIPMENT PAGE - NO QTY + LARGER FONT
========================================================= */

.vm-equipment-header,
.vm-equipment-row {
    grid-template-columns:
        38px
        140px
        minmax(180px,1.5fr)
        minmax(140px,1fr)
        130px
        90px
        110px
        34px !important;

    min-width: 920px !important;
}

.vm-equipment-header {
    font-size: 9px !important;
}

.vm-equipment-row input,
.vm-equipment-row select {
    font-size: 12px !important;
    height: 34px !important;
}

.vm-equipment-no {
    font-size: 12px !important;
}

.vm-equipment-note {
    font-size: 9px !important;
}


/* =========================================================
   VESSEL MANAGEMENT - ASSET PHOTO PAGE
========================================================= */

.vm-photo-section {
    margin-bottom: 18px;
}


.vm-main-photo-layout {
    display: grid;

    grid-template-columns:
        300px
        1fr;

    gap: 18px;

    align-items: start;
}


.vm-main-photo-preview {
    width: 300px;
    height: 180px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(57,255,136,.20);

    border-radius: 5px;

    background:
        rgba(0,20,18,.55);

    color:
        rgba(255,255,255,.35);

    font-size: 10px;
}


.vm-main-photo-preview img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.vm-photo-control {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;
}


.vm-photo-upload-button,
#vmRemoveMainPhoto {
    min-height: 32px;

    padding: 0 12px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.40);

    border-radius: 4px;

    background:
        rgba(57,255,136,.07);

    color:
        #39ff88;

    font:
        400 10px
        "Segoe UI",
        Arial,
        sans-serif;

    cursor: pointer;
}


#vmRemoveMainPhoto {
    border-color:
        rgba(255,255,255,.14);

    background:
        transparent;

    color:
        rgba(255,255,255,.55);
}


.vm-photo-control small {
    color:
        rgba(255,255,255,.40);

    font-size: 8px;
}


.vm-photo-gallery {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 10px;

    min-height: 130px;
}


.vm-gallery-card {
    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 4px;

    background:
        rgba(255,255,255,.025);
}


.vm-gallery-card img {
    width: 100%;
    height: 110px;

    display: block;

    object-fit: cover;
}


.vm-gallery-caption {
    display: grid;

    grid-template-columns:
        1fr 28px;

    align-items: center;

    min-height: 32px;

    padding-left: 8px;
}


.vm-gallery-caption span {
    overflow: hidden;

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.vm-gallery-caption button {
    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.45);

    font-size: 17px;

    cursor: pointer;
}


.vm-gallery-caption button:hover {
    color:
        #ff6575;
}


.vm-photo-empty {
    grid-column:
        1 / -1;

    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px dashed rgba(255,255,255,.09);

    border-radius: 4px;

    color:
        rgba(255,255,255,.28);

    font-size: 10px;
}


/* =========================================================
   VESSEL MANAGEMENT - GALLERY VIEW
========================================================= */

#vesselMgmtList {
    display: grid !important;

    grid-template-columns:
        repeat(auto-fill, minmax(245px, 1fr)) !important;

    gap: 14px !important;

    padding: 14px !important;
}


.vessel-gallery-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 6px;

    background:
        rgba(255,255,255,.025);

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}


.vessel-gallery-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(57,255,136,.38);

    background:
        rgba(57,255,136,.035);
}


.vessel-gallery-photo {
    position: relative;

    width: 100%;
    height: 145px;

    overflow: hidden;

    background:
        rgba(0,20,18,.65);
}


.vessel-gallery-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.vessel-gallery-no-photo {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.25);

    font:
        400 10px
        "Segoe UI",
        Arial,
        sans-serif;
}


.vessel-gallery-status {
    position: absolute;

    right: 8px;
    bottom: 8px;

    padding: 4px 7px;

    border:
        1px solid rgba(57,255,136,.50);

    border-radius: 3px;

    background:
        rgba(2,24,19,.82);

    color:
        #39ff88;

    font:
        400 8px
        "Segoe UI",
        Arial,
        sans-serif;
}


.vessel-gallery-body {
    padding: 11px 12px 12px;
}


.vessel-gallery-name {
    overflow: hidden;

    color: #fff;

    font:
        400 14px
        "Segoe UI",
        Arial,
        sans-serif;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.vessel-gallery-company {
    margin-top: 3px;

    overflow: hidden;

    color:
        rgba(255,255,255,.48);

    font:
        400 10px
        "Segoe UI",
        Arial,
        sans-serif;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.vessel-gallery-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px 12px;

    margin-top: 11px;

    padding-top: 10px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.78);

    font:
        400 11px
        "Segoe UI",
        Arial,
        sans-serif;
}


.vessel-gallery-grid small {
    display: block;

    margin-bottom: 2px;

    color:
        rgba(255,255,255,.38);

    font-size: 7px;
}


.vessel-empty {
    grid-column:
        1 / -1;
}


/* =========================================================
   VESSEL GALLERY - READABLE FONT OVERRIDE
========================================================= */

.vessel-gallery-name {
    font-size: 16px !important;
}

.vessel-gallery-company {
    font-size: 12px !important;
}

.vessel-gallery-grid {
    font-size: 12px !important;
}

.vessel-gallery-grid small {
    font-size: 10px !important;
}

.vessel-gallery-status {
    font-size: 10px !important;
}

.vessel-list-head,
.vessel-list-head strong {
    font-size: 12px !important;
}

#vesselMgmtSearch {
    font-size: 12px !important;
}

.vessel-empty {
    font-size: 12px !important;
}


/* =========================================================
   VESSEL CARD HIDDEN ACTION MENU
========================================================= */

.vessel-gallery-card {
    position: relative !important;
}


.vessel-card-action-toggle {
    position: absolute;

    top: 8px;
    right: 8px;

    z-index: 12;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 4px;

    background:
        rgba(2,20,18,.68);

    color:
        rgba(255,255,255,.72);

    font-size: 18px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    backdrop-filter:
        blur(6px);
}


.vessel-card-action-toggle:hover {
    border-color:
        rgba(57,255,136,.52);

    color:
        #39ff88;
}


.vessel-card-action-menu {
    position: absolute;

    top: 38px;
    right: 8px;

    z-index: 20;

    width: 130px;

    display: none;

    overflow: hidden;

    border:
        1px solid rgba(57,255,136,.20);

    border-radius: 4px;

    background:
        rgba(3,24,20,.96);

    box-shadow:
        0 8px 20px rgba(0,0,0,.38);
}


.vessel-card-action-menu.open {
    display: block;
}


.vessel-card-action-menu button {
    width: 100%;
    height: 32px;

    padding: 0 9px;

    border: 0;

    border-bottom:
        1px solid rgba(255,255,255,.055);

    background:
        transparent;

    color:
        #ffffff;

    text-align: left;

    font:
        400 11px
        "Segoe UI",
        Arial,
        sans-serif;

    cursor: pointer;
}


.vessel-card-action-menu button:hover {
    background:
        rgba(57,255,136,.08);

    color:
        #39ff88;
}


.vessel-card-action-menu button.danger:hover {
    background:
        rgba(255,70,85,.08);

    color:
        #ff6575;
}


/* =========================================================
   VESSEL DELETE - DASHBOARD CENTER MODAL
========================================================= */

.vm-delete-confirm {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(0,0,0,.58);

    backdrop-filter:
        blur(4px);
}

.vm-delete-confirm.open {
    display: flex;
}

.vm-delete-confirm-box {
    width: 390px;

    padding: 22px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.22);

    border-radius: 7px;

    background:
        rgba(4,24,21,.97);

    box-shadow:
        0 18px 55px rgba(0,0,0,.55);

    color: #fff;

    font-size: 12px;
}

.vm-delete-confirm-title {
    margin-bottom: 18px;

    color: #ff6575;

    font-size: 14px;
    font-weight: 500;
}

.vm-delete-confirm-text {
    font-size: 12px;
    line-height: 1.6;
}

.vm-delete-confirm-text strong {
    color: #fff;
}

.vm-delete-confirm-warning {
    margin-top: 7px;

    color:
        rgba(255,255,255,.48);

    font-size: 12px;
}

.vm-delete-confirm-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 22px;
}

.vm-delete-confirm-actions button {
    min-width: 90px;
    height: 34px;

    border-radius: 4px;

    font-size: 12px;

    cursor: pointer;
}

#vmDeleteCancel {
    border:
        1px solid rgba(255,255,255,.14);

    background: transparent;

    color: rgba(255,255,255,.72);
}

#vmDeleteConfirmButton {
    border:
        1px solid rgba(255,101,117,.55);

    background:
        rgba(255,101,117,.10);

    color: #ff6575;
}


/* =========================================================
   VESSEL GALLERY - TRACKING STATUS
========================================================= */

.vessel-gallery-status[data-status="operation"] {
    color: #ffb000;
}

.vessel-gallery-status[data-status="docking"] {
    color: #b95cff;
}

.vessel-gallery-status[data-status="damage"] {
    color: #ff4160;
}

.vessel-gallery-status[data-status="weather"] {
    color: #9aa4ad;
}

.vessel-gallery-status[data-status="unreported"] {
    color: #39ff88;
}


/* =========================================================
   VESSEL DETAIL - PHASE 1
========================================================= */

.vessel-detail-page {
    position: fixed;

    inset:
        70px 0 0 0;

    z-index: 4200;

    display: none;

    overflow-y: auto;

    background:
        #061310;

    color: #fff;

    font-size: 12px;
}

.vessel-detail-page.active {
    display: block;
}


.vd-header {
    min-height: 74px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 22px;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(3,22,18,.96);
}


.vd-header-left {
    display: flex;

    align-items: center;

    gap: 12px;
}


.vd-back {
    width: 34px;
    height: 34px;

    border:
        1px solid rgba(57,255,136,.25);

    border-radius: 4px;

    background:
        rgba(57,255,136,.04);

    color: #39ff88;

    font-size: 24px;

    cursor: pointer;
}


.vd-header-left small,
.vd-header-right label {
    display: block;

    color:
        rgba(255,255,255,.42);

    font-size: 10px;
}


.vd-header-left strong {
    display: block;

    margin-top: 2px;

    font-size: 17px;
    font-weight: 500;
}


#vdVesselMeta {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.55);

    font-size: 11px;
}


.vd-header-right {
    display: flex;

    align-items: flex-end;

    gap: 8px;
}


#vdPeriod,
.vd-custom-period input {
    height: 34px;

    padding: 0 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.18);

    border-radius: 4px;

    background:
        rgba(0,20,17,.75);

    color: #fff;

    font-size: 12px;
}


.vd-custom-period {
    display: none;

    align-items: center;

    gap: 6px;
}


.vd-custom-period.open {
    display: flex;
}


.vd-export,
#vdApplyPeriod {
    height: 34px;

    padding: 0 14px;

    border:
        1px solid rgba(57,255,136,.42);

    border-radius: 4px;

    background:
        rgba(57,255,136,.07);

    color: #39ff88;

    font-size: 12px;

    cursor: pointer;
}


.vd-tabs {
    position: sticky;

    top: 0;

    z-index: 10;

    display: flex;

    gap: 3px;

    padding: 0 22px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(4,20,17,.98);
}


.vd-tab {
    min-height: 43px;

    padding: 0 14px;

    border: 0;
    border-bottom:
        2px solid transparent;

    background: transparent;

    color:
        rgba(255,255,255,.48);

    font-size: 12px;

    cursor: pointer;
}


.vd-tab:hover {
    color: #fff;
}


.vd-tab.active {
    border-bottom-color:
        #39ff88;

    color:
        #39ff88;
}


.vd-content {
    padding: 18px 22px 30px;
}


.vd-overview-title {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 13px;

    color:
        rgba(255,255,255,.42);

    font-size: 12px;
}


.vd-overview-title small {
    display: block;

    font-size: 9px;
}


.vd-overview-title strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 13px;
}


.vd-kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 10px;
}


.vd-kpi {
    min-height: 92px;

    padding: 13px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 5px;

    background:
        rgba(255,255,255,.022);
}


.vd-kpi small {
    color:
        rgba(255,255,255,.42);

    font-size: 10px;
}


.vd-kpi strong {
    display: block;

    margin-top: 8px;

    color: #fff;

    font-size: 22px;
    font-weight: 400;
}


.vd-kpi strong span {
    margin-left: 3px;

    color:
        rgba(255,255,255,.50);

    font-size: 11px;
}


.vd-kpi div {
    margin-top: 5px;

    color:
        rgba(255,255,255,.38);

    font-size: 10px;
}


.vd-overview-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 10px;
}


.vd-panel,
.vd-large-panel {
    min-height: 190px;

    padding: 14px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 5px;

    background:
        rgba(255,255,255,.018);
}


.vd-panel-title {
    color: #39ff88;

    font-size: 11px;
}


.vd-placeholder {
    min-height: 135px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.30);

    font-size: 12px;

    text-align: center;
}


.vd-placeholder-large {
    min-height: 420px;
}


@media (max-width: 1100px) {

    .vd-kpi-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .vd-header {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   VESSEL DETAIL V2
   Header Photo / Status / Map Control Isolation
========================================================= */

/*
 * Map Tracking controls must not penetrate Vessel Detail.
 */
body.vessel-detail-active #mapLayerSelect,
body.vessel-detail-active #windy,
body.vessel-detail-active .topbar-map-status {
    visibility: hidden !important;
    pointer-events: none !important;
}


.vd-vessel-photo {
    width: 82px;
    height: 52px;

    flex: 0 0 82px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 5px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.30);

    font-size: 9px;
}


.vd-vessel-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.vd-vessel-identity {
    min-width: 230px;
}


.vd-vessel-name-row {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 2px;
}


.vd-vessel-name-row strong {
    margin-top: 0;
}


.vd-status {
    display: inline-flex;

    align-items: center;

    min-height: 20px;

    padding: 0 8px;

    box-sizing: border-box;

    border:
        1px solid currentColor;

    border-radius: 10px;

    font-size: 9px;

    line-height: 1;
}


.vd-status[data-status="operation"] {
    color: #ffb000;
}


.vd-status[data-status="docking"] {
    color: #b95cff;
}


.vd-status[data-status="damage"] {
    color: #ff4160;
}


.vd-status[data-status="weather"] {
    color: #9aa4ad;
}


.vd-status[data-status="unreported"] {
    color: #39ff88;
}


/* =========================================================
   VESSEL DETAIL V3
   LARGE HEADER + LIVE DATA + PROCESSING
========================================================= */


/* --- MAP / WINDY ISOLATION --- */

body.vessel-detail-active #mapLayerSelect,
body.vessel-detail-active #mapLayerSelect option,
body.vessel-detail-active #windy,
body.vessel-detail-active [id*="windy" i],
body.vessel-detail-active [class*="windy" i] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* --- HEADER --- */

.vd-header {
    min-height: 100px !important;

    padding:
        14px 24px !important;
}


.vd-vessel-photo {
    width: 120px !important;
    height: 72px !important;

    flex:
        0 0 120px !important;

    font-size:
        11px !important;
}


.vd-header-left {
    gap:
        16px !important;
}


.vd-header-left small {
    font-size:
        11px !important;
}


.vd-vessel-name-row strong,
#vdVesselName {
    font-size:
        22px !important;

    font-weight:
        400 !important;
}


#vdVesselMeta {
    margin-top:
        5px !important;

    font-size:
        13px !important;
}


.vd-status {
    min-height:
        25px !important;

    padding:
        0 10px !important;

    border-radius:
        13px !important;

    font-size:
        11px !important;
}


/* Header controls */

.vd-header-right label {
    font-size:
        10px !important;
}


#vdPeriod,
.vd-custom-period input,
.vd-export,
#vdApplyPeriod {
    font-size:
        12px !important;
}


/* =========================================================
   GPS + SENSOR LAST VALID DATA
========================================================= */

.vd-live-data-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-bottom: 16px;
}


.vd-live-card {
    min-height: 180px;

    padding: 15px 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 6px;

    background:
        rgba(255,255,255,.022);
}


.vd-live-card-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}


.vd-live-card-head small {
    display: block;

    color:
        rgba(255,255,255,.42);

    font-size: 10px;
}


.vd-live-card-head strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 13px;
    font-weight: 400;
}


.vd-live-badge {
    padding:
        4px 8px;

    border:
        1px solid rgba(57,255,136,.40);

    border-radius:
        10px;

    color: #39ff88;

    font-size: 9px;
}


/* GPS DATA */

.vd-live-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 10px;
}


.vd-live-grid > div {
    padding: 9px 10px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:
        4px;

    background:
        rgba(0,0,0,.10);
}


.vd-live-grid small {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vd-live-grid strong {
    font-size: 15px;
    font-weight: 400;
}


.vd-live-grid strong span {
    margin-left: 2px;

    color:
        rgba(255,255,255,.45);

    font-size: 10px;
}


.vd-last-valid-time {
    margin-top: 12px;

    padding-top: 9px;

    border-top:
        1px solid rgba(255,255,255,.055);

    color:
        rgba(255,255,255,.40);

    font-size: 9px;
}


.vd-last-valid-time strong {
    margin-left:
        7px;

    color:
        rgba(255,255,255,.78);

    font-size:
        11px;

    font-weight:
        400;
}


/* SENSOR LAST VALID */

.vd-sensor-valid-list {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}


.vd-sensor-valid-list > div {
    min-height: 54px;

    padding: 8px 10px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:
        4px;

    background:
        rgba(0,0,0,.10);
}


.vd-sensor-valid-list span {
    display: block;

    color:
        rgba(255,255,255,.48);

    font-size: 10px;
}


.vd-sensor-valid-list strong {
    display: block;

    margin-top:
        2px;

    font-size:
        14px;

    font-weight:
        400;
}


.vd-sensor-valid-list small {
    display: block;

    margin-top:
        2px;

    color:
        rgba(255,255,255,.30);

    font-size:
        8px;
}


/* =========================================================
   PROCESSED DATA
========================================================= */

.vd-processing-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin:
        4px 0 12px;

    padding-top:
        4px;
}


.vd-processing-head small {
    display: block;

    color:
        rgba(255,255,255,.42);

    font-size: 9px;
}


.vd-processing-head strong {
    display: block;

    margin-top:
        2px;

    font-size:
        14px;

    font-weight:
        400;
}


.vd-processing-head > span {
    color:
        rgba(255,255,255,.40);

    font-size:
        10px;
}


@media (max-width: 1100px) {

    .vd-live-data-grid {
        grid-template-columns:
            1fr;
    }

    .vd-live-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


/* =========================================================
   VESSEL OVERVIEW
   ME1-ME5 / TANK1-TANK6 / PING
========================================================= */

.vd-gps-full {
    padding: 15px 16px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 6px;

    background:
        rgba(255,255,255,.022);

    margin-bottom: 14px;
}


.vd-sensor-section-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 9px;
}


.vd-sensor-section-head small {
    display: block;

    color:
        rgba(255,255,255,.42);

    font-size: 10px;
}


.vd-sensor-section-head strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 13px;
    font-weight: 400;
}


.vd-sensor-section-head > span {
    color:
        rgba(255,255,255,.38);

    font-size: 10px;
}


.vd-sensor-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(360px,.9fr);

    gap: 12px;

    align-items: stretch;
}


.vd-engine-telemetry,
.vd-tank-telemetry,
.vd-ping-section {
    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 6px;

    background:
        rgba(255,255,255,.02);

    overflow: hidden;
}


.vd-section-title {
    min-height: 36px;

    display: flex;

    align-items: center;

    padding: 0 12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    color: #39ff88;

    font-size: 11px;
}


.vd-engine-row {
    display: grid;

    grid-template-columns:
        68px
        repeat(6,minmax(75px,1fr));

    gap: 5px;

    align-items: center;

    min-height: 45px;

    padding: 0 10px;

    border-top:
        1px solid rgba(255,255,255,.045);

    box-sizing: border-box;
}


.vd-engine-row-head {
    min-height: 34px;

    border-top: 0;

    background:
        rgba(255,255,255,.03);

    color:
        rgba(255,255,255,.40);

    font-size: 9px;
}


.vd-engine-row strong {
    font-size: 12px;
    font-weight: 400;

    color:
        rgba(255,255,255,.82);
}


.vd-me-label {
    color: #39ff88;

    font-size: 12px;
}


/* TANKS */

.vd-tank-list {
    padding: 5px 10px 8px;
}


.vd-tank-row {
    display: grid;

    grid-template-columns:
        66px
        1fr
        48px
        72px;

    gap: 8px;

    align-items: center;

    min-height: 42px;

    border-top:
        1px solid rgba(255,255,255,.045);
}


.vd-tank-row:first-child {
    border-top: 0;
}


.vd-tank-name,
.vd-tank-percent,
.vd-tank-volume {
    font-size: 11px;
}


.vd-tank-bar {
    height: 13px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 3px;

    background:
        rgba(0,0,0,.22);
}


.vd-tank-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #dfb300,
            #ffd91f
        );

    transition:
        width .25s ease;
}


.vd-tank-percent {
    text-align: right;
}


.vd-tank-volume {
    text-align: right;

    color:
        rgba(255,255,255,.72);
}


/* PING */

.vd-ping-section {
    margin-top: 12px;

    padding-bottom: 10px;
}


.vd-ping-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 10px 12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vd-ping-head small {
    display: block;

    color:
        rgba(255,255,255,.40);

    font-size: 9px;
}


.vd-ping-head > div > strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 11px;
    font-weight: 400;
}


.vd-ping-summary {
    display: flex;

    gap: 18px;
}


.vd-ping-summary span {
    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


.vd-ping-summary strong {
    display: block;

    margin-top: 2px;

    color:
        rgba(255,255,255,.82);

    font-size: 11px;
    font-weight: 400;
}


.vd-ping-graph {
    position: relative;

    height: 155px;

    margin:
        10px 12px 0;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.05);

    border-radius: 4px;

    background:
        rgba(0,0,0,.15);
}


.vd-ping-graph svg {
    width: 100%;
    height: 125px;
}


.vd-ping-graph polyline {
    fill:
        rgba(70,140,220,.16);

    stroke:
        rgba(80,160,245,.82);

    stroke-width:
        3;

    vector-effect:
        non-scaling-stroke;
}


.vd-ping-graph > span {
    position: absolute;

    left: 10px;
    bottom: 7px;

    color:
        rgba(255,255,255,.30);

    font-size: 8px;
}


@media (max-width: 1200px) {

    .vd-sensor-layout {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   VESSEL OVERVIEW - ENGINE ICON
========================================================= */

.vd-me-label {
    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    color: #39ff88 !important;

    font-size: 12px !important;
}


.vd-engine-icon {
    width: 25px;
    height: 21px;

    flex: 0 0 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #bfff00;

    filter:
        drop-shadow(
            0 0 3px
            rgba(191,255,0,.38)
        );
}


.vd-engine-icon svg {
    width: 24px;
    height: 19px;

    overflow: visible;
}


.vd-engine-icon path {
    fill:
        rgba(191,255,0,.06);

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linejoin: round;
}


.vd-engine-icon circle {
    fill: currentColor;
}


/* =========================================================
   VESSEL DETAIL - LOG & TREND V1
========================================================= */

.vlt-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 12px;

    padding: 12px 14px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);
}


.vlt-toolbar-title small {
    display: block;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vlt-toolbar-title strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 15px;
    font-weight: 400;
}


.vlt-toolbar-title span {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 10px;
}


.vlt-toolbar-controls {
    display: flex;

    align-items: flex-end;

    gap: 7px;
}


.vlt-toolbar-controls label {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


#vltPeriod,
#vltAggregation {
    height: 33px;

    padding: 0 8px;

    border:
        1px solid rgba(57,255,136,.17);

    border-radius: 4px;

    background: #071713;

    color: #fff;

    font-size: 11px;
}


#vltApply,
#vltExport {
    height: 33px;

    padding: 0 13px;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color: #39ff88;

    font-size: 10px;

    cursor: pointer;
}


/* WORKSPACE */

.vlt-workspace {
    display: grid;

    grid-template-columns:
        255px minmax(0,1fr);

    gap: 12px;
}


/* FIELD SELECTOR */

.vlt-selector {
    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);

    overflow: hidden;
}


.vlt-selector-head {
    min-height: 42px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vlt-selector-head strong {
    color: #39ff88;

    font-size: 10px;
    font-weight: 400;
}


#vltClear {
    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.40);

    font-size: 9px;

    cursor: pointer;
}


.vlt-selector-scroll {
    max-height: 690px;

    overflow-y: auto;

    padding-bottom: 10px;
}


.vlt-field-section {
    padding: 10px 11px;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}


.vlt-section-name {
    margin-bottom: 7px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;

    letter-spacing: .5px;
}


.vlt-simple-fields {
    display: grid;

    gap: 5px;
}


.vlt-simple-fields label,
.vlt-engine-group label {
    display: flex;

    align-items: center;

    gap: 6px;

    min-height: 22px;

    color:
        rgba(255,255,255,.66);

    font-size: 9px;

    cursor: pointer;
}


.vlt-field {
    accent-color: #39ff88;
}


.vlt-engine-group {
    margin-top: 7px;

    padding: 7px 8px;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius: 4px;

    background:
        rgba(0,0,0,.10);
}


.vlt-group-title {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 4px;

    color: #39ff88;

    font-size: 10px;
}


.vlt-engine-mini-icon {
    color: #bfff00;

    font-size: 12px;
}


/* ANALYSIS */

.vlt-analysis {
    min-width: 0;
}


.vlt-chart-panel,
.vlt-log-panel {
    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);

    overflow: hidden;
}


.vlt-chart-head {
    min-height: 54px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 0 13px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vlt-chart-head small,
.vlt-log-head small {
    display: block;

    color:
        rgba(255,255,255,.36);

    font-size: 8px;
}


.vlt-chart-head > div > strong,
.vlt-log-head strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 11px;
    font-weight: 400;
}


.vlt-chart-legend {
    color:
        rgba(255,255,255,.36);

    font-size: 9px;
}


.vlt-chart-legend strong {
    color:
        rgba(255,255,255,.72);

    font-weight: 400;
}


.vlt-chart {
    display: grid;

    grid-template-columns:
        48px minmax(0,1fr);

    min-height: 330px;

    padding:
        15px 14px 10px 6px;
}


.vlt-y-axis {
    height: 280px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-end;

    padding-right: 7px;

    box-sizing: border-box;

    color:
        rgba(255,255,255,.26);

    font-size: 7px;
}


.vlt-chart-area {
    position: relative;

    height: 280px;

    border-left:
        1px solid rgba(255,255,255,.08);

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.vlt-grid-line {
    height: 20%;

    box-sizing: border-box;

    border-top:
        1px solid rgba(255,255,255,.035);
}


.vlt-chart-area svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.vlt-chart-area polyline {
    fill: none;

    /*
     * Stroke color is supplied per Trend series
     * by vessels-page.js so graph, legend and
     * statistics use the same identification color.
     */
    stroke-width: 2.2;

    vector-effect:
        non-scaling-stroke;
}


.vlt-x-axis {
    position: absolute;

    left: 0;
    right: 0;
    bottom: -19px;

    display: flex;

    justify-content: space-between;

    color:
        rgba(255,255,255,.28);

    font-size: 7px;
}


/* SUMMARY */

.vlt-summary {
    display: grid;

    grid-template-columns:
        repeat(6,1fr);

    gap: 7px;

    margin: 9px 0;
}


.vlt-summary > div {
    min-height: 54px;

    padding: 8px 10px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 4px;

    background:
        rgba(255,255,255,.018);
}


.vlt-summary small {
    display: block;

    color:
        rgba(255,255,255,.34);

    font-size: 8px;
}


.vlt-summary strong {
    display: block;

    margin-top: 5px;

    font-size: 13px;
    font-weight: 400;
}


/* LOG */

.vlt-log-head {
    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vlt-log-head > span {
    color:
        rgba(255,255,255,.30);

    font-size: 8px;
}


.vlt-log-row {
    display: grid;

    grid-template-columns:
        1.4fr 1fr 1fr .6fr .7fr;

    gap: 8px;

    align-items: center;

    min-height: 34px;

    padding: 0 12px;

    box-sizing: border-box;
}


.vlt-log-header {
    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.36);

    font-size: 8px;
}


.vlt-log-empty {
    min-height: 100px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.25);

    font-size: 9px;
}


@media (max-width: 1100px) {

    .vlt-workspace {
        grid-template-columns:
            1fr;
    }

    .vlt-selector-scroll {
        max-height: 300px;
    }

    .vlt-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   OVERVIEW - PROCESSED WINDOW PERIOD
========================================================= */

.vd-header-right {
    display: flex !important;
    align-items: center !important;
}

.vd-processing-head {
    align-items: flex-end !important;
    gap: 20px !important;
}

.vd-processing-title strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-size: 13px;
    font-weight: 400;
}

.vd-processing-period {
    display: flex;

    align-items: flex-end;

    gap: 8px;
}

.vd-processing-period label {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}

.vd-processing-period #vdPeriod,
.vd-processing-period input {
    height: 34px;

    font-size: 12px;
}

.vd-processed-period-label {
    min-width: 98px;

    padding-bottom: 8px;

    color:
        rgba(255,255,255,.50);

    font-size: 10px;
}


/* VESSEL DETAIL - FORCE HIDE WINDY CONTROL */

.vd-force-hidden-wind-control {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
   VESSEL DETAIL - HIDE WINDY CONTROL DOCK FINAL
========================================================= */

body.vessel-detail-active #robustWindyControlDock,
body.vessel-detail-active #mobile-ovr-select,
body.vessel-detail-active .robust-native-windy-control {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   VESSEL DETAIL - HIDE WINDY CONTROL DOCK FINAL
========================================================= */

body.vessel-detail-active #robustWindyControlDock,
body.vessel-detail-active #mobile-ovr-select,
body.vessel-detail-active .robust-native-windy-control {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   LOG & TREND V2
   FULL WIDTH LOG + SEPARATE TREND
========================================================= */

.vlt-log-section,
.vlt-trend-section {
    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);

    overflow: visible;
}

.vlt-trend-section {
    margin-top: 14px;
}


/* LOG TOOLBAR */

.vlt-log-toolbar,
.vlt-trend-toolbar {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;

    padding: 12px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vlt-log-title small,
.vlt-trend-toolbar small {
    display: block;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vlt-log-title strong,
.vlt-trend-toolbar > div > strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 14px;
    font-weight: 400;
}


.vlt-log-controls,
.vlt-trend-controls {
    display: flex;

    align-items: flex-end;

    gap: 7px;
}


.vlt-log-controls label,
.vlt-trend-controls label {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


#vltLogPeriod,
#vltRowsPerPage,
#vltTrendPeriod,
#vltAggregation,
#vltTrendField {
    height: 34px;

    padding: 0 8px;

    border:
        1px solid rgba(57,255,136,.17);

    border-radius: 4px;

    background:
        #071713;

    color: #fff;

    font-size: 11px;
}


#vltFieldMenuButton,
#vltLogApply,
#vltLogExport,
#vltTrendApply,
#vltTrendPdf {
    height: 34px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color: #39ff88;

    font-size: 10px;

    cursor: pointer;
}


/* FIELD POPUP */

.vlt-field-menu-wrap {
    position: relative;
}


.vlt-field-menu {
    position: absolute;

    top: 54px;
    right: 0;

    z-index: 100;

    width: 310px;

    display: none;

    border:
        1px solid rgba(57,255,136,.20);

    border-radius: 5px;

    background:
        rgba(4,24,20,.98);

    box-shadow:
        0 12px 28px rgba(0,0,0,.45);
}


.vlt-field-menu.open {
    display: block;
}


.vlt-field-menu-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 9px 10px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vlt-field-menu-head strong {
    color: #39ff88;

    font-size: 9px;
    font-weight: 400;
}


#vltFieldClear {
    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.42);

    font-size: 8px;

    cursor: pointer;
}


.vlt-field-menu-list {
    max-height: 420px;

    overflow-y: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 4px 8px;

    padding: 10px;
}


.vlt-field-menu-list label {
    display: flex;

    align-items: center;

    gap: 5px;

    min-height: 23px;

    color:
        rgba(255,255,255,.70);

    font-size: 9px;

    cursor: pointer;
}


.vlt-column-field {
    accent-color: #39ff88;
}


/* FULL WIDTH LOG TABLE */

.vlt-table-wrap {
    width: 100%;

    overflow-x: auto;
}


.vlt-table {
    width: 100%;

    min-width: 850px;

    border-collapse: collapse;

    table-layout: auto;
}


.vlt-table th {
    height: 36px;

    padding: 0 10px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.46);

    font-size: 9px;
    font-weight: 400;

    text-align: left;

    white-space: nowrap;
}


.vlt-table td {
    height: 34px;

    padding: 0 10px;

    border-bottom:
        1px solid rgba(255,255,255,.045);

    color:
        rgba(255,255,255,.78);

    font-size: 11px;

    white-space: nowrap;
}


.vlt-table tbody tr:hover {
    background:
        rgba(57,255,136,.025);
}


/* PAGINATION */

.vlt-pagination {
    min-height: 44px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 12px;
}


.vlt-pagination span {
    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vlt-page-control {
    display: flex;

    align-items: center;

    gap: 9px;
}


.vlt-page-control button {
    height: 27px;

    padding: 0 9px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 3px;

    background: transparent;

    color:
        rgba(255,255,255,.55);

    font-size: 8px;
}


.vlt-page-control button:disabled {
    opacity: .28;
}


/* TREND */

.vlt-chart-panel {
    margin: 12px;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 5px;

    overflow: hidden;
}


.vlt-summary {
    margin:
        0 12px 12px;
}


@media (max-width: 1150px) {

    .vlt-log-toolbar,
    .vlt-trend-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .vlt-log-controls,
    .vlt-trend-controls {
        flex-wrap: wrap;
    }

}


/* =========================================================
   LOG & TREND V3
========================================================= */

/* grouped expanded fields */

.vlt-field-menu-list {
    display: block !important;
}

.vlt-field-group {
    padding: 7px 9px;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}

.vlt-field-group-title {
    margin-bottom: 5px;

    color: #39ff88;

    font-size: 9px;
}

.vlt-field-group label {
    display: flex;

    align-items: center;

    gap: 6px;

    min-height: 24px;

    color:
        rgba(255,255,255,.70);

    font-size: 10px;
}


/* pagination rows selector */

.vlt-footer-rows {
    display: inline-flex !important;

    align-items: center;

    gap: 6px;

    margin-left: 7px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}

#vltRowsPerPage {
    height: 28px;

    padding: 0 7px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 3px;

    background:
        #071713;

    color: #fff;

    font-size: 9px;
}


/* tank interval direction */

.vlt-delta-fill,
.vlt-delta-drain,
.vlt-delta-stable {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}

.vlt-delta-fill::before {
    content: "↑";

    color: #39ff88;

    font-size: 14px;
}

.vlt-delta-drain::before {
    content: "↓";

    color: #ffb000;

    font-size: 14px;
}

.vlt-delta-stable::before {
    content: "—";

    color:
        rgba(255,255,255,.38);
}

.vlt-delta-fill small {
    color: #39ff88;
}

.vlt-delta-drain small {
    color: #ffb000;
}

.vlt-delta-stable small {
    color:
        rgba(255,255,255,.38);
}


/* TREND: LEFT FIELD SELECTOR */

.vlt-trend-workspace {
    display: grid;

    grid-template-columns:
        245px minmax(0,1fr);

    gap: 12px;

    padding: 12px;
}


.vlt-trend-selector {
    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 5px;

    background:
        rgba(0,0,0,.10);

    overflow: hidden;
}


.vlt-trend-selector-head {
    min-height: 38px;

    display: flex;

    align-items: center;

    padding: 0 11px;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    color: #39ff88;

    font-size: 10px;
}


.vlt-trend-selector-scroll {
    max-height: 590px;

    overflow-y: auto;

    padding-bottom: 8px;
}


.vlt-trend-group {
    padding: 8px 10px;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}


.vlt-trend-group-title {
    margin-bottom: 5px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


.vlt-trend-group label {
    display: flex;

    align-items: center;

    gap: 6px;

    min-height: 23px;

    color:
        rgba(255,255,255,.68);

    font-size: 9px;

    cursor: pointer;
}


.vlt-trend-field {
    accent-color: #39ff88;
}


.vlt-trend-main {
    min-width: 0;
}


.vlt-trend-main .vlt-chart-panel {
    margin: 0 !important;
}


.vlt-trend-main .vlt-summary {
    margin:
        9px 0 0 !important;
}


@media (max-width: 1100px) {

    .vlt-trend-workspace {
        grid-template-columns:
            1fr;
    }

    .vlt-trend-selector-scroll {
        max-height: 280px;
    }

}


/* =========================================================
   VESSEL DETAIL - EXPORT CENTER
========================================================= */

.vd-export-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(0,0,0,.58);

    backdrop-filter:
        blur(4px);
}


.vd-export-modal.open {
    display: flex;
}


.vd-export-box {
    width: 430px;

    padding: 18px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.24);

    border-radius: 7px;

    background:
        rgba(4,24,20,.98);

    box-shadow:
        0 18px 55px rgba(0,0,0,.55);

    color: #fff;

    font-size: 12px;
}


.vd-export-title {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 11px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.vd-export-title small,
.vd-export-vessel small,
.vd-export-row small,
.vd-export-format > small {
    display: block;

    color:
        rgba(255,255,255,.40);

    font-size: 9px;
}


.vd-export-title strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 15px;
    font-weight: 400;
}


#vdExportClose {
    border: 0;

    background: transparent;

    color: #39ff88;

    font-size: 21px;

    cursor: pointer;
}


.vd-export-vessel {
    margin-top: 14px;
}


.vd-export-vessel strong {
    display: block;

    margin-top: 4px;

    font-size: 14px;
    font-weight: 400;
}


.vd-export-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 14px;
}


.vd-export-row strong {
    display: block;

    margin-top: 4px;

    font-size: 12px;
    font-weight: 400;
}


.vd-export-format {
    margin-top: 16px;

    padding-top: 12px;

    border-top:
        1px solid rgba(255,255,255,.06);
}


.vd-export-format-options {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;

    margin-top: 8px;
}


.vd-export-format-options label {
    min-height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 4px;

    background:
        rgba(255,255,255,.02);

    cursor: pointer;
}


.vd-export-format-options input {
    accent-color: #39ff88;
}


.vd-export-note {
    margin-top: 12px;

    padding: 9px 10px;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 4px;

    background:
        rgba(0,0,0,.10);

    color:
        rgba(255,255,255,.48);

    font-size: 10px;

    line-height: 1.5;
}


.vd-export-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 17px;
}


.vd-export-actions button {
    min-width: 95px;
    height: 34px;

    border-radius: 4px;

    font-size: 11px;

    cursor: pointer;
}


#vdExportCancel {
    border:
        1px solid rgba(255,255,255,.12);

    background: transparent;

    color:
        rgba(255,255,255,.65);
}


#vdExportConfirm {
    border:
        1px solid rgba(57,255,136,.48);

    background:
        rgba(57,255,136,.08);

    color: #39ff88;
}


/* =========================================================
   OVERVIEW SECTION WINDOW PERIOD / EXPORT
========================================================= */

.vd-section-controls {
    display: flex;

    align-items: flex-end;

    gap: 7px;

    margin-left: auto;
    margin-right: 18px;
}


.vd-section-controls label {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


#vdPingPeriod {
    height: 32px;

    padding: 0 8px;

    border:
        1px solid rgba(57,255,136,.17);

    border-radius: 4px;

    background:
        #071713;

    color: #fff;

    font-size: 11px;
}


#vdPingExport,
#vdProcessedExport {
    height: 32px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.40);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color: #39ff88;

    font-size: 10px;

    cursor: pointer;
}


.vd-processing-period {
    flex-wrap: wrap;
}


#vdProcessedExport {
    margin-bottom: 1px;
}


@media (max-width: 1250px) {

    .vd-ping-head {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .vd-section-controls {
        margin-left: 0;
    }

}


/* =========================================================
   VESSEL DETAIL - MATRIX V1
========================================================= */

.vmx-section {
    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);

    overflow: visible;
}


.vmx-toolbar {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    padding: 12px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vmx-toolbar small {
    display: block;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vmx-toolbar > div > strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 14px;
    font-weight: 400;
}


.vmx-controls {
    display: flex;

    align-items: flex-end;

    gap: 7px;
}


.vmx-controls label {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


#vmxPeriod,
#vmxRows {
    height: 34px;

    padding: 0 8px;

    border:
        1px solid rgba(57,255,136,.17);

    border-radius: 4px;

    background: #071713;

    color: #fff;

    font-size: 11px;
}


#vmxFieldButton,
#vmxApply,
#vmxExport {
    height: 34px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color: #39ff88;

    font-size: 10px;

    cursor: pointer;
}


.vmx-field-wrap {
    position: relative;
}


.vmx-field-menu {
    position: absolute;

    top: 54px;
    right: 0;

    z-index: 120;

    width: 320px;

    display: none;

    border:
        1px solid rgba(57,255,136,.22);

    border-radius: 5px;

    background:
        rgba(4,24,20,.99);

    box-shadow:
        0 12px 30px rgba(0,0,0,.50);
}


.vmx-field-menu.open {
    display: block;
}


.vmx-field-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 9px 10px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vmx-field-head strong {
    color: #39ff88;

    font-size: 9px;
    font-weight: 400;
}


#vmxClear {
    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.42);

    font-size: 8px;

    cursor: pointer;
}


.vmx-field-list {
    max-height: 460px;

    overflow-y: auto;
}


.vmx-field-group {
    padding: 8px 10px;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}


.vmx-field-group-title {
    margin-bottom: 5px;

    color: #39ff88;

    font-size: 9px;
}


.vmx-field-group label {
    display: flex;

    align-items: center;

    gap: 6px;

    min-height: 23px;

    color:
        rgba(255,255,255,.70);

    font-size: 9px;

    cursor: pointer;
}


.vmx-field {
    accent-color: #39ff88;
}


/* MATRIX TABLE */

.vmx-table-wrap {
    width: 100%;

    overflow-x: auto;
}


.vmx-table {
    width: max-content;

    min-width: 100%;

    border-collapse: separate;
    border-spacing: 0;
}


.vmx-table th,
.vmx-table td {
    min-width: 105px;

    height: 34px;

    padding: 0 9px;

    box-sizing: border-box;

    border-right:
        1px solid rgba(255,255,255,.035);

    border-bottom:
        1px solid rgba(255,255,255,.045);

    white-space: nowrap;

    text-align: left;
}


.vmx-table th {
    position: sticky;

    top: 0;

    z-index: 6;

    background:
        #0a1c18;

    color:
        rgba(255,255,255,.48);

    font-size: 9px;
    font-weight: 400;
}


.vmx-table td {
    background:
        #071713;

    color:
        rgba(255,255,255,.76);

    font-size: 10px;
}


/* FIXED GPS COLUMNS */

.vmx-fixed {
    position: sticky !important;

    z-index: 5;

    background:
        #091a16 !important;
}


.vmx-table th.vmx-fixed {
    z-index: 8;
}


.vmx-fixed-1 {
    left: 0;
    min-width: 145px !important;
}


.vmx-fixed-2 {
    left: 145px;
    min-width: 105px !important;
}


.vmx-fixed-3 {
    left: 250px;
    min-width: 105px !important;
}


.vmx-fixed-4 {
    left: 355px;
    min-width: 85px !important;
}


.vmx-fixed-5 {
    left: 440px;
    min-width: 85px !important;

    box-shadow:
        7px 0 10px rgba(0,0,0,.15);
}


/* FOOTER */

.vmx-footer {
    min-height: 44px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 12px;
}


.vmx-footer span,
.vmx-pagination label {
    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vmx-pagination {
    display: flex;

    align-items: center;

    gap: 9px;
}


.vmx-pagination button {
    height: 27px;

    padding: 0 9px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 3px;

    background: transparent;

    color:
        rgba(255,255,255,.55);

    font-size: 8px;
}


.vmx-pagination button:disabled {
    opacity: .28;
}


.vmx-pagination label {
    display: flex;

    align-items: center;

    gap: 6px;
}


.vmx-pagination #vmxRows {
    height: 28px;

    font-size: 9px;
}


@media (max-width: 1100px) {

    .vmx-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }

    .vmx-controls {
        flex-wrap: wrap;
    }

}


/* =========================================================
   MATRIX V2 - ACTIVITY / SENSOR HEATMAP
========================================================= */

.vmx-activity-section,
.vmx-sensor-section {
    padding: 0;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);

    overflow: hidden;
}

.vmx-sensor-section {
    margin-top: 14px;
}


.vmx-section-toolbar {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;

    padding: 12px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vmx-section-toolbar small {
    display: block;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vmx-section-toolbar strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 14px;
    font-weight: 400;
}


.vmx-section-toolbar span {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vmx-section-controls {
    display: flex;

    align-items: flex-end;

    gap: 7px;
}


.vmx-section-controls label {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


#vmxActivityPeriod,
#vmxSensorType,
#vmxSensorSelect,
#vmxSensorPeriod {
    height: 34px;

    padding: 0 8px;

    border:
        1px solid rgba(57,255,136,.17);

    border-radius: 4px;

    background:
        #071713;

    color: #fff;

    font-size: 10px;
}


#vmxActivityExport,
#vmxSensorExport {
    height: 34px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color: #39ff88;

    font-size: 10px;

    cursor: pointer;
}


/* LEGEND */

.vmx-legend {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    padding: 9px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.045);

    color:
        rgba(255,255,255,.62);

    font-size: 9px;
}


.vmx-legend span {
    display: flex;

    align-items: center;

    gap: 5px;
}


.vmx-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;
}


.vmx-dot-operation {
    background: #24b878;
}

.vmx-dot-docking {
    background: #2868c7;
}

.vmx-dot-damage {
    background: #d94a4a;
}

.vmx-dot-weather {
    background: #dda91e;
}

.vmx-dot-unreported {
    background: #7b8790;
}


.vmx-dot-valid {
    background: #22a96c;
}

.vmx-dot-gap {
    background: #d9a91a;
}

.vmx-dot-invalid {
    background: #dc4c49;
}

.vmx-dot-disabled {
    background: #79838b;
}


/* HEATMAP */

.vmx-heatmap {
    overflow-x: auto;

    padding: 10px 12px 12px;
}


.vmx-heat-row {
    display: grid;

    grid-template-columns:
        92px repeat(24,minmax(29px,1fr));

    gap: 2px;

    min-width: 930px;

    margin-bottom: 2px;
}


.vmx-heat-head {
    margin-bottom: 5px;
}


.vmx-heat-label,
.vmx-hour-label {
    min-height: 23px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.50);

    font-size: 8px;
}


.vmx-heat-label {
    justify-content: flex-start;

    padding-left: 5px;
}


.vmx-heat-cell {
    min-width: 0;
    min-height: 23px;

    padding: 0;

    border:
        1px solid rgba(0,0,0,.28);

    border-radius: 2px;

    cursor: pointer;

    transition:
        transform .08s ease,
        filter .08s ease,
        box-shadow .08s ease;
}


.vmx-heat-cell:hover {
    position: relative;

    z-index: 3;

    transform:
        scale(1.12);

    filter:
        brightness(1.30);

    box-shadow:
        0 0 8px
        rgba(57,255,136,.20);
}


/* ACTIVITY STATUS */

.vmx-state-operation {
    background:
        rgba(36,184,120,.90);
}

.vmx-state-docking {
    background:
        rgba(40,104,199,.92);
}

.vmx-state-damage {
    background:
        rgba(217,74,74,.92);
}

.vmx-state-weather {
    background:
        rgba(221,169,30,.92);
}

.vmx-state-unreported {
    background:
        rgba(123,135,144,.85);
}


/* SENSOR STATE */

.vmx-sensor-valid {
    background:
        rgba(34,169,108,.90);
}

.vmx-sensor-gap {
    background:
        rgba(217,169,26,.92);
}

.vmx-sensor-invalid {
    background:
        rgba(220,76,73,.92);
}

.vmx-sensor-disabled {
    background:
        rgba(121,131,139,.75);
}


/* ACTIVITY INFO */

.vmx-info-panel {
    margin:
        0 12px 12px;

    padding:
        9px 11px;

    display: flex;

    align-items: center;

    gap: 12px;

    border:
        1px solid rgba(255,255,255,.05);

    border-radius: 4px;

    background:
        rgba(0,0,0,.10);
}


.vmx-info-panel small {
    color:
        rgba(255,255,255,.35);

    font-size: 8px;
}


.vmx-info-panel strong {
    color: #39ff88;

    font-size: 10px;
    font-weight: 400;
}


.vmx-info-panel span {
    color:
        rgba(255,255,255,.52);

    font-size: 9px;
}


/* SENSOR MATRIX LAYOUT */

.vmx-sensor-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr) 220px;

    gap: 10px;

    padding-right: 12px;
}


.vmx-sensor-info {
    margin:
        10px 0 12px;

    padding: 12px;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 5px;

    background:
        rgba(0,0,0,.12);
}


.vmx-sensor-info > small {
    display: block;

    color:
        rgba(255,255,255,.34);

    font-size: 8px;
}


.vmx-sensor-info > strong {
    display: block;

    margin-top: 4px;

    color: #39ff88;

    font-size: 11px;
    font-weight: 400;
}


.vmx-sensor-info-grid {
    display: grid;

    gap: 10px;

    margin-top: 14px;
}


.vmx-sensor-info-grid span {
    color:
        rgba(255,255,255,.38);

    font-size: 8px;
}


.vmx-sensor-info-grid strong {
    display: block;

    margin-top: 2px;

    color:
        rgba(255,255,255,.82);

    font-size: 11px;
    font-weight: 400;
}


@media (max-width: 1100px) {

    .vmx-section-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }

    .vmx-section-controls {
        flex-wrap: wrap;
    }

    .vmx-sensor-layout {
        grid-template-columns:
            1fr;

        padding-right: 0;
    }

    .vmx-sensor-info {
        margin:
            0 12px 12px;
    }

}


/* =========================================================
   MATRIX ACTIVITY - MAP TRACKING STATUS ICONS FINAL
========================================================= */

.vmx-heat-cell[data-vmx-activity-state] {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 4px !important;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    border:
        1px solid rgba(255,255,255,.045);
}


/* OPERATION */

.vmx-heat-cell[data-vmx-activity-state="operation"] {
    color: #ffb000 !important;

    background:
        rgba(255,176,0,.10) !important;
}

.vmx-heat-cell[data-vmx-activity-state="operation"]::after {
    content: "→";
}


/* DOCKING */

.vmx-heat-cell[data-vmx-activity-state="docking"] {
    color: #b95cff !important;

    background:
        rgba(185,92,255,.10) !important;
}

.vmx-heat-cell[data-vmx-activity-state="docking"]::after {
    content: "\2693";

    font-size: 12px;
}


/* WEATHER */

.vmx-heat-cell[data-vmx-activity-state="weather"] {
    color: #9aa4ad !important;

    background:
        rgba(154,164,173,.10) !important;
}

.vmx-heat-cell[data-vmx-activity-state="weather"]::after {
    content: "\2601";
}


/* DAMAGE */

.vmx-heat-cell[data-vmx-activity-state="damage"] {
    color: #ff4160 !important;

    background:
        rgba(255,65,96,.10) !important;
}

.vmx-heat-cell[data-vmx-activity-state="damage"]::after {
    content: "\26A0";

    font-size: 12px;
}


/* UNREPORTED */

.vmx-heat-cell[data-vmx-activity-state="unreported"] {
    color: #39ff88 !important;

    background:
        rgba(57,255,136,.08) !important;
}

.vmx-heat-cell[data-vmx-activity-state="unreported"]::after {
    content: "!";

    width: 15px;
    height: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid currentColor;

    border-radius: 50%;

    font-size: 9px;
}


.vmx-heat-cell[data-vmx-activity-state]:hover {
    position: relative;

    z-index: 3;

    transform: scale(1.10);

    border-color:
        currentColor;

    filter: brightness(1.25);

    box-shadow:
        0 0 8px
        currentColor;
}


/* LEGEND */

.vmx-status-legend b {
    width: 19px;
    height: 19px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 4px;

    font-size: 12px;
}


.vmx-status-legend.operation {
    color: #ffb000;
}

.vmx-status-legend.docking {
    color: #b95cff;
}

.vmx-status-legend.weather {
    color: #9aa4ad;
}

.vmx-status-legend.damage {
    color: #ff4160;
}

.vmx-status-legend.unreported {
    color: #39ff88;
}


/* =========================================================
   MATRIX ACTIVITY STATUS V2
   Moving / Idling + Map Tracking Status
========================================================= */

.vmx-heat-cell[data-vmx-activity-state] {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 4px !important;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    border:
        1px solid rgba(255,255,255,.05);

    background:
        rgba(255,255,255,.018) !important;
}


/* MOVING / RUNNING */

.vmx-heat-cell[data-vmx-activity-state="moving"] {
    color: #42a5ff !important;

    background:
        rgba(66,165,255,.09) !important;
}

.vmx-heat-cell[data-vmx-activity-state="moving"]::after {
    content: "\2192";

    text-shadow:
        0 0 7px rgba(66,165,255,.65);
}


/* IDLING */

.vmx-heat-cell[data-vmx-activity-state="idling"] {
    color: #ffcc20 !important;

    background:
        rgba(255,204,32,.09) !important;
}

.vmx-heat-cell[data-vmx-activity-state="idling"]::after {
    content: "\2212";

    font-size: 17px;

    text-shadow:
        0 0 7px rgba(255,204,32,.55);
}


/* DOCKING */

.vmx-heat-cell[data-vmx-activity-state="docking"] {
    color: #b95cff !important;

    background:
        rgba(185,92,255,.09) !important;
}

.vmx-heat-cell[data-vmx-activity-state="docking"]::after {
    content: "\2693";

    font-size: 12px;
}


/* WEATHER */

.vmx-heat-cell[data-vmx-activity-state="weather"] {
    color: #9aa4ad !important;

    background:
        rgba(154,164,173,.09) !important;
}

.vmx-heat-cell[data-vmx-activity-state="weather"]::after {
    content: "\2601";
}


/* DAMAGE */

.vmx-heat-cell[data-vmx-activity-state="damage"] {
    color: #ff4160 !important;

    background:
        rgba(255,65,96,.09) !important;
}

.vmx-heat-cell[data-vmx-activity-state="damage"]::after {
    content: "\26A0";

    font-size: 12px;
}


/* UNREPORTED */

.vmx-heat-cell[data-vmx-activity-state="unreported"] {
    color: #39ff88 !important;

    background:
        rgba(57,255,136,.075) !important;
}

.vmx-heat-cell[data-vmx-activity-state="unreported"]::after {
    content: "!";

    width: 15px;
    height: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid currentColor;

    border-radius: 50%;

    font-size: 9px;
}


/* HOVER */

.vmx-heat-cell[data-vmx-activity-state]:hover {
    z-index: 3;

    transform: scale(1.10);

    border-color: currentColor;

    filter: brightness(1.25);

    box-shadow:
        0 0 8px currentColor;
}


/* LEGEND */

.vmx-status-legend b {
    width: 20px;
    height: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 4px;

    font-size: 12px;
    font-weight: 600;
}


.vmx-status-legend.moving {
    color: #42a5ff;
}

.vmx-status-legend.idling {
    color: #ffcc20;
}

.vmx-status-legend.docking {
    color: #b95cff;
}

.vmx-status-legend.weather {
    color: #9aa4ad;
}

.vmx-status-legend.damage {
    color: #ff4160;
}

.vmx-status-legend.unreported {
    color: #39ff88;
}


/* =========================================================
   SENSOR MATRIX - FLOW / LEVEL BEHAVIOR
========================================================= */

.vmx-sensor-cell {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.018) !important;
    border: 1px solid rgba(255,255,255,.045);
    font-size: 15px;
    font-weight: 600;
}


/* FLOWMETER IN */

.vmx-sensor-cell.vmx-behavior-in {
    color: #42a5ff !important;
    background: rgba(66,165,255,.08) !important;
}

.vmx-sensor-cell.vmx-behavior-in::after {
    content: "→";
}


/* FLOWMETER OUT */

.vmx-sensor-cell.vmx-behavior-out {
    color: #ff4b55 !important;
    background: rgba(255,75,85,.08) !important;
}

.vmx-sensor-cell.vmx-behavior-out::after {
    content: "←";
}


/* NO FLOW */

.vmx-sensor-cell.vmx-behavior-off {
    color: #89949d !important;
    background: rgba(137,148,157,.055) !important;
}

.vmx-sensor-cell.vmx-behavior-off::after {
    content: "⊖";
}


/* FLS FILL */

.vmx-sensor-cell.vmx-behavior-fill {
    color: #39ff88 !important;
    background: rgba(57,255,136,.08) !important;
}

.vmx-sensor-cell.vmx-behavior-fill::after {
    content: "↑";
}


/* FLS DRAIN */

.vmx-sensor-cell.vmx-behavior-drain {
    color: #ff8a3d !important;
    background: rgba(255,138,61,.08) !important;
}

.vmx-sensor-cell.vmx-behavior-drain::after {
    content: "↓";
}


/* FLS STABLE */

.vmx-sensor-cell.vmx-behavior-stable {
    color: #ffcc20 !important;
    background: rgba(255,204,32,.08) !important;
}

.vmx-sensor-cell.vmx-behavior-stable::after {
    content: "→";
}


/* validity indicator */

.vmx-sensor-cell::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.vmx-sensor-cell.vmx-sensor-valid::before {
    background: #39ff88;
}

.vmx-sensor-cell.vmx-sensor-gap::before {
    background: #ffcc20;
}

.vmx-sensor-cell.vmx-sensor-invalid::before {
    background: #ff4160;
}

.vmx-sensor-cell.vmx-sensor-disabled::before {
    background: #89949d;
}


/* =========================================================
   SENSOR MATRIX - NO DATA / DISABLED VISIBILITY FIX
========================================================= */


/* NO DATA
   Sensor enabled/configured, but no value at timestamp.
*/

.vmx-sensor-cell.vmx-state-nodata {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.035) !important;

    border:
        1px dashed rgba(255,255,255,.24) !important;

    opacity: 1 !important;
}

.vmx-sensor-cell.vmx-state-nodata::after {
    content: "○" !important;

    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 500 !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.35);
}


/* DISABLED
   Sensor not enabled / not configured for vessel.
*/

.vmx-sensor-cell.vmx-state-disabled {
    color: #d4d9dd !important;

    background:
        rgba(255,255,255,.018) !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    opacity: 1 !important;
}

.vmx-sensor-cell.vmx-state-disabled::after {
    content: "⊘" !important;

    color: #d4d9dd !important;

    font-size: 15px !important;
    font-weight: 500 !important;

    text-shadow:
        0 0 4px rgba(255,255,255,.18);
}


/* hover remains visible */

.vmx-sensor-cell.vmx-state-nodata:hover,
.vmx-sensor-cell.vmx-state-disabled:hover {
    border-color:
        rgba(255,255,255,.55) !important;

    filter:
        brightness(1.20);

    box-shadow:
        0 0 7px
        rgba(255,255,255,.18);
}


/* legend consistency */

.vmx-behavior-legend.nodata,
.vmx-behavior-legend.nodata b {
    color: #ffffff !important;
}

.vmx-behavior-legend.disabled,
.vmx-behavior-legend.disabled b {
    color: #d4d9dd !important;
}


/* =========================================================
   CERTIFICATE MANAGEMENT V1
========================================================= */

.vcm-page {
    font-size: 12px;
}


.vcm-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    padding: 12px 14px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);
}


.vcm-toolbar small,
.vcm-workflow-title small,
.vcm-cert-head small {
    display: block;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.vcm-toolbar strong,
.vcm-workflow-title strong,
.vcm-cert-head > div > strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 14px;
    font-weight: 400;
}


.vcm-toolbar-controls {
    display: flex;

    align-items: flex-end;

    gap: 7px;
}


.vcm-toolbar-controls label,
.vcm-cert-form label > span {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.40);

    font-size: 8px;
}


#vcmVessel,
.vcm-cert-form input,
.vcm-cert-form select {
    height: 34px;

    padding: 0 8px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.16);

    border-radius: 4px;

    background:
        #071713;

    color: #fff;

    font-size: 11px;
}


#vcmAddCertificate,
#vcmExport,
#vcmAddIssue {
    height: 34px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color: #39ff88;

    font-size: 10px;

    cursor: pointer;
}


/* SUMMARY */

.vcm-summary {
    display: grid;

    grid-template-columns:
        repeat(6,1fr);

    gap: 8px;

    margin-top: 10px;
}


.vcm-summary > div {
    min-height: 61px;

    padding: 9px 11px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 5px;

    background:
        rgba(255,255,255,.018);
}


.vcm-summary small {
    color:
        rgba(255,255,255,.36);

    font-size: 8px;
}


.vcm-summary strong {
    display: block;

    margin-top: 5px;

    font-size: 18px;
    font-weight: 400;
}


/* CERTIFICATE */

.vcm-certificate {
    margin-top: 10px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);

    overflow: hidden;
}


.vcm-cert-head {
    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vcm-cert-status,
.vcm-node-status {
    display: inline-flex;

    align-items: center;

    min-height: 22px;

    padding: 0 8px;

    border:
        1px solid currentColor;

    border-radius: 11px;

    font-size: 9px;
}


.conformity {
    color: #39ff88 !important;
}


.non-conformity {
    color: #ff4160 !important;
}


.on-progress {
    color: #42a5ff !important;
}


.pending {
    color: #ffcc20 !important;
}


/* HEADER FORM */

.vcm-cert-form {
    display: grid;

    grid-template-columns:
        1.5fr 1.2fr repeat(4,1fr);

    gap: 8px;

    padding: 12px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.055);
}


.vcm-cert-form label {
    min-width: 0;
}


.vcm-cert-form input,
.vcm-cert-form select {
    width: 100%;
}


.vcm-attachment-field input {
    padding-top: 5px;
}


.vcm-attachment-field small {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.28);

    font-size: 8px;
}


/* WORKFLOW */

.vcm-workflow-title {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 10px 14px;
}


.vcm-node {
    margin:
        0 12px 9px;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius: 5px;

    background:
        rgba(0,0,0,.10);
}


.vcm-node-subissue {
    margin-left: 22px;

    border-left:
        2px solid rgba(66,165,255,.34);
}


.vcm-node-subsubissue {
    margin-left: 22px;

    border-left:
        2px solid rgba(185,92,255,.34);
}


.vcm-node-head {
    min-height: 47px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0 9px;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}


.vcm-node-toggle {
    border: 0;

    background: transparent;

    color: #39ff88;

    cursor: pointer;
}


.vcm-node-title {
    flex: 1;
}


.vcm-node-title small {
    display: block;

    color:
        rgba(255,255,255,.35);

    font-size: 7px;
}


.vcm-node-name {
    width: 100%;

    border: 0;
    border-bottom:
        1px solid rgba(255,255,255,.08);

    background: transparent;

    color: #fff;

    font-size: 11px;
}


.vcm-node-actions {
    display: flex;

    gap: 4px;
}


.vcm-node-actions button,
.vcm-cert-actions button {
    height: 28px;

    padding: 0 8px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 3px;

    background: transparent;

    color:
        rgba(255,255,255,.62);

    font-size: 8px;

    cursor: pointer;
}


.vcm-node-body {
    padding: 8px;
}


.vcm-node.collapsed >
.vcm-node-body {
    display: none;
}


/* ITEM TABLE */

.vcm-item-row {
    display: grid;

    grid-template-columns:
        1.1fr 2fr 170px 30px;

    gap: 6px;

    align-items: center;

    min-height: 37px;

    padding: 3px 0;

    border-bottom:
        1px solid rgba(255,255,255,.035);
}


.vcm-item-header {
    color:
        rgba(255,255,255,.35);

    font-size: 8px;
}


.vcm-item-row input,
.vcm-item-row select {
    height: 30px;

    padding: 0 7px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 3px;

    background:
        rgba(255,255,255,.018);

    color: #fff;

    font-size: 10px;
}


.vcm-item-remove {
    width: 28px;
    height: 28px;

    border:
        1px solid rgba(255,65,96,.20);

    border-radius: 3px;

    background:
        rgba(255,65,96,.04);

    color: #ff4160;

    cursor: pointer;
}


/* FOOTER */

.vcm-cert-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 14px;

    border-top:
        1px solid rgba(255,255,255,.06);
}


.vcm-progress {
    min-width: 360px;
}


.vcm-progress > span {
    color:
        rgba(255,255,255,.36);

    font-size: 8px;
}


.vcm-progress-bar {
    height: 7px;

    margin-top: 5px;

    overflow: hidden;

    border-radius: 4px;

    background:
        rgba(255,255,255,.06);
}


#vcmProgressFill {
    width: 0;
    height: 100%;

    background:
        #39ff88;

    transition:
        width .2s ease;
}


#vcmProgressText {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.55);

    font-size: 9px;
    font-weight: 400;
}


.vcm-cert-actions {
    display: flex;

    gap: 6px;
}


#vcmUpdateCertificate {
    color: #39ff88;

    border-color:
        rgba(57,255,136,.30);
}


@media (max-width: 1250px) {

    .vcm-cert-form {
        grid-template-columns:
            repeat(3,1fr);
    }

    .vcm-summary {
        grid-template-columns:
            repeat(3,1fr);
    }

}


/* =========================================================
   VESSEL DETAIL - CERTIFICATE RECORDS V1
========================================================= */

.vcr-page {
    font-size: 12px;
}


.vcr-toolbar {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;

    padding: 12px 14px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);
}


.vcr-toolbar small {
    display: block;

    color:
        rgba(255,255,255,.36);

    font-size: 9px;
}


.vcr-toolbar strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 15px;

    font-weight: 400;
}


.vcr-toolbar > div > span {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.55);

    font-size: 10px;
}


.vcr-toolbar-actions {
    display: flex;

    gap: 7px;
}


#vcrAddCertificate,
#vcrExport {
    height: 34px;

    padding: 0 12px;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 4px;

    background:
        rgba(57,255,136,.06);

    color: #39ff88;

    font-size: 10px;

    cursor: pointer;
}


/* SUMMARY */

.vcr-summary {
    display: grid;

    grid-template-columns:
        repeat(5,1fr);

    gap: 8px;

    margin-top: 10px;
}


.vcr-summary > div {
    min-height: 58px;

    padding: 8px 10px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 5px;

    background:
        rgba(255,255,255,.018);
}


.vcr-summary small {
    color:
        rgba(255,255,255,.34);

    font-size: 8px;
}


.vcr-summary strong {
    display: block;

    margin-top: 5px;

    font-size: 17px;

    font-weight: 400;
}


/* REGISTER */

.vcr-register {
    margin-top: 10px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 6px;

    overflow: hidden;

    background:
        rgba(255,255,255,.015);
}


.vcr-register-head,
.vcr-cert-row {
    display: grid;

    grid-template-columns:
        34px
        minmax(250px,1.7fr)
        180px
        145px
        170px
        230px;

    gap: 8px;

    align-items: center;
}


.vcr-register-head {
    min-height: 38px;

    padding: 0 10px;

    background:
        rgba(255,255,255,.025);

    border-bottom:
        1px solid rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.40);

    font-size: 8px;
}


.vcr-cert-row {
    min-height: 58px;

    padding: 0 10px;

    border-bottom:
        1px solid rgba(255,255,255,.045);

    color:
        rgba(255,255,255,.72);

    font-size: 10px;
}


.vcr-cert-name strong {
    color: #fff;

    font-size: 11px;

    font-weight: 400;
}


.vcr-cert-toggle,
.vcr-component-toggle {
    border: 0;

    background: transparent;

    color: #39ff88;

    font-size: 15px;

    cursor: pointer;
}


.vcr-component-toggle:disabled {
    color:
        rgba(255,255,255,.24);

    cursor: default;
}


/* STAGE */

.vcr-stage {
    display: inline-flex;

    align-items: center;

    min-height: 21px;

    padding: 0 7px;

    border:
        1px solid currentColor;

    border-radius: 11px;

    font-size: 8px;
}


.vcr-stage.conformity {
    color: #39ff88;
}


.vcr-stage.non-conformity {
    color: #ff4160;
}


.vcr-stage.on-progress {
    color: #42a5ff;
}


.vcr-stage.pending {
    color: #ffcc20;
}


/* ACTION */

.vcr-cert-actions,
.vcr-component-action,
.vcr-item-actions {
    display: flex;

    gap: 4px;
}


.vcr-cert-actions button,
.vcr-component-action button,
.vcr-item-actions button {
    height: 27px;

    padding: 0 7px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 3px;

    background: transparent;

    color:
        rgba(255,255,255,.58);

    font-size: 8px;

    cursor: pointer;
}


.vcr-update-item {
    color: #39ff88 !important;

    border-color:
        rgba(57,255,136,.25) !important;
}


/* CERTIFICATE DETAIL */

.vcr-cert-body {
    display: none;

    padding: 10px;

    border-bottom:
        1px solid rgba(255,255,255,.055);

    background:
        rgba(0,0,0,.12);
}


.vcr-cert.open >
.vcr-cert-body {
    display: block;
}


.vcr-cert-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    padding: 7px 8px 11px;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}


.vcr-cert-meta span {
    color:
        rgba(255,255,255,.34);

    font-size: 8px;
}


.vcr-cert-meta strong {
    margin-left: 5px;

    color:
        rgba(255,255,255,.72);

    font-weight: 400;
}


.vcr-detail-head,
.vcr-component-row {
    display: grid;

    grid-template-columns:
        minmax(250px,1.2fr)
        minmax(300px,1.7fr)
        180px
        220px;

    gap: 8px;

    align-items: center;
}


.vcr-detail-head {
    min-height: 34px;

    padding-left: 34px;

    color:
        rgba(255,255,255,.34);

    font-size: 8px;
}


.vcr-component {
    margin-top: 5px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius: 4px;

    background:
        rgba(255,255,255,.012);
}


.vcr-component-row {
    position: relative;

    min-height: 48px;

    padding:
        0 8px 0 42px;
}


.vcr-component-row >
.vcr-component-toggle {
    position: absolute;

    left: 9px;

    top: 14px;
}


.vcr-component-name small,
.vcr-component-process small {
    display: block;

    color:
        rgba(255,255,255,.30);

    font-size: 7px;
}


.vcr-component-name strong,
.vcr-component-process strong {
    display: block;

    margin-top: 2px;

    font-size: 10px;

    font-weight: 400;
}


.vcr-component-level-2 {
    margin-left: 20px;

    border-left:
        2px solid rgba(66,165,255,.30);
}


.vcr-component-level-3 {
    margin-left: 20px;

    border-left:
        2px solid rgba(185,92,255,.30);
}


.vcr-component-body {
    display: none;

    padding: 8px;

    border-top:
        1px solid rgba(255,255,255,.04);
}


.vcr-component.open >
.vcr-component-body {
    display: block;
}


/* ITEM TABLE */

.vcr-item-row {
    display: grid;

    grid-template-columns:
        minmax(220px,1fr)
        minmax(300px,1.8fr)
        180px
        220px;

    gap: 8px;

    align-items: center;

    min-height: 36px;

    padding: 0 8px;

    border-bottom:
        1px solid rgba(255,255,255,.035);
}


.vcr-item-head {
    color:
        rgba(255,255,255,.32);

    font-size: 8px;
}


.vcr-item-row strong,
.vcr-item-row > span {
    font-size: 9px;

    font-weight: 400;
}


.vcr-child-list {
    margin-top: 7px;
}


.vcr-add-process-row {
    padding: 10px 0 0;
}


.vcr-add-process-row button {
    height: 29px;

    padding: 0 9px;

    border:
        1px solid rgba(57,255,136,.24);

    border-radius: 3px;

    background:
        rgba(57,255,136,.04);

    color: #39ff88;

    font-size: 8px;

    cursor: pointer;
}


.vcr-empty,
.vcr-empty-detail {
    padding: 18px;

    color:
        rgba(255,255,255,.27);

    text-align: center;
}


/* ADD MODAL */

.vcr-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(0,0,0,.60);

    backdrop-filter:
        blur(4px);
}


.vcr-modal.open {
    display: flex;
}


.vcr-modal-box {
    width: 540px;

    padding: 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.24);

    border-radius: 7px;

    background:
        rgba(4,24,20,.99);
}


.vcr-modal-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 10px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vcr-modal-head small {
    color:
        rgba(255,255,255,.36);

    font-size: 8px;
}


.vcr-modal-head strong {
    display: block;

    margin-top: 2px;

    color: #39ff88;

    font-size: 14px;

    font-weight: 400;
}


#vcrCloseModal {
    border: 0;

    background: transparent;

    color: #39ff88;

    font-size: 20px;

    cursor: pointer;
}


.vcr-form {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    margin-top: 12px;
}


.vcr-form label {
    color:
        rgba(255,255,255,.42);

    font-size: 8px;
}


.vcr-form input,
.vcr-form select {
    width: 100%;
    height: 33px;

    margin-top: 4px;

    padding: 0 7px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 4px;

    background:
        #071713;

    color: #fff;
}


.vcr-attachment small {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.26);
}


.vcr-modal-actions {
    display: flex;

    justify-content: flex-end;

    gap: 7px;

    margin-top: 15px;
}


.vcr-modal-actions button {
    height: 33px;

    padding: 0 12px;

    border-radius: 4px;

    cursor: pointer;
}


#vcrCancel {
    border:
        1px solid rgba(255,255,255,.10);

    background: transparent;

    color:
        rgba(255,255,255,.62);
}


#vcrSave {
    border:
        1px solid rgba(57,255,136,.40);

    background:
        rgba(57,255,136,.07);

    color: #39ff88;
}


/* =========================================================
   CERTIFICATE DELETE MODAL
========================================================= */

.vcr-delete-box {
    width: 440px;
}

.vcr-delete-message {
    padding: 18px 4px 8px;
}

.vcr-delete-message > span,
.vcr-delete-message > small {
    display: block;

    color:
        rgba(255,255,255,.46);

    font-size: 10px;
}

.vcr-delete-message > strong {
    display: block;

    margin: 8px 0;

    color: #fff;

    font-size: 13px;
    font-weight: 400;
}

.vcr-danger {
    border:
        1px solid rgba(255,65,96,.45) !important;

    background:
        rgba(255,65,96,.07) !important;

    color: #ff4160 !important;
}


/* =========================================================
   CERTIFICATE RECORDS - DELETE POPUP
========================================================= */

.vcr-delete-box {
    width: 440px;
}

.vcr-delete-message {
    padding:
        18px 4px 8px;
}

.vcr-delete-message > span,
.vcr-delete-message > small {
    display: block;

    color:
        rgba(255,255,255,.45);

    font-size: 10px;
}

.vcr-delete-message > strong {
    display: block;

    margin:
        8px 0;

    color: #fff;

    font-size: 13px;

    font-weight: 400;
}

.vcr-danger {
    border:
        1px solid rgba(255,65,96,.45) !important;

    background:
        rgba(255,65,96,.07) !important;

    color:
        #ff4160 !important;
}


/* =========================================================
   CERTIFICATE DELETE POPUP
========================================================= */

.vcr-delete-box {
    width: 440px;
}

.vcr-delete-message {
    padding: 18px 4px 8px;
}

.vcr-delete-message > span,
.vcr-delete-message > small {
    display: block;

    color:
        rgba(255,255,255,.45);

    font-size: 10px;
}

.vcr-delete-message > strong {
    display: block;

    margin: 8px 0;

    color: #fff;

    font-size: 13px;
    font-weight: 400;
}

.vcr-danger {
    border:
        1px solid rgba(255,65,96,.45) !important;

    background:
        rgba(255,65,96,.07) !important;

    color: #ff4160 !important;
}


/* =========================================================
   CERTIFICATE DELETE POPUP
========================================================= */

.vcr-delete-box {
    width: 440px;
}

.vcr-delete-message {
    padding: 18px 4px 8px;
}

.vcr-delete-message > span,
.vcr-delete-message > small {
    display: block;

    color:
        rgba(255,255,255,.45);

    font-size: 10px;
}

.vcr-delete-message > strong {
    display: block;

    margin: 8px 0;

    color: #fff;

    font-size: 13px;
    font-weight: 400;
}

.vcr-danger {
    border:
        1px solid rgba(255,65,96,.45) !important;

    background:
        rgba(255,65,96,.07) !important;

    color: #ff4160 !important;
}


/* =========================================================
   CERTIFICATE RECORDS
   EXPIRY STATUS + CERTIFICATE STAGE
========================================================= */

.vcr-register-head,
.vcr-cert-row {
    grid-template-columns:
        34px
        minmax(220px,1.7fr)
        minmax(135px,1fr)
        minmax(110px,.8fr)
        minmax(115px,.9fr)
        minmax(135px,1fr)
        minmax(130px,auto);
}


/* EXPIRY STATUS */

.vcr-expiry-status {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 82px;

    padding: 4px 8px;

    box-sizing: border-box;

    border-radius: 10px;

    font-size: 8px;
    font-weight: 500;

    white-space: nowrap;
}


.vcr-expiry-status.active {
    color: #39ff88;

    border:
        1px solid rgba(57,255,136,.30);

    background:
        rgba(57,255,136,.06);
}


.vcr-expiry-status.due-3m {
    color: #42a5ff;

    border:
        1px solid rgba(66,165,255,.30);

    background:
        rgba(66,165,255,.06);
}


.vcr-expiry-status.due-30 {
    color: #ffcc20;

    border:
        1px solid rgba(255,204,32,.32);

    background:
        rgba(255,204,32,.06);
}


.vcr-expiry-status.expired {
    color: #ff4160;

    border:
        1px solid rgba(255,65,96,.35);

    background:
        rgba(255,65,96,.07);
}



/* =========================================================
   ROBUST VMS GLOBAL TYPOGRAPHY
   Minimum dashboard text size = 12px
========================================================= */

/*
 * Preserve existing typography hierarchy.
 * Only text smaller than 12px is overridden below.
 */

body {
    font-size: 12px;
}


/* General UI text */

small,
label,
button,
input,
select,
textarea,
option,
table,
th,
td {
    font-size: 12px !important;
}


/* Vessel Detail / Overview / Log & Trend / Matrix /
   Certificate / Crew and shared dashboard components */

[class*="vd-"],
[class*="vlt-"],
[class*="vmx-"],
[class*="vcr-"],
[class*="vcm-"] {
    --vms-min-font-size: 12px;
}


/* Small labels and metadata */

[class*="vd-"] small,
[class*="vlt-"] small,
[class*="vmx-"] small,
[class*="vcr-"] small,
[class*="vcm-"] small,

[class*="vd-"] label,
[class*="vlt-"] label,
[class*="vmx-"] label,
[class*="vcr-"] label,
[class*="vcm-"] label,

[class*="vd-"] button,
[class*="vlt-"] button,
[class*="vmx-"] button,
[class*="vcr-"] button,
[class*="vcm-"] button,

[class*="vd-"] input,
[class*="vlt-"] input,
[class*="vmx-"] input,
[class*="vcr-"] input,
[class*="vcm-"] input,

[class*="vd-"] select,
[class*="vlt-"] select,
[class*="vmx-"] select,
[class*="vcr-"] select,
[class*="vcm-"] select {
    font-size: 12px !important;
}


/* Certificate Records */

.vcr-register-head,
.vcr-cert-row,
.vcr-cert-meta,
.vcr-detail-head,
.vcr-component-row,
.vcr-stage,
.vcr-expiry-status,
.vcr-cert-actions button {
    font-size: 12px !important;
}


/* Matrix */

.vmx-heat-label,
.vmx-hour-label,
.vmx-legend,
.vmx-toolbar,
.vmx-sensor-detail,
.vmx-sensor-cell {
    font-size: 12px !important;
}


/* Keep icon-only controls from visually enlarging */

.vmx-heat-cell,
.vmx-sensor-cell,
.vcr-cert-toggle,
.vcr-component-toggle {
    line-height: 1;
}



/* =========================================================
   CERTIFICATE RECORDS — STANDARD 12PX
========================================================= */

.vcr-register-head,
.vcr-register-head span,
.vcr-cert-row,
.vcr-cert-row div,
.vcr-cert-name,
.vcr-cert-name strong {
    font-size: 12px !important;
}


/* Certificate Number + Expiry Date */

.vcr-cert-row > div {
    font-size: 12px !important;
}


/* Status badges */

.vcr-stage,
.vcr-expiry-status {
    font-size: 12px !important;
}


/* Certificate action buttons */

.vcr-cert-actions button {
    font-size: 12px !important;
}


/* Expanded certificate metadata */

.vcr-cert-meta,
.vcr-cert-meta span,
.vcr-cert-meta strong {
    font-size: 12px !important;
}


/* Process table */

.vcr-detail-head,
.vcr-detail-head span,
.vcr-component-row,
.vcr-component-row div {
    font-size: 12px !important;
}



/* =========================================================
   VOYAGE ROUTE WAYPOINT TYPOGRAPHY
   Standard dashboard text = 12px
========================================================= */

.robust-vr-waypoint-label,
.robust-vr-waypoint-label .leaflet-tooltip-content,
.vrf-label {
    font-size: 12px !important;
}


/* Leaflet waypoint tooltip */

.leaflet-tooltip.robust-vr-waypoint-label {
    font-size: 12px !important;

    line-height: 1.25;

    padding: 3px 6px;
}



/* Certificate Issue Modal */

#vcrIssueModal textarea {
    width: 100%;

    margin-top: 4px;
    padding: 8px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 4px;

    background: #071713;

    color: #fff;

    font-family: inherit;
    font-size: 12px;

    resize: vertical;
}

#vcrIssueClose {
    border: 0;

    background: transparent;

    color: #39ff88;

    font-size: 20px;

    cursor: pointer;
}

#vcrIssueSave {
    border:
        1px solid rgba(57,255,136,.40);

    background:
        rgba(57,255,136,.07);

    color: #39ff88;
}



/* =========================================================
   CERTIFICATE ISSUE HISTORY - POC
========================================================= */

.vcr-audit-summary {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(180px,1fr));

    gap: 8px;

    margin:
        8px 10px 12px;

    padding:
        10px 12px;

    border:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(255,255,255,.018);
}


.vcr-audit-summary small {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(255,255,255,.42);

    font-size: 12px;
}


.vcr-audit-summary strong {
    color: #fff;

    font-size: 12px;
    font-weight: 400;
}


.vcr-history {
    margin:
        0 10px 12px;

    border:
        1px solid rgba(255,255,255,.07);
}


.vcr-history-title {
    padding:
        8px 10px;

    color: #39ff88;

    font-size: 12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vcr-history-row {
    display: grid;

    grid-template-columns:
        185px
        100px
        minmax(260px,1fr)
        130px;

    gap: 12px;

    align-items: center;

    min-height: 36px;

    padding:
        6px 10px;

    border-bottom:
        1px solid rgba(255,255,255,.045);

    font-size: 12px;
}


.vcr-history-row:last-child {
    border-bottom: 0;
}


.vcr-history-time {
    color:
        rgba(255,255,255,.55);
}


.vcr-history-action {
    color: #39ff88;
}


.vcr-history-process {
    color: #fff;
}


.vcr-history-empty {
    margin:
        0 10px 12px;

    padding:
        10px;

    color:
        rgba(255,255,255,.35);

    border:
        1px dashed rgba(255,255,255,.08);

    font-size: 12px;
}



/* =========================================================
   CERTIFICATE CURRENT PROCESS TIMESTAMP
========================================================= */

.vcr-process-updated {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.42);

    font-size: 12px;

    font-weight: 400;
}



/* =========================================================
   CERTIFICATE - PROCESS LAST UPDATE
   ========================================================= */

.vcr-process-updated {
    display: block;

    margin-top: 5px;

    font-size: 12px !important;
    line-height: 1.3;

    color: rgba(255,255,255,0.48);
    font-weight: 400;
}


/* =========================================================
   CERTIFICATE HISTORY — FINAL INLINE ALIGNMENT
   ========================================================= */

.vcr-history {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.vcr-history-title {
    display: none !important;
}

.vcr-history-row {
    display: grid !important;

    /*
     * Must follow certificate component table:
     * COMPONENT | MONITORING PROCESS | APPROVAL STAGE | ACTION
     */
    grid-template-columns:
        minmax(300px, 30%)
        minmax(480px, 1fr)
        190px
        220px !important;

    gap: 0 !important;

    align-items: center !important;

    min-height: 42px !important;

    padding: 0 !important;

    border-top:
        1px solid rgba(255,255,255,.045) !important;

    border-bottom: 0 !important;

    font-size: 12px !important;
}

.vcr-history-component {
    min-width: 0;
}

.vcr-history-process-cell {
    display: grid;

    grid-template-columns:
        175px
        minmax(0,1fr);

    column-gap: 14px;

    align-items: center;

    min-width: 0;
}

.vcr-history-time {
    color: rgba(255,255,255,.48);

    font-size: 12px !important;

    white-space: nowrap;
}

.vcr-history-process {
    color: rgba(255,255,255,.82);

    font-size: 12px !important;

    min-width: 0;
}

.vcr-history-stage {
    display: flex;

    align-items: center;

    justify-content: flex-start;
}

.vcr-history-action-cell {
    min-width: 0;
}

.vcr-history-empty {
    margin: 0 !important;

    padding: 8px 0 8px 30% !important;

    border: 0 !important;
    border-top:
        1px solid rgba(255,255,255,.045) !important;

    font-size: 12px !important;
}


/*
 * Old audit summary is no longer used in the final layout.
 */
.vcr-audit-summary {
    display: none !important;
}


/*
 * Current row timestamp:
 * don't stack it vertically below Monitoring Process.
 */
.vcr-process-updated {
    display: inline !important;

    margin: 0 12px 0 0 !important;

    color: rgba(255,255,255,.48) !important;

    font-size: 12px !important;

    white-space: nowrap;
}



/* =========================================================
   CERTIFICATE PROCESS / HISTORY ALIGNMENT V2
========================================================= */


/* Current process = timestamp + value */
.vcr-current-process {
    display: grid;

    grid-template-columns:
        155px
        minmax(0,1fr);

    column-gap: 12px;

    align-items: center;

    width: 100%;
}


.vcr-current-time {
    color:
        rgba(255,255,255,.48);

    font-size: 12px !important;

    white-space: nowrap;
}


.vcr-current-process-text {
    color: #fff;

    font-size: 12px !important;
    font-weight: 400;

    min-width: 0;
}


/*
 * Old stacked timestamp must not display.
 */
.vcr-process-updated {
    display: none !important;
}


/* =========================================================
   EXPANDED HISTORY
========================================================= */

.vcr-history {
    margin: 0 !important;
    border: 0 !important;
}


.vcr-history-row {
    display: grid !important;

    /*
     * Same four logical columns as component row.
     */
    grid-template-columns:
        30%
        1fr
        190px
        220px !important;

    gap: 0 !important;

    align-items: center;

    min-height: 44px !important;

    padding: 0 !important;

    border-top:
        1px solid rgba(255,255,255,.045) !important;

    border-bottom: 0 !important;
}


.vcr-history-process-cell {
    display: grid;

    /*
     * Shift timestamp further left,
     * giving Monitoring Process more width.
     */
    grid-template-columns:
        155px
        minmax(0,1fr);

    column-gap: 12px;

    align-items: center;

    min-width: 0;
}


.vcr-history-time {
    color:
        rgba(255,255,255,.48);

    font-size: 12px !important;

    white-space: nowrap;
}


.vcr-history-process {
    color:
        rgba(255,255,255,.82);

    font-size: 12px !important;

    min-width: 0;
}


.vcr-history-stage {
    display: flex;

    align-items: center;

    justify-content: flex-start;
}


.vcr-history-component,
.vcr-history-action-cell {
    min-width: 0;
}


/* Old POC elements */
.vcr-history-title,
.vcr-audit-summary,
.vcr-history-empty {
    display: none !important;
}



/* =========================================================
   CERTIFICATE PROCESS ALIGNMENT — LEFT SHIFT
========================================================= */

/*
 * Current Issue row:
 * timestamp + process move further left
 */

.vcr-current-process {
    grid-template-columns:
        145px
        minmax(0,1fr) !important;

    column-gap: 10px !important;
}


/*
 * Expanded history:
 * same internal alignment as current row
 */

.vcr-history-process-cell {
    grid-template-columns:
        145px
        minmax(0,1fr) !important;

    column-gap: 10px !important;
}


/*
 * Shift the entire monitoring-process area
 * slightly to the left.
 */

.vcr-component-process,
.vcr-history-process-cell {
    transform:
        translateX(-34px);
}


/*
 * Keep timestamp aligned consistently.
 */

.vcr-current-time,
.vcr-history-time {
    text-align: left !important;

    padding-left: 0 !important;

    margin-left: 0 !important;
}


/*
 * Process text also starts from the same axis.
 */

.vcr-current-process-text,
.vcr-history-process {
    text-align: left !important;

    padding-left: 0 !important;

    margin-left: 0 !important;
}



/* =========================================================
   CERTIFICATE ISSUE / HISTORY — FINAL COLUMN ALIGNMENT
   ========================================================= */

/*
 * Move ONLY timestamp + monitoring process left.
 * Approval Stage and Action remain untouched.
 */

.vcr-component-process,
.vcr-history-process-cell {
    transform: translateX(-70px) !important;
}


/*
 * Timestamp width.
 * Current row and history use exactly the same width.
 */

.vcr-current-process,
.vcr-history-process-cell {
    grid-template-columns:
        145px
        minmax(0, 1fr) !important;

    column-gap: 10px !important;
}


/* Timestamp */

.vcr-current-time,
.vcr-history-time {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    white-space: nowrap;

    font-size: 12px !important;
}


/* Monitoring Process */

.vcr-current-process-text,
.vcr-history-process {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    font-size: 12px !important;
}


/*
 * Remove remnants of old stacked layout.
 */

.vcr-component-process > small,
.vcr-process-updated {
    display: none !important;
}



/* =========================================================
   CERTIFICATE — OPTIONAL SUB ISSUE BUILDER
========================================================= */

.vcr-subissue-builder {
    margin-top: 10px;
    padding: 12px;

    border:
        1px solid rgba(57,255,136,.16);

    background:
        rgba(57,255,136,.025);
}


.vcr-subissue-builder-head {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
}


.vcr-subissue-builder-head small {
    display: block;

    color:
        rgba(255,255,255,.40);

    font-size: 12px;
}


.vcr-subissue-builder-head strong {
    display: block;

    margin-top: 3px;

    color: #39ff88;

    font-size: 12px;
}


.vcr-subissue-builder-head > span {
    color:
        rgba(255,255,255,.38);

    font-size: 12px;
}


.vcr-subissue-builder label {
    display: block;

    margin-top: 10px;

    font-size: 12px;
}


.vcr-subissue-builder input,
.vcr-subissue-builder textarea,
.vcr-subissue-builder select {
    width: 100%;

    box-sizing: border-box;

    margin-top: 5px;

    font-size: 12px !important;
}



/* =========================================================
   CERTIFICATE - MULTI SUB ISSUE BUILDER
========================================================= */

.vcr-subissue-builder {
    margin-top: 10px;
}

.vcr-subissue-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.vcr-subissue-builder-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vcr-subissue-builder-head small {
    opacity: 0.55;
}

.vcr-add-subissue {
    border: 1px solid rgba(57,255,136,0.45);
    background: transparent;
    color: #39ff88;
    padding: 7px 12px;
    cursor: pointer;
}

.vcr-subissue-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vcr-subissue-entry {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.9fr)
        minmax(280px, 1.8fr)
        minmax(150px, 0.7fr)
        auto;
    gap: 10px;
    align-items: end;

    padding: 10px;

    border:
        1px solid rgba(255,255,255,0.10);

    background:
        rgba(255,255,255,0.015);
}

.vcr-subissue-entry label {
    min-width: 0;
}

.vcr-subissue-remove {
    height: 34px;
    padding: 0 12px;

    border:
        1px solid rgba(255,80,100,0.35);

    background: transparent;
    color: #ff6070;

    cursor: pointer;
}


/* =========================================================
   CERTIFICATE ISSUE MODAL — SUB ISSUE LAYOUT FIX
========================================================= */

/*
 * Keep modal content inside its card.
 */
#vcrIssueModal .vcr-modal-box {
    width: min(760px, calc(100vw - 40px));
    max-width: 760px;

    box-sizing: border-box;
}


/*
 * Sub Issue row stays inside modal.
 *
 * Layout:
 * Name | Monitoring Process | Approval Stage | Remove
 */
#vcrIssueModal .vcr-subissue-entry {
    display: grid !important;

    grid-template-columns:
        minmax(150px, .9fr)
        minmax(230px, 1.6fr)
        150px
        84px !important;

    gap: 10px !important;

    align-items: end !important;

    width: 100%;

    box-sizing: border-box;
}


/*
 * Prevent child fields from forcing row wider.
 */
#vcrIssueModal .vcr-subissue-entry label,
#vcrIssueModal .vcr-subissue-entry input,
#vcrIssueModal .vcr-subissue-entry textarea,
#vcrIssueModal .vcr-subissue-entry select {
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/*
 * Approval Stage should stay inside its column.
 */
#vcrIssueModal .vcr-subissue-status {
    width: 100% !important;
    min-width: 0 !important;

    height: 36px;
}


/*
 * Remove button fixed width and aligned.
 */
#vcrIssueModal .vcr-subissue-remove {
    width: 84px !important;
    min-width: 84px !important;

    height: 36px;

    padding: 0 8px !important;

    box-sizing: border-box;
}


/*
 * Sub Issue process textarea should not stretch outside row.
 */
#vcrIssueModal .vcr-subissue-process {
    width: 100% !important;

    resize: vertical;
}


/*
 * Allow Sub Issue section to scroll vertically
 * if many rows are added.
 */
#vcrIssueModal .vcr-subissue-list {
    width: 100%;

    max-height: 300px;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;
}


/*
 * Main Issue fields also remain fully inside modal.
 */
#vcrIssueModal .vcr-form,
#vcrIssueModal .vcr-subissue-builder {
    width: 100%;

    min-width: 0;

    box-sizing: border-box;
}



/* =========================================================
   CERTIFICATE MAIN PAGE
   Same application shell as Vessel Management
========================================================= */

#certificatePage {
    position: fixed;
    inset: 74px 0 0 0;
    z-index: 11000;

    padding: 24px 30px;

    box-sizing: border-box;

    overflow: auto;

    background:
        linear-gradient(
            180deg,
            rgba(4,18,16,.98),
            rgba(3,14,13,.99)
        );

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}


/*
 * IMPORTANT:
 * .certificate-main-page previously has display:none.
 * Active application page must override it.
 */
#certificatePage.app-page {
    display: none;
}

#certificatePage.app-page.active {
    display: block;
}



/* =========================================================
   FLEET CERTIFICATE MONITORING
========================================================= */

.fcm-page {
    width: 100%;
    min-width: 1180px;
    box-sizing: border-box;

    color: rgba(255,255,255,.78);
}


/* =========================================================
   HEADER
========================================================= */

.fcm-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 22px;
    padding-bottom: 16px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.fcm-heading small {
    display: block;

    margin-bottom: 7px;

    color: rgba(255,255,255,.38);

    font-size: 10px;
    font-weight: 400;

    text-transform: uppercase;
}

.fcm-heading h2,
.fcm-heading strong {
    display: block;

    margin: 0;

    color: #fff;

    font-size: 18px;
    font-weight: 600;
}

.fcm-heading p {
    margin: 6px 0 0;

    color: rgba(255,255,255,.45);

    font-size: 11px;
}


/* =========================================================
   SUMMARY
========================================================= */

.fcm-summary {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(150px, 1fr));

    gap: 10px;

    margin-bottom: 18px;
}

.fcm-summary > div {
    min-height: 70px;

    padding: 13px 15px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(8,29,26,.72);
}

.fcm-summary small {
    display: block;

    margin-bottom: 8px;

    color: rgba(255,255,255,.38);

    font-size: 9px;
    font-weight: 400;
}

.fcm-summary strong {
    display: block;

    color: #fff;

    font-size: 20px;
    font-weight: 500;
}


/* =========================================================
   FILTER
========================================================= */

.fcm-filter {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.5fr)
        minmax(170px, .7fr)
        minmax(190px, .8fr)
        minmax(210px, .9fr);

    gap: 8px;

    margin-bottom: 14px;
}

.fcm-filter input,
.fcm-filter select {
    width: 100%;
    height: 34px;

    padding: 0 10px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 3px;

    outline: none;

    background:
        rgba(4,20,18,.92);

    color:
        rgba(255,255,255,.76);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 11px;
}

.fcm-filter input::placeholder {
    color:
        rgba(255,255,255,.28);
}

.fcm-filter input:focus,
.fcm-filter select:focus {
    border-color:
        rgba(57,255,136,.48);
}


/* =========================================================
   CERTIFICATE TABLE
========================================================= */

.fcm-table {
    width: 100%;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 4px;

    overflow: hidden;

    background:
        rgba(5,22,20,.70);
}


/*
 * VESSEL
 * CERTIFICATE NAME
 * CERTIFICATE NO
 * ISSUE DATE
 * EXPIRY DATE
 * EXPIRY STATUS
 * CERTIFICATE STAGE
 * ACTION
 */

.fcm-row {
    display: grid;

    grid-template-columns:
        minmax(150px,1.05fr)
        minmax(220px,1.6fr)
        minmax(130px,.9fr)
        minmax(110px,.8fr)
        minmax(110px,.8fr)
        minmax(130px,.9fr)
        minmax(150px,1fr)
        90px;

    align-items: center;

    min-height: 54px;

    padding: 0 12px;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(255,255,255,.05);

    column-gap: 12px;
}

.fcm-row:last-child {
    border-bottom: 0;
}

.fcm-row:not(.fcm-head):hover {
    background:
        rgba(57,255,136,.025);
}


/* TABLE HEADER */

.fcm-head {
    min-height: 38px;

    background:
        rgba(255,255,255,.018);
}

.fcm-head > div {
    color:
        rgba(255,255,255,.34);

    font-size: 9px;
    font-weight: 400;

    text-transform: uppercase;
}


/* TABLE CELLS */

.fcm-row > div {
    min-width: 0;

    color:
        rgba(255,255,255,.68);

    font-size: 11px;
}

.fcm-vessel {
    color: #fff !important;

    font-weight: 500;
}


/* =========================================================
   EXPIRY / STAGE BADGES
========================================================= */

.fcm-expiry {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;
    min-height: 22px;

    padding: 0 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 12px;

    font-size: 10px;

    white-space: nowrap;
}


/*
 * Existing JS may provide status classes.
 * Generic badge remains clean even without them.
 */

.fcm-row .status-conformity,
.fcm-row .conformity {
    color: #39ff88;

    border-color:
        rgba(57,255,136,.75);
}

.fcm-row .status-non-conformity,
.fcm-row .non-conformity {
    color: #ff3c5f;

    border-color:
        rgba(255,60,95,.75);
}

.fcm-row .status-expired,
.fcm-row .expired {
    color: #ff3c5f;

    border-color:
        rgba(255,60,95,.75);
}

.fcm-row .status-pending,
.fcm-row .pending {
    color: #ffd500;

    border-color:
        rgba(255,213,0,.75);
}


/* =========================================================
   INSPECT
========================================================= */

.fcm-inspect {
    height: 28px;

    padding: 0 11px;

    border:
        1px solid rgba(57,255,136,.38);

    border-radius: 3px;

    background:
        transparent;

    color: #39ff88;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 10px;

    cursor: pointer;
}

.fcm-inspect:hover {
    background:
        rgba(57,255,136,.08);

    border-color:
        #39ff88;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.fcm-empty {
    padding: 35px 20px;

    text-align: center;

    color:
        rgba(255,255,255,.34);

    font-size: 11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1450px) {

    .fcm-page {
        min-width: 1080px;
    }

    .fcm-row {
        grid-template-columns:
            140px
            minmax(190px,1.5fr)
            120px
            100px
            100px
            120px
            135px
            82px;

        column-gap: 8px;
    }
}



/* =========================================================
   FLEET CERTIFICATE — VESSEL SUMMARY TABLE
========================================================= */

.fcm-filter {
    grid-template-columns:
        minmax(320px,1.7fr)
        minmax(220px,.8fr) !important;
}


.fcm-group-head {
    display: grid;

    grid-template-columns:
        minmax(180px,1.2fr)
        repeat(8,minmax(90px,.7fr))
        100px;

    min-height: 34px;

    padding: 0 12px;

    box-sizing: border-box;

    align-items: center;

    column-gap: 8px;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(255,255,255,.018);

    color:
        rgba(255,255,255,.42);

    font-size: 12px;
}


.fcm-group-head > div {
    font-size: 12px;
}


.fcm-group-expiry {
    grid-column:
        2 / 6;

    text-align: center;
}


.fcm-group-stage {
    grid-column:
        6 / 10;

    text-align: center;
}


.fcm-row {
    grid-template-columns:
        minmax(180px,1.2fr)
        repeat(8,minmax(90px,.7fr))
        100px !important;

    column-gap: 8px !important;

    min-width: 1180px;
}


.fcm-head {
    min-height: 38px;

    background:
        rgba(255,255,255,.025);
}


.fcm-head > div {
    color:
        rgba(255,255,255,.40);

    font-size: 12px !important;

    text-align: center;
}


.fcm-head > div:first-child {
    text-align: left;
}


.fcm-summary-row {
    min-height: 56px;
}


.fcm-summary-row > div {
    font-size: 12px !important;
}


.fcm-count {
    text-align: center;

    font-size: 13px !important;
}


.fcm-good {
    color: #39ff88 !important;
}


.fcm-bad {
    color: #ff3c5f !important;
}


.fcm-warning {
    color: #ffd500 !important;
}


.fcm-progress {
    color: #42b9ff !important;
}


.fcm-vessel {
    font-size: 12px !important;

    font-weight: 500;
}


/*
 * Same visual language as Certificate Record table.
 */
.fcm-table,
.vcr-register {
    border-color:
        rgba(255,255,255,.07);
}


.fcm-head,
.vcr-register-head {
    background:
        rgba(255,255,255,.025);
}


.fcm-row,
.vcr-cert-row {
    border-bottom-color:
        rgba(255,255,255,.05);
}



/* =========================================================
   FLEET CERTIFICATE — VESSEL PHOTO
========================================================= */

.fcm-vessel {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}


.fcm-vessel-photo {
    width: 58px;
    height: 36px;

    flex: 0 0 58px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(57,255,136,.20);

    border-radius: 3px;

    background:
        rgba(2,16,13,.55);
}


.fcm-vessel-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.fcm-vessel-photo span {
    color:
        rgba(255,255,255,.28);

    font-size: 8px;
}


.fcm-vessel strong {
    min-width: 0;

    color: #fff;

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*
 * Vessel column widened slightly for photo + name.
 */
.fcm-row {
    grid-template-columns:
        minmax(235px,1.4fr)
        repeat(8,minmax(90px,.7fr))
        100px !important;
}


/*
 * Group header is no longer used.
 */
.fcm-group-head {
    display: none !important;
}



/* =========================================================
   FLEET CERTIFICATE — VESSEL PHOTO 2X
========================================================= */

.fcm-vessel-photo {
    width: 116px !important;
    height: 72px !important;

    flex: 0 0 116px !important;
}


.fcm-summary-row {
    min-height: 92px !important;
}


.fcm-vessel {
    gap: 12px !important;
}


.fcm-vessel strong {
    font-size: 12px !important;
}


/*
 * Give vessel column enough room for
 * photo + vessel name.
 */
.fcm-row {
    grid-template-columns:
        minmax(310px,1.6fr)
        repeat(8,minmax(90px,.7fr))
        100px !important;
}



/* =========================================================
   FLEET CERTIFICATE — VESSEL TABLE 12PX
========================================================= */

/* All vessel summary row values */
.fcm-row:not(.fcm-head) {
    font-size: 12px !important;
}

/* Ensure every value/cell follows 12px */
.fcm-row:not(.fcm-head) > div,
.fcm-row:not(.fcm-head) > span,
.fcm-row:not(.fcm-head) strong {
    font-size: 12px !important;
}



/* =========================================================
   FLEET CERTIFICATE — VESSEL ROW 16PX
========================================================= */

/* All text and values inside vessel data rows */
.fcm-summary-row,
.fcm-summary-row > div,
.fcm-summary-row strong,
.fcm-summary-row .fcm-count {
    font-size: 16px !important;
}

/* Vessel name */
.fcm-summary-row .fcm-vessel strong {
    font-size: 16px !important;
}

/* INSPECT button text */
.fcm-summary-row .fcm-inspect {
    font-size: 16px !important;
}



/* =========================================================
   VESSEL DETAIL — CREW LIST
========================================================= */

.vcrew-page {
    width: 100%;
    box-sizing: border-box;

    font-size: 12px;
}


/* TOOLBAR */

.vcrew-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
    padding-bottom: 14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.vcrew-toolbar > div {
    display: flex;
    align-items: baseline;

    gap: 10px;
}


.vcrew-toolbar small {
    color:
        rgba(255,255,255,.38);

    font-size: 12px;
}


.vcrew-toolbar strong {
    color: #fff;

    font-size: 12px;
}


.vcrew-toolbar span {
    color: #39ff88;

    font-size: 12px;
}


.vcrew-add {
    height: 32px;

    padding: 0 13px;

    border:
        1px solid rgba(57,255,136,.38);

    background:
        rgba(57,255,136,.04);

    color: #39ff88;

    font-size: 12px;

    cursor: pointer;
}


/* GALLERY */

.vcrew-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(210px, 1fr)
        );

    gap: 14px;
}


.vcrew-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.075);

    background:
        rgba(5,22,20,.70);
}


.vcrew-photo {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background:
        rgba(2,15,13,.90);
}


.vcrew-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.vcrew-no-photo {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.25);

    font-size: 12px;
}


/* CARD MENU */

.vcrew-menu-toggle {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 30px;
    height: 28px;

    border:
        1px solid rgba(255,255,255,.18);

    background:
        rgba(2,14,12,.82);

    color: #fff;

    font-size: 12px;

    cursor: pointer;
}


.vcrew-menu {
    position: absolute;

    top: 39px;
    right: 8px;

    z-index: 5;

    display: none;

    min-width: 90px;

    border:
        1px solid rgba(255,255,255,.12);

    background:
        rgba(3,18,16,.98);
}


.vcrew-menu.open {
    display: block;
}


.vcrew-menu button {
    display: block;

    width: 100%;

    padding: 8px 10px;

    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.75);

    text-align: left;

    font-size: 12px;

    cursor: pointer;
}


.vcrew-menu button:hover {
    background:
        rgba(57,255,136,.06);

    color: #39ff88;
}


.vcrew-menu .vcrew-delete {
    color: #ff6070;
}


/* CARD BODY */

.vcrew-card-body {
    padding: 12px;
}


.vcrew-rank {
    margin-bottom: 5px;

    color: #39ff88;

    font-size: 12px;
}


.vcrew-name {
    display: block;

    margin-bottom: 12px;

    color: #fff;

    font-size: 12px;
    font-weight: 500;
}


.vcrew-meta {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}


.vcrew-meta small {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255,255,255,.35);

    font-size: 12px;
}


.vcrew-meta span {
    color:
        rgba(255,255,255,.70);

    font-size: 12px;
}


.vcrew-empty {
    grid-column: 1 / -1;

    padding: 40px;

    border:
        1px dashed rgba(255,255,255,.08);

    text-align: center;

    color:
        rgba(255,255,255,.32);

    font-size: 12px;
}


/* =========================================================
   CREW ADD / EDIT MODAL
========================================================= */

.vcrew-modal {
    position: fixed;

    inset: 0;

    z-index: 16000;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(0,0,0,.68);
}


.vcrew-modal.open {
    display: flex;
}


.vcrew-modal-card {
    width:
        min(
            620px,
            calc(100vw - 40px)
        );

    padding: 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.20);

    background:
        #061713;
}


.vcrew-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}


.vcrew-modal-head small {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(255,255,255,.38);

    font-size: 12px;
}


.vcrew-modal-head strong {
    color: #39ff88;

    font-size: 12px;
}


#vcrewClose {
    width: 30px;
    height: 30px;

    border:
        1px solid rgba(255,255,255,.10);

    background: transparent;

    color: #fff;

    font-size: 18px;

    cursor: pointer;
}


.vcrew-form {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.vcrew-form label {
    color:
        rgba(255,255,255,.48);

    font-size: 12px;
}


.vcrew-form label:first-child {
    grid-column: 1 / -1;
}


.vcrew-form input {
    display: block;

    width: 100%;
    height: 34px;

    margin-top: 5px;
    padding: 0 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.10);

    background:
        rgba(2,16,13,.90);

    color: #fff;

    font-size: 12px;
}


.vcrew-modal-actions {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    margin-top: 18px;
}


.vcrew-modal-actions button {
    height: 32px;

    padding: 0 14px;

    border:
        1px solid rgba(255,255,255,.12);

    background: transparent;

    color: #fff;

    font-size: 12px;

    cursor: pointer;
}


#vcrewSave {
    border-color:
        rgba(57,255,136,.40);

    color: #39ff88;
}



/* =========================================================
   CREW LIST — SID VERIFY
========================================================= */

.vcrew-sid-verify {
    display: inline-block;

    margin-top: 5px;

    color: #39ff88;

    font-size: 10px;

    text-decoration: none;

    border-bottom:
        1px solid rgba(57,255,136,.35);
}


.vcrew-sid-verify:hover {
    color: #ffffff;

    border-bottom-color:
        #39ff88;
}



/* =========================================================
   CREW LIST — FINAL HEADER
========================================================= */

.vcrew-toolbar strong {
    font-size: 20px !important;
    font-weight: 500;
}


/* =========================================================
   CREW DELETE MODAL
========================================================= */

.vcrew-delete-modal {
    position: fixed;

    inset: 0;

    z-index: 17000;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(0,0,0,.70);
}


.vcrew-delete-modal.open {
    display: flex;
}


.vcrew-delete-card {
    width: 430px;
    max-width: calc(100vw - 40px);

    padding: 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,96,112,.28);

    background:
        #061713;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.42);
}


.vcrew-delete-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.vcrew-delete-head small {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(255,255,255,.38);

    font-size: 11px;
}


.vcrew-delete-head strong {
    color: #ff6070;

    font-size: 13px;
    font-weight: 500;
}


#vcrewDeleteClose {
    width: 30px;
    height: 30px;

    border:
        1px solid rgba(255,255,255,.10);

    background: transparent;

    color:
        rgba(255,255,255,.72);

    cursor: pointer;
}


.vcrew-delete-message {
    padding: 20px 4px;
}


.vcrew-delete-message strong {
    display: block;

    margin-bottom: 8px;

    color: #fff;

    font-size: 14px;
    font-weight: 500;
}


.vcrew-delete-message span {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(255,255,255,.76);

    font-size: 12px;
}


.vcrew-delete-message small {
    color:
        rgba(255,255,255,.38);

    font-size: 11px;
}


.vcrew-delete-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding-top: 12px;

    border-top:
        1px solid rgba(255,255,255,.07);
}


.vcrew-delete-actions button {
    height: 32px;

    padding: 0 14px;

    border:
        1px solid rgba(255,255,255,.12);

    background: transparent;

    color:
        rgba(255,255,255,.78);

    font-size: 12px;

    cursor: pointer;
}


#vcrewDeleteConfirm {
    border-color:
        rgba(255,96,112,.45);

    color: #ff6070;
}


#vcrewDeleteConfirm:hover {
    background:
        rgba(255,96,112,.08);
}



/* =========================================================
   MANAGEMENT — COMPANY CENTRIC
========================================================= */

#managementPage {
    position: fixed;
    inset: 74px 0 0 0;
    z-index: 11000;

    display: none;

    padding: 24px 30px 60px;

    box-sizing: border-box;
    overflow: auto;

    background:
        linear-gradient(
            180deg,
            rgba(4,18,16,.99),
            rgba(2,13,11,1)
        );

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}


#managementPage.active {
    display: block !important;
}


/* =========================================================
   BASE FONT
========================================================= */

#managementPage,
#managementPage button,
#managementPage input,
#managementPage select,
#managementPage label,
#managementPage span,
#managementPage small,
#managementPage strong,
#managementPage p {
    font-size: 12px;
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   HEADER
========================================================= */

.mgmt-main {
    width: 100%;
}


.mgmt-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
    padding-bottom: 16px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.mgmt-header small {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(255,255,255,.38);
}


.mgmt-header h2 {
    margin: 0 0 5px;

    color: #fff;

    font-size: 20px !important;
    font-weight: 500;
}


.mgmt-header p {
    margin: 0;

    color:
        rgba(255,255,255,.42);
}


/* =========================================================
   BUTTON
========================================================= */

#managementPage button {
    min-height: 30px;

    padding: 0 11px;

    border:
        1px solid rgba(57,255,136,.35);

    background: transparent;

    color: #39ff88;

    cursor: pointer;
}


#managementPage button:hover {
    background:
        rgba(57,255,136,.07);
}


#managementPage .mgmt-danger {
    color: #ff4764;

    border-color:
        rgba(255,71,100,.28);
}


/* =========================================================
   SEARCH
========================================================= */

.mgmt-toolbar {
    margin-bottom: 14px;
}


#mgmtSearchCompany {
    width: 100%;
    height: 36px;

    padding: 0 12px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.09);

    background:
        rgba(2,16,13,.70);

    color: #fff;

    outline: none;
}


/* =========================================================
   COMPANY CARD
========================================================= */

.mgmt-company-card {
    margin-bottom: 10px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(5,25,21,.68);
}


.mgmt-company-card.open {
    border-color:
        rgba(57,255,136,.22);
}


.mgmt-company-summary {
    display: grid;

    grid-template-columns:
        36px
        minmax(240px,1.7fr)
        minmax(140px,1fr)
        minmax(140px,1fr)
        80px
        80px
        80px
        190px;

    gap: 10px;

    align-items: center;

    min-height: 72px;

    padding: 10px 12px;

    box-sizing: border-box;
}


.mgmt-company-summary small {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(255,255,255,.35);
}


.mgmt-company-summary strong {
    color:
        rgba(255,255,255,.85);

    font-weight: 500;
}


.mgmt-company-name strong {
    color: #39ff88;

    font-size: 14px !important;
}


.mgmt-company-stat {
    text-align: center;
}


.mgmt-company-toggle {
    width: 30px;

    padding: 0 !important;

    font-size: 16px !important;
}


/* =========================================================
   ACTION
========================================================= */

.mgmt-row-actions {
    display: flex;

    justify-content: flex-end;

    gap: 5px;

    flex-wrap: wrap;
}


.mgmt-row-actions button {
    min-height: 27px !important;

    padding: 0 8px !important;
}


/* =========================================================
   COMPANY DETAIL
========================================================= */

.mgmt-company-detail {
    padding: 0 12px 14px;

    border-top:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(0,0,0,.10);
}


.mgmt-subsection {
    margin-top: 14px;

    border:
        1px solid rgba(255,255,255,.065);
}


.mgmt-section-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 45px;

    padding: 0 12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.mgmt-section-head strong {
    font-weight: 500;
}


/* =========================================================
   TABLES
========================================================= */

.mgmt-table-head,
.mgmt-table-row {
    display: grid;

    gap: 12px;

    align-items: center;

    padding: 0 12px;

    box-sizing: border-box;
}


.mgmt-table-head {
    min-height: 35px;

    color:
        rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.015);
}


.mgmt-table-row {
    min-height: 48px;

    border-top:
        1px solid rgba(255,255,255,.045);

    color:
        rgba(255,255,255,.70);
}


.mgmt-table-row strong {
    color: #fff;

    font-weight: 500;
}


.mgmt-contact-grid {
    grid-template-columns:
        1.2fr
        1fr
        1fr
        1.4fr
        150px;
}


.mgmt-user-grid {
    grid-template-columns:
        1fr
        120px
        minmax(400px,2fr)
        310px;
}


.mgmt-mail-grid {
    grid-template-columns:
        120px
        1fr
        1.4fr
        1fr
        150px;
}


/* =========================================================
   PRIVILEGES
========================================================= */

.mgmt-privileges {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;
}


.mgmt-privileges span {
    padding: 4px 6px;

    border:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.55);
}


/* =========================================================
   EMPTY
========================================================= */

.mgmt-empty,
.mgmt-empty-small {
    padding: 22px 14px;

    color:
        rgba(255,255,255,.30);
}


.mgmt-empty-small {
    padding: 14px 12px;
}


/* =========================================================
   MODALS
========================================================= */

.mgmt-modal {
    position: fixed;

    inset: 0;

    z-index: 30000;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(0,0,0,.70);
}


.mgmt-modal.open {
    display: flex;
}


.mgmt-modal-card,
.mgmt-confirm-card {
    width:
        min(
            720px,
            calc(100vw - 50px)
        );

    padding: 18px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.25);

    background:
        #061713;

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.45);
}


.mgmt-confirm-card {
    width:
        min(
            440px,
            calc(100vw - 50px)
        );
}


.mgmt-modal-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}


.mgmt-modal-head small {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(255,255,255,.35);
}


.mgmt-modal-head strong {
    color: #39ff88;

    font-weight: 500;
}


/* =========================================================
   FORM
========================================================= */

.mgmt-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 14px;
}


.mgmt-form-grid label,
.mgmt-privilege-grid label {
    color:
        rgba(255,255,255,.45);
}


.mgmt-form-grid input,
.mgmt-form-grid select,
.mgmt-privilege-grid select {
    display: block;

    width: 100%;
    height: 36px;

    margin-top: 6px;
    padding: 0 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.10);

    background:
        #071d18;

    color: #fff;

    outline: none;
}


.mgmt-modal-actions {
    display: flex;

    justify-content: flex-end;

    gap: 7px;

    margin-top: 20px;
}


/* =========================================================
   PRIVILEGE EDITOR
========================================================= */

.mgmt-privilege-editor {
    margin-top: 18px;
    padding-top: 15px;

    border-top:
        1px solid rgba(255,255,255,.06);
}


.mgmt-privilege-grid {
    display: grid;

    grid-template-columns:
        repeat(5,1fr);

    gap: 8px;

    margin-top: 12px;
}


.mgmt-reset-info {
    margin-bottom: 16px;

    color:
        rgba(255,255,255,.50);
}


.mgmt-reset-info strong {
    margin-left: 8px;

    color: #39ff88;
}



/* =========================================================
   MANAGEMENT — FINAL FONT SIZE 14PX
========================================================= */

#managementPage,
#managementPage button,
#managementPage input,
#managementPage select,
#managementPage label,
#managementPage span,
#managementPage small,
#managementPage strong,
#managementPage p,
#managementPage div {
    font-size: 14px !important;
}


/* Main title */
#managementPage .mgmt-header h2 {
    font-size: 20px !important;
}


/* Company name */
#managementPage .mgmt-company-name strong {
    font-size: 16px !important;
}



/* =========================================================
   REPORT PAGE — INTEGRATED VESSEL PERFORMANCE
========================================================= */

#reportPage {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 11000;

    display: none;

    padding: 24px 30px 60px;
    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(4,18,16,.99),
            rgba(2,13,11,1)
        );

    color: #fff;
}


#reportPage.active {
    display: block !important;
}


/* STANDARD REPORT FONT */

#reportPage,
#reportPage div,
#reportPage span,
#reportPage label,
#reportPage input,
#reportPage select,
#reportPage button,
#reportPage strong,
#reportPage small,
#reportPage p {
    font-size: 14px;
}


.rpt-main {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.rpt-heading {
    margin-bottom: 18px;
    padding-bottom: 16px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.rpt-heading small {
    display: block;

    color:
        rgba(255,255,255,.38);
}


.rpt-heading h2 {
    margin: 5px 0;

    color: #fff;

    font-size: 20px !important;
    font-weight: 500;
}


.rpt-heading p {
    margin: 0;

    color:
        rgba(255,255,255,.42);
}


/* =========================================================
   REPORT GENERATOR
========================================================= */

.rpt-generator {
    padding: 18px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(5,25,21,.68);
}


.rpt-section-title {
    margin-bottom: 16px;

    color: #39ff88;

    font-weight: 500;
}


.rpt-generator-grid {
    display: grid;

    grid-template-columns:
        minmax(220px,1.2fr)
        minmax(190px,1fr)
        minmax(190px,1fr)
        minmax(150px,.8fr);

    gap: 14px;
}


.rpt-generator-grid label {
    color:
        rgba(255,255,255,.45);
}


.rpt-generator-grid input,
.rpt-generator-grid select {
    display: block;

    width: 100%;
    height: 38px;

    margin-top: 7px;
    padding: 0 10px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 2px;

    outline: none;

    background: #071d18;

    color: #fff;
}


.rpt-generator-grid input:focus,
.rpt-generator-grid select:focus {
    border-color:
        rgba(57,255,136,.45);
}


/* QUICK PERIOD */

.rpt-quick-period {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 16px;
}


.rpt-quick-period span {
    margin-right: 6px;

    color:
        rgba(255,255,255,.35);
}


#reportPage button {
    min-height: 32px;

    padding: 0 11px;

    border:
        1px solid rgba(57,255,136,.30);

    border-radius: 2px;

    background:
        rgba(57,255,136,.025);

    color: #39ff88;

    cursor: pointer;
}


#reportPage button:hover {
    background:
        rgba(57,255,136,.08);

    border-color:
        rgba(57,255,136,.55);
}


.rpt-generator-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 18px;
}


#rptGenerate {
    min-width: 170px;

    height: 36px;
}


/* =========================================================
   REPORT PREVIEW
========================================================= */

.rpt-preview {
    margin-top: 18px;
}


.rpt-preview-empty {
    padding: 40px 20px;

    box-sizing: border-box;

    text-align: center;

    color:
        rgba(255,255,255,.30);

    border:
        1px dashed rgba(255,255,255,.08);
}


/* =========================================================
   GENERATED REPORT HEADER
========================================================= */

.rpt-report-header {
    padding: 20px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.18);

    background:
        rgba(5,25,21,.72);
}


.rpt-report-header small {
    display: block;

    color:
        rgba(255,255,255,.40);
}


.rpt-report-header h2 {
    margin: 6px 0;

    color: #fff;

    font-size: 20px !important;
    font-weight: 500;
}


.rpt-report-header strong {
    color: #39ff88;

    font-weight: 500;
}


.rpt-period {
    margin-top: 12px;

    color:
        rgba(255,255,255,.50);
}


/* =========================================================
   SIX REPORT SEGMENTS
========================================================= */

.rpt-segment {
    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 72px;

    margin-top: 8px;
    padding: 12px 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(5,25,21,.48);
}


.rpt-segment:hover {
    border-color:
        rgba(57,255,136,.16);
}


.rpt-segment-no {
    width: 42px;
    flex: 0 0 42px;

    color:
        rgba(57,255,136,.55);

    font-size: 18px !important;
}


.rpt-segment strong {
    display: block;

    margin-bottom: 5px;

    color: #fff;

    font-weight: 500;
}


.rpt-segment span {
    color:
        rgba(255,255,255,.40);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .rpt-generator-grid {
        grid-template-columns:
            repeat(2, minmax(200px,1fr));
    }
}



/* =========================================================
   REPORT PAGE — INTEGRATED VESSEL PERFORMANCE
========================================================= */

#reportPage {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 11000;

    display: none;

    padding: 24px 30px 60px;
    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(4,18,16,.99),
            rgba(2,13,11,1)
        );

    color: #fff;
}


#reportPage.active {
    display: block !important;
}


/* STANDARD REPORT FONT */

#reportPage,
#reportPage div,
#reportPage span,
#reportPage label,
#reportPage input,
#reportPage select,
#reportPage button,
#reportPage strong,
#reportPage small,
#reportPage p {
    font-size: 14px;
}


.rpt-main {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.rpt-heading {
    margin-bottom: 18px;
    padding-bottom: 16px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.rpt-heading small {
    display: block;

    color:
        rgba(255,255,255,.38);
}


.rpt-heading h2 {
    margin: 5px 0;

    color: #fff;

    font-size: 20px !important;
    font-weight: 500;
}


.rpt-heading p {
    margin: 0;

    color:
        rgba(255,255,255,.42);
}


/* =========================================================
   REPORT GENERATOR
========================================================= */

.rpt-generator {
    padding: 18px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(5,25,21,.68);
}


.rpt-section-title {
    margin-bottom: 16px;

    color: #39ff88;

    font-weight: 500;
}


.rpt-generator-grid {
    display: grid;

    grid-template-columns:
        minmax(220px,1.2fr)
        minmax(190px,1fr)
        minmax(190px,1fr)
        minmax(150px,.8fr);

    gap: 14px;
}


.rpt-generator-grid label {
    color:
        rgba(255,255,255,.45);
}


.rpt-generator-grid input,
.rpt-generator-grid select {
    display: block;

    width: 100%;
    height: 38px;

    margin-top: 7px;
    padding: 0 10px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 2px;

    outline: none;

    background: #071d18;

    color: #fff;
}


.rpt-generator-grid input:focus,
.rpt-generator-grid select:focus {
    border-color:
        rgba(57,255,136,.45);
}


/* QUICK PERIOD */

.rpt-quick-period {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 16px;
}


.rpt-quick-period span {
    margin-right: 6px;

    color:
        rgba(255,255,255,.35);
}


#reportPage button {
    min-height: 32px;

    padding: 0 11px;

    border:
        1px solid rgba(57,255,136,.30);

    border-radius: 2px;

    background:
        rgba(57,255,136,.025);

    color: #39ff88;

    cursor: pointer;
}


#reportPage button:hover {
    background:
        rgba(57,255,136,.08);

    border-color:
        rgba(57,255,136,.55);
}


.rpt-generator-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 18px;
}


#rptGenerate {
    min-width: 170px;

    height: 36px;
}


/* =========================================================
   REPORT PREVIEW
========================================================= */

.rpt-preview {
    margin-top: 18px;
}


.rpt-preview-empty {
    padding: 40px 20px;

    box-sizing: border-box;

    text-align: center;

    color:
        rgba(255,255,255,.30);

    border:
        1px dashed rgba(255,255,255,.08);
}


/* =========================================================
   GENERATED REPORT HEADER
========================================================= */

.rpt-report-header {
    padding: 20px;

    box-sizing: border-box;

    border:
        1px solid rgba(57,255,136,.18);

    background:
        rgba(5,25,21,.72);
}


.rpt-report-header small {
    display: block;

    color:
        rgba(255,255,255,.40);
}


.rpt-report-header h2 {
    margin: 6px 0;

    color: #fff;

    font-size: 20px !important;
    font-weight: 500;
}


.rpt-report-header strong {
    color: #39ff88;

    font-weight: 500;
}


.rpt-period {
    margin-top: 12px;

    color:
        rgba(255,255,255,.50);
}


/* =========================================================
   SIX REPORT SEGMENTS
========================================================= */

.rpt-segment {
    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 72px;

    margin-top: 8px;
    padding: 12px 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(5,25,21,.48);
}


.rpt-segment:hover {
    border-color:
        rgba(57,255,136,.16);
}


.rpt-segment-no {
    width: 42px;
    flex: 0 0 42px;

    color:
        rgba(57,255,136,.55);

    font-size: 18px !important;
}


.rpt-segment strong {
    display: block;

    margin-bottom: 5px;

    color: #fff;

    font-weight: 500;
}


.rpt-segment span {
    color:
        rgba(255,255,255,.40);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .rpt-generator-grid {
        grid-template-columns:
            repeat(2, minmax(200px,1fr));
    }
}



/* =========================================================
   REPORT — SIN128 MIN2 / MIN3 EVENT LOGS
========================================================= */

.rpt-event-block {
    margin-top: 24px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(5,25,21,.55);
}


.rpt-event-head {
    padding: 16px 18px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.rpt-event-head small {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(57,255,136,.55);

    font-size: 12px !important;
}


.rpt-event-head strong {
    display: block;

    color: #fff;

    font-size: 16px !important;
    font-weight: 500;
}


.rpt-event-head span {
    display: block;

    margin-top: 5px;

    color:
        rgba(255,255,255,.38);
}


.rpt-event-filter {
    display: grid;

    grid-template-columns:
        minmax(200px,1.2fr)
        minmax(180px,1fr)
        minmax(180px,1fr)
        minmax(160px,.8fr)
        100px;

    gap: 8px;

    padding: 12px 18px;
}


.rpt-event-filter.min3 {
    grid-template-columns:
        minmax(220px,1.3fr)
        minmax(190px,1fr)
        minmax(190px,1fr)
        100px;
}


.rpt-event-filter input,
.rpt-event-filter select {
    width: 100%;
    height: 36px;

    padding: 0 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.10);

    background: #071d18;

    color: #fff;

    outline: none;
}


.rpt-log-table {
    border-top:
        1px solid rgba(255,255,255,.06);
}


.rpt-log-row {
    display: grid;

    min-height: 42px;

    align-items: center;

    padding: 0 18px;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}


.rpt-log-row.min2 {
    grid-template-columns:
        1.1fr
        1.3fr
        1fr
        1.3fr
        .8fr
        .8fr;
}


.rpt-log-row.min3 {
    grid-template-columns:
        1.2fr
        1.4fr
        .6fr
        .6fr
        .6fr
        .6fr
        .8fr
        .8fr;
}


.rpt-log-head {
    min-height: 36px;

    color:
        rgba(255,255,255,.35);

    background:
        rgba(255,255,255,.018);
}


.rpt-log-head span {
    font-size: 12px !important;
}


.rpt-log-empty {
    padding: 28px 18px;

    text-align: center;

    color:
        rgba(255,255,255,.25);
}


@media (max-width: 1100px) {

    .rpt-event-filter,
    .rpt-event-filter.min3 {
        grid-template-columns:
            repeat(2,minmax(180px,1fr));
    }

    .rpt-log-table {
        overflow-x: auto;
    }

    .rpt-log-row.min2,
    .rpt-log-row.min3 {
        min-width: 950px;
    }
}



/* =========================================================
   VESSEL - MULTI COMPANY ACCESS
========================================================= */

.vm-company-access-field > select,
.vm-additional-company-row select {
    width: 100%;
    min-height: 40px;
    font-size: 14px;
}

.vm-company-access-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    margin-bottom: 8px;
}

.vm-company-access-head label {
    margin: 0;
    font-size: 12px;
}

#vmAddCompanyAccess {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
    cursor: pointer;
}

.vm-additional-company-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vm-additional-company-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.vm-remove-company-access {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
    cursor: pointer;
}

.vm-company-help {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    opacity: .72;
}


/* =========================================================
   ROBUST VMS — GLOBAL TYPOGRAPHY STANDARD
   STEP 3
   Minimum readable font size: 12px
   ========================================================= */

/*
 * BASE APPLICATION
 * Absolute minimum readable text = 12px
 */

body {
    font-size: 12px;
}


/* ---------------------------------------------------------
   STANDARD BODY / DATA TEXT
--------------------------------------------------------- */

small,
label,
span,
p,
td,
li,
a {
    font-size: max(12px, 1em);
}


/* ---------------------------------------------------------
   FORM CONTROLS
--------------------------------------------------------- */

input,
select,
textarea {
    font-size: 14px !important;
}

button {
    font-size: 13px;
}


/* ---------------------------------------------------------
   TABLES
--------------------------------------------------------- */

table,
td {
    font-size: 12px !important;
}

th {
    font-size: 13px !important;
    font-weight: 600;
}


/* ---------------------------------------------------------
   STANDARD HEADINGS
--------------------------------------------------------- */

h6 {
    font-size: 14px !important;
}

h5 {
    font-size: 16px !important;
}

h4 {
    font-size: 18px !important;
}

h3 {
    font-size: 20px !important;
}

h2 {
    font-size: 22px !important;
}

h1 {
    font-size: 24px !important;
}


/* ---------------------------------------------------------
   VESSEL DETAIL
--------------------------------------------------------- */

[class*="vd-"] small,
[class*="vd-"] label,
[class*="vd-"] span,
[class*="vd-"] p,
[class*="vd-"] td {
    font-size: 12px !important;
}

[class*="vd-"] input,
[class*="vd-"] select,
[class*="vd-"] textarea {
    font-size: 14px !important;
}


/* ---------------------------------------------------------
   LOG & TREND
--------------------------------------------------------- */

[class*="vlt-"] small,
[class*="vlt-"] label,
[class*="vlt-"] span,
[class*="vlt-"] p,
[class*="vlt-"] td {
    font-size: 12px !important;
}


/* ---------------------------------------------------------
   MATRIX
--------------------------------------------------------- */

[class*="vmx-"] small,
[class*="vmx-"] label,
[class*="vmx-"] span,
[class*="vmx-"] p {
    font-size: 12px !important;
}

.vmx-toolbar,
.vmx-heat-label,
.vmx-hour-label,
.vmx-legend,
.vmx-sensor-detail,
.vmx-sensor-cell {
    font-size: 12px !important;
}


/* ---------------------------------------------------------
   CERTIFICATE RECORD
--------------------------------------------------------- */

[class*="vcr-"] small,
[class*="vcr-"] label,
[class*="vcr-"] span,
[class*="vcr-"] p,
[class*="vcr-"] td {
    font-size: 12px !important;
}

[class*="vcr-"] input,
[class*="vcr-"] select,
[class*="vcr-"] textarea {
    font-size: 14px !important;
}

.vcr-register-head,
.vcr-register-head span {
    font-size: 13px !important;
    font-weight: 600;
}


/* ---------------------------------------------------------
   FLEET CERTIFICATE MONITORING
--------------------------------------------------------- */

[class*="fcm-"] small,
[class*="fcm-"] label,
[class*="fcm-"] span,
[class*="fcm-"] p,
[class*="fcm-"] td {
    font-size: 12px !important;
}

.fcm-head,
.fcm-head span {
    font-size: 13px !important;
    font-weight: 600;
}


/* ---------------------------------------------------------
   CREW LIST
--------------------------------------------------------- */

[class*="vcrew-"] small,
[class*="vcrew-"] label,
[class*="vcrew-"] span,
[class*="vcrew-"] p,
[class*="vcrew-"] a {
    font-size: 12px !important;
}

.vcrew-form input,
.vcrew-form select,
.vcrew-form textarea {
    font-size: 14px !important;
}

.vcrew-toolbar strong {
    font-size: 20px !important;
}


/* ---------------------------------------------------------
   MANAGEMENT
--------------------------------------------------------- */

#managementPage small,
#managementPage label,
#managementPage span,
#managementPage p,
#managementPage td {
    font-size: 12px !important;
}

#managementPage input,
#managementPage select,
#managementPage textarea {
    font-size: 14px !important;
}

#managementPage th {
    font-size: 13px !important;
}


/* ---------------------------------------------------------
   REPORT PAGE
--------------------------------------------------------- */

#reportPage small,
#reportPage label,
#reportPage span,
#reportPage p,
#reportPage td {
    font-size: 12px !important;
}

#reportPage input,
#reportPage select,
#reportPage textarea {
    font-size: 14px !important;
}

#reportPage th {
    font-size: 13px !important;
}


/* ---------------------------------------------------------
   PAGE / SECTION HEADING HELPERS
--------------------------------------------------------- */

.page-title,
[class*="page-title"] {
    font-size: 20px !important;
}

.section-title,
[class*="section-title"] {
    font-size: 16px !important;
}

.card-title,
[class*="card-title"] {
    font-size: 14px !important;
}


/* =========================================================
   END GLOBAL TYPOGRAPHY STANDARD
========================================================= */



/* =========================================================
   MANAGEMENT USER ACTIVE / INACTIVE
   STEP 4A
========================================================= */

.mgmt-user-grid {
    grid-template-columns:
        minmax(140px,1fr)
        110px
        110px
        minmax(380px,2fr)
        310px;
}

.mgmt-user-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    min-width: 78px;

    padding: 5px 9px;

    border-radius: 4px;

    font-size: 12px !important;
    font-weight: 700;

    letter-spacing: .4px;
}

.mgmt-user-status.active {
    color: #68d391;
    border: 1px solid rgba(104,211,145,.35);
    background: rgba(104,211,145,.08);
}

.mgmt-user-status.inactive {
    color: #fc8181;
    border: 1px solid rgba(252,129,129,.35);
    background: rgba(252,129,129,.08);
}

.mgmt-user-active-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mgmt-active-control {
    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 0 12px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 4px;
}

.mgmt-active-control input {
    width: 16px;
    height: 16px;

    margin: 0;

    cursor: pointer;
}

.mgmt-active-control strong {
    font-size: 13px !important;
}



/* =========================================================
   MANAGEMENT — HIERARCHICAL PRIVILEGE EDITOR
   STEP 4B.1
========================================================= */

.mgmt-privilege-hierarchy {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 14px;
}


.mgmt-privilege-group {
    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 6px;

    background:
        rgba(255,255,255,.018);
}


.mgmt-privilege-parent {
    padding: 11px 12px;

    background:
        rgba(57,255,136,.045);

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.mgmt-privilege-children {
    padding: 6px 12px 10px;
}


.mgmt-privilege-item {
    display: grid !important;

    grid-template-columns:
        minmax(150px,1fr)
        145px;

    align-items: center;

    gap: 12px;

    min-height: 43px;

    margin: 0 !important;
}


.mgmt-privilege-item +
.mgmt-privilege-item {
    border-top:
        1px solid rgba(255,255,255,.045);
}


.mgmt-privilege-name {
    color:
        rgba(255,255,255,.76) !important;

    font-size: 14px !important;
}


.mgmt-privilege-parent
.mgmt-privilege-name {
    color: #fff !important;

    font-weight: 700;

    letter-spacing: .35px;
}


.mgmt-privilege-item select {
    width: 145px !important;

    height: 34px !important;

    margin-top: 0 !important;

    font-size: 14px !important;
}


.mgmt-privilege-level-1
.mgmt-privilege-name {
    padding-left: 10px;
}


.mgmt-privilege-level-2
.mgmt-privilege-name {
    padding-left: 24px;

    color:
        rgba(255,255,255,.60) !important;
}


/*
 * VESSEL has more child permissions,
 * therefore allow it to occupy full width.
 */
.mgmt-privilege-group[
    data-privilege-group="vessel"
] {
    grid-column: 1 / -1;
}


.mgmt-privilege-group[
    data-privilege-group="vessel"
]
.mgmt-privilege-children {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    column-gap: 28px;
}


@media (max-width: 1000px) {

    .mgmt-privilege-hierarchy {
        grid-template-columns: 1fr;
    }


    .mgmt-privilege-group[
        data-privilege-group="vessel"
    ] {
        grid-column: auto;
    }


    .mgmt-privilege-group[
        data-privilege-group="vessel"
    ]
    .mgmt-privilege-children {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   MANAGEMENT — COMPACT HIERARCHICAL PRIVILEGES
   STEP 4B.1 COMPACT
========================================================= */

.mgmt-privilege-hierarchy {
    gap: 9px;
    margin-top: 10px;
}


/* GROUP */

.mgmt-privilege-parent {
    padding: 6px 10px;
}

.mgmt-privilege-children {
    padding: 3px 10px 5px;
}


/* ROW */

.mgmt-privilege-item {
    grid-template-columns:
        minmax(150px, 1fr)
        142px;

    gap: 8px;

    min-height: 32px;
}


/* SELECT */

.mgmt-privilege-item select {
    width: 142px !important;
    height: 29px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    font-size: 12px !important;
}


/* LABEL */

.mgmt-privilege-name {
    font-size: 12px !important;
    line-height: 1.15;
}


/* PARENT HEADER */

.mgmt-privilege-parent
.mgmt-privilege-name {
    font-size: 13px !important;
}


/* CHILD INDENT */

.mgmt-privilege-level-1
.mgmt-privilege-name {
    padding-left: 8px;
}

.mgmt-privilege-level-2
.mgmt-privilege-name {
    padding-left: 16px;
}


/* VESSEL TWO-COLUMN CHILD AREA */

.mgmt-privilege-group[
    data-privilege-group="vessel"
]
.mgmt-privilege-children {
    column-gap: 20px;
}


/* PRIVILEGE EDITOR OUTER SPACING */

.mgmt-privilege-editor {
    margin-top: 12px;
    padding-top: 10px;
}



/* =========================================================
   MANAGEMENT USER ACCESS — VIEWPORT FIT FINAL
========================================================= */

#mgmtModal .mgmt-modal-card {
    width: min(1180px, calc(100vw - 40px)) !important;
    max-width: 1180px !important;

    max-height: calc(100vh - 40px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;
}


/* privilege layout: 3-column lower section */

.mgmt-privilege-hierarchy {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    align-items: start;
}


/* MAP */

.mgmt-privilege-group[
    data-privilege-group="map"
] {
    grid-column: span 1;
}


/* VESSELS gets remaining width */

.mgmt-privilege-group[
    data-privilege-group="vessel"
] {
    grid-column: span 2 !important;
}


/* lower groups */

.mgmt-privilege-group[
    data-privilege-group="certificate"
],
.mgmt-privilege-group[
    data-privilege-group="management"
],
.mgmt-privilege-group[
    data-privilege-group="report"
] {
    grid-column: span 1;
}


/* keep action buttons visible */

#mgmtModal .mgmt-modal-actions {
    position: sticky;

    bottom: 0;

    z-index: 5;

    padding: 12px 0 4px;

    background: #061713;

    border-top:
        1px solid rgba(255,255,255,.08);
}


/* responsive */

@media (max-width: 1050px) {

    .mgmt-privilege-hierarchy {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .mgmt-privilege-group[
        data-privilege-group="vessel"
    ] {
        grid-column: 1 / -1 !important;
    }
}



/* =========================================================
   ROBUST ACCESS RESTRICTED TOAST
========================================================= */

.robust-access-toast {
    position: fixed;

    right: 24px;
    bottom: 28px;

    z-index: 999999;

    width: min(
        380px,
        calc(100vw - 48px)
    );

    padding: 14px 16px;

    box-sizing: border-box;

    border:
        1px solid rgba(
            255, 184, 77, .50
        );

    border-radius: 6px;

    background:
        rgba(
            15, 25, 20, .98
        );

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.40);

    opacity: 0;

    transform:
        translateY(15px);

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.robust-access-toast.show {
    opacity: 1;

    transform:
        translateY(0);
}


.robust-access-toast-title {
    margin-bottom: 5px;

    color: #ffb84d;

    font-size: 13px !important;
    font-weight: 700;

    letter-spacing: .35px;
}


.robust-access-toast-message {
    color:
        rgba(
            255,255,255,.88
        );

    font-size: 13px !important;
    line-height: 1.4;
}



/* =========================================================
   ROBUST ACCESS TOAST — CENTERED
========================================================= */

.robust-access-toast {
    left: 50% !important;
    right: auto !important;

    top: 50% !important;
    bottom: auto !important;

    transform:
        translate(-50%, -45%) !important;

    width: min(
        420px,
        calc(100vw - 48px)
    ) !important;

    text-align: center;
}


.robust-access-toast.show {
    transform:
        translate(-50%, -50%) !important;
}



/* =========================================================
   PHASE 1A
   WAYPOINT UI STANDARDIZATION — FINAL
   Minimum text size: 12px
========================================================= */


/* ---------------------------------------------------------
   1. STANDARD TELEMETRY / HISTORICAL WAYPOINT POPUP
--------------------------------------------------------- */

.voyage-telemetry-popup .leaflet-popup-content-wrapper {
    border-radius: 8px !important;
}

.voyage-telemetry-popup .leaflet-popup-content {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;

    margin: 14px 28px 14px 16px !important;

    font-size: 12px !important;
    line-height: 1.45 !important;
}

.voyage-telemetry-popup .leaflet-popup-content *,
.voyage-telemetry-popup div,
.voyage-telemetry-popup span,
.voyage-telemetry-popup small,
.voyage-telemetry-popup label {
    font-size: 12px !important;
}

.voyage-telemetry-popup strong,
.voyage-telemetry-popup b {
    font-size: 14px !important;
}


/* ---------------------------------------------------------
   2. OVERLAP SELECTOR POPUPS

   Keep these slightly narrower than telemetry because
   their purpose is only selecting overlapping points.
--------------------------------------------------------- */

.overlap-report-popup .leaflet-popup-content,
.pixel-overlap-popup .leaflet-popup-content {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;

    margin: 0 !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}

.overlap-selector,
.pixel-overlap-selector {
    width: 280px !important;
    min-width: 280px !important;

    font-size: 12px !important;
}


/* All selector text minimum 12px */

.overlap-selector *,
.pixel-overlap-selector * {
    font-size: 12px !important;
    line-height: 1.35 !important;
}


/* Selector heading */

.overlap-selector-heading,
.pixel-overlap-header {
    padding: 10px 12px !important;
}

.overlap-selector-heading strong,
.pixel-overlap-header strong {
    font-size: 14px !important;
}

.overlap-selector-heading small,
.pixel-overlap-header small {
    font-size: 12px !important;
    letter-spacing: .4px !important;
}


/* ---------------------------------------------------------
   3. VOYAGE ROUTE WAYPOINT LABELS
--------------------------------------------------------- */

.robust-vr-waypoint-label,
.leaflet-tooltip.robust-vr-waypoint-label,
.vrf-label {
    font-size: 12px !important;
    line-height: 1.3 !important;

    padding: 4px 7px !important;
}


/* ---------------------------------------------------------
   4. VOYAGE ROUTE START / END SELECTION
--------------------------------------------------------- */

.vr-selection-result,
.vr-selection-result *,
.vr-selection-result span {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.vr-selection-result {
    padding: 9px 10px !important;
}

.vr-selection-result strong {
    font-size: 13px !important;
}


/* ---------------------------------------------------------
   5. WAYPOINT TOOLTIP
--------------------------------------------------------- */

.robust-voyage-waypoint + .leaflet-tooltip,
.robust-return-waypoint + .leaflet-tooltip,
.leaflet-tooltip {
    font-size: 12px;
}


/* ---------------------------------------------------------
   6. CLOSE BUTTON
--------------------------------------------------------- */

.voyage-telemetry-popup .leaflet-popup-close-button,
.overlap-report-popup .leaflet-popup-close-button,
.pixel-overlap-popup .leaflet-popup-close-button {
    width: 24px !important;
    height: 24px !important;

    line-height: 22px !important;

    font-size: 20px !important;

    top: 5px !important;
    right: 6px !important;
}


/* ---------------------------------------------------------
   7. MOBILE / SMALL VIEWPORT SAFETY
--------------------------------------------------------- */

@media (max-width: 520px) {

    .voyage-telemetry-popup .leaflet-popup-content {
        width: min(
            330px,
            calc(100vw - 80px)
        ) !important;

        min-width: 0 !important;
    }

    .overlap-report-popup .leaflet-popup-content,
    .pixel-overlap-popup .leaflet-popup-content,
    .overlap-selector,
    .pixel-overlap-selector {
        width: min(
            280px,
            calc(100vw - 80px)
        ) !important;

        min-width: 0 !important;
    }
}



/* =========================================================
   PHASE 1A.3
   FINAL MAP UI TYPOGRAPHY / ALIGNMENT STANDARD
========================================================= */


/* =========================================================
   GENERAL MAP POPUP STANDARD
========================================================= */

.leaflet-popup-content {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}


/* Normal text inside map popups = REGULAR */

.leaflet-popup-content span,
.leaflet-popup-content small,
.leaflet-popup-content label,
.leaflet-popup-content p,
.leaflet-popup-content div {
    font-weight: 400;
}


/* =========================================================
   VESSEL INFO
========================================================= */

#vesselQuickInfo {
    font-size: 12px !important;
}


/* all ordinary text */

#vesselQuickInfo .wv-label,
#vesselQuickInfo .wv-value,
#vesselQuickInfo .wv-sn,
#vesselQuickInfo .wv-imo,
#vesselQuickInfo .wv-time,
#vesselQuickInfo .wv-heading-value {
    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;
}


/* Vessel Name = TITLE */

#vesselQuickInfo .wv-name {
    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
}


/* readable spacing */

#vesselQuickInfo .vessel-info-item {
    line-height: 1.4 !important;
}


/* =========================================================
   TELEMETRY POINT
   Overlapping Report Selector
========================================================= */

.overlap-selector,
.pixel-overlap-selector {
    font-size: 12px !important;
}


/* HEADER */

.overlap-selector-heading small,
.pixel-overlap-header small {
    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
    letter-spacing: .25px !important;
}


/* secondary heading */

.overlap-selector-heading strong,
.pixel-overlap-header strong {
    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;
}


/* report rows */

.overlap-report-row,
.pixel-report-choice {
    display: grid !important;

    grid-template-columns:
        minmax(80px, .8fr)
        minmax(120px, 1.5fr)
        minmax(58px, .6fr);

    align-items: center;

    column-gap: 10px;
}


/* all row text regular */

.overlap-report-row *,
.pixel-report-choice * {
    font-size: 12px !important;
    font-weight: 400 !important;
}


/* left column */

.overlap-report-direction,
.pixel-report-type {
    text-align: left !important;
}


/* timestamp */

.overlap-report-time,
.pixel-report-choice > span:nth-child(2) {
    text-align: left !important;
}


/* numeric speed */

.overlap-report-row > strong,
.pixel-report-choice > strong {
    text-align: right !important;

    font-size: 12px !important;
    font-weight: 400 !important;
}


/* =========================================================
   TELEMETRY REPORT
========================================================= */

.voyage-popup {
    font-size: 12px !important;
}


/* WINDOW TITLE */

.voyage-popup-header small {
    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    letter-spacing: .25px !important;
}


/* ID / timestamp = regular */

.voyage-popup-header strong,
.voyage-popup-header span {
    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;
}


/* SECTION TITLES
   GPS / RPM / TANK LEVEL / etc.
*/

.voyage-popup-section > small {
    display: block;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
}


/* =========================================================
   TELEMETRY DATA
========================================================= */

.voyage-gps-grid,
.voyage-mini-grid {
    align-items: start;
}


.voyage-gps-grid > div,
.voyage-mini-item {
    display: grid;

    grid-template-columns:
        minmax(60px, 1fr)
        minmax(70px, auto);

    align-items: baseline;

    column-gap: 10px;
}


/* label */

.voyage-gps-grid span,
.voyage-mini-item span {
    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: left !important;

    line-height: 1.4 !important;
}


/* value */

.voyage-gps-grid strong,
.voyage-mini-item strong {
    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: right !important;

    line-height: 1.4 !important;

    font-variant-numeric:
        tabular-nums;
}


/* TOTAL / SUMMARY VALUES */

.voyage-popup-total,
.voyage-popup-total * {
    font-size: 12px !important;
    font-weight: 400 !important;
}


/* If total has a structural heading only */

.voyage-popup-total > span:first-child {
    font-size: 13px !important;
    font-weight: 700 !important;
}


/* =========================================================
   VOYAGE WAYPOINT
========================================================= */

.robust-vr-waypoint-label,
.leaflet-tooltip.robust-vr-waypoint-label,
.vrf-label {
    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: 1.35 !important;

    padding: 4px 7px !important;
}


/* start/end selection */

.vr-selection-result,
.vr-selection-result span {
    font-size: 12px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;
}


.vr-selection-result strong {
    font-size: 12px !important;
    font-weight: 400 !important;
}


/* =========================================================
   POPUP WINDOW SPACING
========================================================= */

.voyage-telemetry-popup
.leaflet-popup-content {
    min-width: 320px !important;
    max-width: 340px !important;

    margin:
        14px 26px 14px 16px !important;
}


.overlap-report-popup
.leaflet-popup-content,
.pixel-overlap-popup
.leaflet-popup-content {
    min-width: 280px !important;
    max-width: 300px !important;

    margin: 0 !important;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.leaflet-container
.leaflet-popup-close-button {
    width: 24px !important;
    height: 24px !important;

    line-height: 22px !important;

    font-size: 20px !important;
    font-weight: 400 !important;

    top: 5px !important;
    right: 6px !important;
}


/* =========================================================
   NUMERIC CONSISTENCY
========================================================= */

.voyage-popup strong,
.overlap-report-row strong,
.pixel-report-choice strong {
    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   END PHASE 1A.3
========================================================= */



/* =========================================================
   PHASE 1A.4
   TELEMETRY LAYOUT CORRECTION
========================================================= */


/* ---------------------------------------------------------
   TELEMETRY POINT
   Direction remains internal data, but is not displayed.
--------------------------------------------------------- */

.overlap-report-direction,
.pixel-report-type {
    display: none !important;
}


/* Once direction is hidden:
   timestamp | speed
*/

.overlap-report-row,
.pixel-report-choice {
    display: grid !important;

    grid-template-columns:
        minmax(170px, 1fr)
        minmax(65px, auto) !important;

    column-gap: 14px !important;

    align-items: center !important;

    width: 100% !important;
    box-sizing: border-box !important;
}


.overlap-report-time,
.pixel-report-choice > span:not(.pixel-report-type) {
    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: left !important;
    white-space: nowrap !important;
}


.overlap-report-row > strong,
.pixel-report-choice > strong {
    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: right !important;
    justify-self: end !important;

    white-space: nowrap !important;
}


/* Give the two-column selector enough physical width */

.overlap-selector,
.pixel-overlap-selector {
    width: 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;
}


.overlap-report-popup .leaflet-popup-content,
.pixel-overlap-popup .leaflet-popup-content {
    width: 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   TELEMETRY REPORT
   Parent controls ME/Tank column placement.
--------------------------------------------------------- */

.voyage-mini-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    column-gap: 14px !important;
    row-gap: 6px !important;

    width: 100% !important;
}


/* Each mini item = ONE label/value pair */

.voyage-mini-item {
    display: flex !important;

    align-items: baseline !important;
    justify-content: space-between !important;

    gap: 8px !important;

    min-width: 0 !important;
    width: 100% !important;

    padding: 4px 6px !important;

    box-sizing: border-box !important;
}


.voyage-mini-item > span {
    flex: 0 0 auto !important;

    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: left !important;

    white-space: nowrap !important;
}


.voyage-mini-item > strong {
    flex: 0 0 auto !important;

    margin-left: auto !important;

    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: right !important;

    white-space: nowrap !important;

    font-variant-numeric: tabular-nums !important;
}


/* ---------------------------------------------------------
   GPS
   Two balanced label/value groups.
--------------------------------------------------------- */

.voyage-gps-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    column-gap: 14px !important;
    row-gap: 6px !important;

    width: 100% !important;
}


.voyage-gps-grid > div {
    display: flex !important;

    align-items: baseline !important;
    justify-content: space-between !important;

    gap: 8px !important;

    min-width: 0 !important;
}


.voyage-gps-grid > div > span {
    flex: 0 0 auto !important;

    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: left !important;
}


.voyage-gps-grid > div > strong {
    flex: 0 0 auto !important;

    margin-left: auto !important;

    font-size: 12px !important;
    font-weight: 400 !important;

    text-align: right !important;

    white-space: nowrap !important;

    font-variant-numeric: tabular-nums !important;
}


/* ---------------------------------------------------------
   TOTAL CONSUMED
   Data row = regular weight.
--------------------------------------------------------- */

.voyage-consumed,
.voyage-popup-total {
    display: flex !important;

    align-items: baseline !important;
    justify-content: space-between !important;

    gap: 20px !important;
}


.voyage-consumed *,
.voyage-popup-total * {
    font-size: 12px !important;
    font-weight: 400 !important;
}


.voyage-consumed > strong,
.voyage-popup-total > strong {
    margin-left: auto !important;

    text-align: right !important;

    white-space: nowrap !important;
}


/* =========================================================
   END PHASE 1A.4
========================================================= */



/* =========================================================
   ROBUST VMS - HEADER USER / LOGOUT
   Phase 1B
========================================================= */

.user-panel {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.user-panel-identity small {
    font-size: 12px;
    font-weight: 400;
}

.user-panel-identity strong {
    font-size: 12px;
}

.user-menu {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 190px;

    padding: 10px;

    background: #071b16;

    border:
        1px solid
        rgba(53, 255, 166, 0.35);

    border-radius: 6px;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.45);

    z-index: 10000;
}

.user-menu[hidden] {
    display: none !important;
}

.user-menu-info {
    padding: 5px 7px 10px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.10);
}

.user-menu-info strong {
    display: block;

    font-size: 12px;
    line-height: 1.4;
}

.user-menu-info small {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    font-weight: 400;

    opacity: 0.65;
}

.user-logout-button {
    width: 100%;

    margin-top: 9px;
    padding: 8px 10px;

    text-align: left;

    font-size: 12px;
    font-weight: 400;

    color: #ffffff;

    background: transparent;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 4px;

    cursor: pointer;
}

.user-logout-button:hover {
    color: #35ffa6;

    border-color:
        rgba(53, 255, 166, 0.55);

    background:
        rgba(53, 255, 166, 0.06);
}


/* =========================================================
   PHASE 1B.2
   HEADER USER MENU VISIBILITY FIX
========================================================= */

.topbar,
.topbar-right,
.user-panel {
    overflow: visible !important;
}


#headerUserPanel {
    position: relative !important;
    z-index: 20000 !important;
}


#headerUserMenu {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    right: 0 !important;

    z-index: 999999 !important;

    overflow: visible !important;
}


#headerUserMenu:not([hidden]) {
    display: block !important;
}



/* =========================================================
   PHASE 1B.3
   HEADER USER MENU PORTAL
========================================================= */

body > #headerUserMenu {
    position: fixed !important;

    right: auto !important;
    bottom: auto !important;

    width: 190px !important;

    z-index: 2147483647 !important;

    overflow: visible !important;
}


body > #headerUserMenu:not([hidden]) {
    display: block !important;
}



/* =========================================================
   PHASE 1B FINAL
   DIRECT HEADER LOGOUT
========================================================= */

#headerUserPanel {
    cursor: default !important;
}


.header-logout-direct {
    height: 30px;

    margin-left: 8px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.72);

    background:
        transparent;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius: 4px;

    font-size: 12px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;
}


.header-logout-direct:hover {
    color: #39ff88;

    border-color:
        rgba(57,255,136,.55);

    background:
        rgba(57,255,136,.06);
}



/* =========================================================
   HEADER LOGOUT — NEON GREEN STANDARD
========================================================= */

.header-logout-direct {
    color: rgba(255,255,255,.82) !important;

    border:
        1px solid rgba(57,255,136,.75) !important;

    background:
        rgba(57,255,136,.025) !important;

    box-shadow:
        0 0 6px rgba(57,255,136,.16);

    font-weight: 400 !important;
}


.header-logout-direct:hover {
    color: #39ff88 !important;

    border-color:
        #39ff88 !important;

    background:
        rgba(57,255,136,.07) !important;

    box-shadow:
        0 0 8px rgba(57,255,136,.30);
}



/* =========================================================
   ROBUST ACCESS RESTRICTED — DARK GREEN THEME
========================================================= */

.robust-access-toast {
    z-index: 9999999 !important;

    border:
        1px solid rgba(0, 255, 153, .45) !important;

    background:
        linear-gradient(
            180deg,
            rgba(5, 31, 24, .99),
            rgba(3, 22, 17, .99)
        ) !important;

    box-shadow:
        0 14px 36px
        rgba(0, 0, 0, .55) !important;
}

.robust-access-toast-title {
    color: #32ff9b !important;
}

.robust-access-toast-message {
    color:
        rgba(235, 255, 247, .90) !important;
}


/* =========================================================
   MAP TRACKING READABILITY FIX - 2026-08-29
   Final override
========================================================= */

/* Marker popup */
#map .leaflet-popup-content {
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-width: 170px !important;
}

#map .leaflet-popup-content strong:first-child,
#map .leaflet-popup-content b:first-child {
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* Right vessel list */
.fleet-vessel-name {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.fleet-vessel-report {
    font-size: 10px !important;
    line-height: 1.3 !important;
}

.fleet-vessel-state {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .35px !important;
}

/* Slightly larger ship symbol in list */
.fleet-vessel-mini-marker,
.fleet-vessel-mini-marker svg {
    width: 17px !important;
    height: 21px !important;
}

/* Bottom Vessel Quick Info */
#vesselQuickInfo {
    font-size: 14px !important;
}

#vesselQuickInfo .wv-label {
    font-size: 11px !important;
    line-height: 1.3 !important;
}

#vesselQuickInfo .wv-value,
#vesselQuickInfo .wv-sn {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

#vesselQuickInfo .wv-value {
    font-weight: 600 !important;
}



/* =========================================================
   MAP TRACKING VISUAL SCALE FIX - 2026-08-29
========================================================= */

/* ---------------------------------------------------------
   MAP VESSEL MARKER - 2X
--------------------------------------------------------- */

.fleet-map-marker,
.fleet-map-marker svg {
    width: 36px !important;
    height: 36px !important;
}

.fleet-map-marker {
    transform-origin: 50% 50% !important;
}

/* ---------------------------------------------------------
   RIGHT VESSEL LIST - LARGER
--------------------------------------------------------- */

.fleet-vessel-row {
    min-height: 62px !important;
    padding: 10px 10px !important;
}

.fleet-vessel-main {
    gap: 4px !important;
}

.fleet-vessel-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.fleet-vessel-report {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.fleet-vessel-state {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .45px !important;
}

.fleet-vessel-mini-marker,
.fleet-vessel-mini-marker svg {
    width: 24px !important;
    height: 30px !important;
}

/* Vessel list search */
.fleet-vessel-search input {
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   MAP POPUP
--------------------------------------------------------- */

#map .leaflet-popup-content {
    font-size: 15px !important;
    line-height: 1.5 !important;
    min-width: 190px !important;
}

#map .leaflet-popup-content strong:first-child,
#map .leaflet-popup-content b:first-child {
    font-size: 16px !important;
}

/* ---------------------------------------------------------
   DARK MAP
   Same OSM tiles, visually transformed.
--------------------------------------------------------- */

body:not(.light-map) #map .leaflet-tile-pane {
    filter:
        brightness(.48)
        contrast(1.18)
        saturate(.72)
        hue-rotate(175deg)
        invert(.88);
}

body.light-map #map .leaflet-tile-pane {
    filter: none !important;
}



/* =========================================================
   FINAL MAP TRACKING VISUAL FIX - 2026-08-29
========================================================= */

/* ---------------------------------------------------------
   MAP VESSEL ICON
   Previous 36px -> 18px = 50%
--------------------------------------------------------- */

.fleet-map-marker,
.fleet-map-marker svg {
    width: 18px !important;
    height: 18px !important;
}

.fleet-map-marker {
    transform-origin: 50% 50% !important;
}


/* ---------------------------------------------------------
   RIGHT FLEET PANEL READABILITY
--------------------------------------------------------- */

.fleet-vessel-row {
    min-height: 56px !important;
    padding: 8px 9px !important;
}

.fleet-vessel-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.fleet-vessel-report {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.fleet-vessel-state {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .35px !important;
}

.fleet-vessel-mini-marker,
.fleet-vessel-mini-marker svg {
    width: 18px !important;
    height: 22px !important;
}


/* ---------------------------------------------------------
   LIGHT MAP
   Original OpenStreetMap appearance
--------------------------------------------------------- */

.robust-light-tiles {
    filter: none !important;
}


/* ---------------------------------------------------------
   DARK MAP
   Same OSM source, dedicated dark rendering
--------------------------------------------------------- */

.robust-dark-tiles {
    filter:
        invert(.90)
        hue-rotate(175deg)
        brightness(.72)
        contrast(1.15)
        saturate(.65) !important;
}


/*
   Kill previous global tile filters.
   Dark/light are now controlled per tile layer.
*/
body:not(.light-map) #map .leaflet-tile-pane,
body.light-map #map .leaflet-tile-pane {
    filter: none !important;
}


/* FINAL VESSEL MAP MARKER SIZE */
.fleet-map-marker,
.fleet-map-marker svg {
    width: 24px !important;
    height: 24px !important;
}

/* =========================================================
   VESSEL DETAIL — REAL PING / DATA AVAILABILITY
   ========================================================= */

.vd-ping-bars {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 18px;
    bottom: 48px;

    display: flex;
    align-items: stretch;
    gap: 2px;
}

.vd-ping-bar {
    flex: 1 1 0;
    min-width: 2px;

    border-radius: 2px 2px 0 0;

    background:
        rgba(255,255,255,.08);
}

.vd-ping-bar.ok {
    background:
        rgba(57,255,136,.72);
}

.vd-ping-bar.missed {
    background:
        rgba(255,82,82,.72);
}

.vd-ping-bar.partial {
    background:
        rgba(255,194,60,.78);
}

.vd-ping-axis {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 27px;

    display: flex;
    justify-content: space-between;

    color:
        rgba(255,255,255,.32);

    font-size: 8px;
}

.vd-ping-legend {
    position: absolute;
    left: 10px;
    bottom: 7px;

    display: flex;
    align-items: center;
    gap: 12px;

    color:
        rgba(255,255,255,.40);

    font-size: 8px;
}

.vd-ping-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vd-ping-legend i {
    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 1px;
}

.vd-ping-legend i.ok {
    background:
        rgba(57,255,136,.72);
}

.vd-ping-legend i.missed {
    background:
        rgba(255,82,82,.72);
}

.vd-ping-legend i.partial {
    background:
        rgba(255,194,60,.78);
}

.vd-ping-empty {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.34);

    font-size: 9px;
    letter-spacing: .02em;
}


/* PING DAILY GRAPH — NEON GREEN LINE */
.vd-ping-line {
    stroke: #39ff88 !important;
    stroke-width: 2.5;
    filter:
        drop-shadow(0 0 3px rgba(57,255,136,.75));
}


/* ==========================================================
   PROCESSED DATA - READABILITY
   ========================================================== */

.vd-overview-grid .vd-placeholder {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(225, 238, 233, 0.72);
}

.vd-overview-grid .vd-panel-title {
    opacity: 1;
}


/* Processed Data - uniform primary data brightness */
[data-processed-engine-performance] strong,
[data-processed-fuel-performance] strong {
    color: rgba(248, 252, 250, 0.98) !important;
    opacity: 1 !important;
}

[data-processed-engine-performance] small,
[data-processed-fuel-performance] small {
    color: rgba(225, 238, 233, 0.82) !important;
}