/* Outer wrapper for each vehicle card */
.GTAssetCard {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    padding-left: 5px;
}

    /* Left vertical state bar */
    .GTAssetCard::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
        background: var(--state-color, #3b82f6);
        box-shadow: 0 0 16px color-mix(in srgb, var(--state-color, #3b82f6), transparent 65%);
    }

    /* Nudge existing content so it doesn't sit under the left bar */
    .GTAssetCard .GTAssetDiv1,
    .GTAssetCard .GTAssetDiv2,
    .GTAssetCard .GTAssetMenuBar,
    .GTAssetCard .GTAssetActBar {
        margin-left: 4px;
    }

.GTAssetFreshnessFill {
    height: 100%;
    background: var(--state-color);
    transition: width 0.6s ease;
}

.state-stalejourney .GTAssetFreshnessFill {
    opacity: .95;
}

/* Bottom freshness bar track */
.GTAssetFreshnessBar {
    float:left; 
    width:100%;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
}

/* Bottom freshness fill */
.GTAssetFreshnessFill {
    height: 100%;
    background: var(--state-color, #3b82f6);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 14px color-mix(in srgb, var(--state-color, #3b82f6), transparent 60%);
}

/* Optional: pulse the freshness bar when live */
.state-live .GTAssetFreshnessFill {
    animation: gtPulse 2s ease-in-out infinite;
}

@keyframes gtPulse {
    0%,100% {
        opacity: .7;
    }

    50% {
        opacity: 1;
    }
}




/* ROW */
.GTLineRow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.02);
    color: var(--AssetTextColor, #e5e7eb);
}

    /* optional zebra if you apply nth-child in the parent list */
    .GTLineRow:nth-child(even) {
        background: rgba(255,255,255,0.02);
    }

    /* hover: “sexy” but subtle */
    .GTLineRow:hover {
        background: rgba(255,255,255,0.05);
    }

    /* LEFT VERTICAL ACCENT */
    .GTLineRow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: var(--state-color, #6b7280);
        opacity: 0.95;
    }

/* CELLS */
.GTLineCell {
    min-width: 0; /* critical for truncation in flex */
    display: flex;
    align-items: center;
}

.GTLineText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* LEFT: icon + dot */
.GTLineLeft {
    flex: 0 0 52px;
    gap: 8px;
}

.GTLineIcon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.9;
}

.GTLineDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--state-color, #6b7280);
    box-shadow: 0 0 14px color-mix(in srgb, var(--state-color, #6b7280), transparent 55%);
}

/* column sizing (tweak to match your screenshot proportions) */
.GTLineName {
    flex: 0 0 180px;
}

.GTLineDriver {
    flex: 0 0 180px;
    opacity: 0.95;
}

.GTLineStatus {
    flex: 0 0 160px;
    opacity: 0.9;
}

.GTLineTime {
    flex: 0 0 170px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.GTLineIgn {
    flex: 0 0 140px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.GTLineLoc {
    flex: 1 1 auto;
    opacity: 0.9;
}

.GTLineSpeed {
    flex: 0 0 80px;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

.GTLineHead {
    flex: 0 0 90px;
    opacity: 0.85;
}

/* optional: make stopped less “shouty” */
.GTLineRow.stopped {
    --state-color: #ef4444;
}

.GTLineRow.journey {
    --state-color: #00c98e;
}

.GTLineRow.nospeed {
    --state-color: #f59e0b;
}

.GTLineRow.sleep {
    --state-color: #3b82f6;
}


/* Important: make sizing consistent everywhere */
* {
    box-sizing: border-box;
}

/* One shared grid template for BOTH header + rows */
.GTGridRow {
    position: relative;
    display: grid;
    align-items: center;
    /* tweak widths here once, everything lines up */
    grid-template-columns: 52px /* left (icon+dot) */
    180px /* name */
    180px /* driver */
    160px /* status */
    170px /* last update */
    140px /* time since stop */
    1fr /* location */
    80px /* speed */
    90px; /* heading */

    column-gap: 10px;
    height: 34px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    /* Left vertical accent */
    .GTGridRow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: var(--state-color, #6b7280);
    }

/* Row visuals */
/*.GTGridRow {*/
    /*background: rgba(255,255,255,0.02);
    color: var(--AssetTextColor, #e5e7eb);*/
/*}

    .GTGridRow:hover {
        background: rgba(255,255,255,0.05);
    }*/

/* Header style */
.GTGridHeader {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 30px;
    background: var(--surface-2);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    /*color: #9ca3af;*/
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Truncation */
.GTLineText {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Align numeric cols right */
.c-speed, .c-ign {
    justify-self: end;
}

/* Left cell contents */
.c-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.GTLineIcon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .9;
}

.GTLineDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--state-color, #6b7280);
    box-shadow: 0 0 14px color-mix(in srgb, var(--state-color, #6b7280), transparent 55%);
}


/* HEADER MUST BE GRID, NOT FLEX */
.GTGridHeader {
    /*display: grid !important;*/ /* overrides ShowFlex */
    align-items: center;
    grid-template-columns: 52px 180px 180px 160px 170px 140px 1fr 80px 90px;
    column-gap: 10px;
    height: 30px;
    padding: 0 10px;
    background: rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    /* prevent header text from wrapping / squeezing weirdly */
    .GTGridHeader > div {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Right align numeric headers too */
    .GTGridHeader .c-speed,
    .GTGridHeader .c-ign {
        justify-self: end;
    }