/* ============================================================
   RXO COMPLETION ALERT DASHBOARD
   CONSOLIDATED OPERATOR UI
   ============================================================ */

:root {
    --rxo-bg: #07100B;
    --rxo-sidebar: #040906;
    --rxo-panel: #101A14;
    --rxo-panel-alt: #15241B;
    --rxo-header: #192A20;

    --rxo-border: #3A5142;
    --rxo-border-strong: #4D6755;

    --rxo-green: #00E676;
    --rxo-green-dark: #00C968;

    --rxo-text: #FFFFFF;
    --rxo-muted: #BFCBC4;
}

/* ============================================================
   GLOBAL
   ============================================================ */

html,
body {
    margin: 0 !important;

    background: var(--rxo-bg) !important;
    color: var(--rxo-text) !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 17px !important;
}

body {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(0,230,118,.055),
            transparent 24%
        ),
        var(--rxo-bg) !important;
}

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

.sidebar {
    width: 235px !important;

    padding: 22px 12px !important;

    background:
        linear-gradient(
            180deg,
            #030805,
            #06110A
        ) !important;

    border-right:
        1px solid rgba(0,230,118,.23) !important;
}

.content {
    margin-left: 235px !important;

    padding:
        0 20px 32px !important;
}

.brand {
    padding:
        6px 14px 30px !important;

    color:
        #FFFFFF !important;

    font-size:
        44px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -3px !important;
}

.nav-item {
    min-height:
        48px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        11px 15px !important;

    margin:
        4px 0 !important;

    border-radius:
        6px !important;

    color:
        #D4DDD8 !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;
}

.nav-item:hover {
    background:
        rgba(0,230,118,.08) !important;

    color:
        #FFFFFF !important;
}

.nav-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(0,230,118,.25),
            rgba(0,230,118,.06)
        ) !important;

    border:
        1px solid rgba(0,230,118,.35) !important;

    border-left:
        4px solid var(--rxo-green) !important;

    color:
        #FFFFFF !important;
}

#nav-overview::before { content: "â—†"; }
#nav-alerts::before { content: "●"; }
#nav-map::before { content: "⌖"; }
#nav-routes::before { content: "⇅"; }
#nav-carriers::before { content: "â– "; }
#nav-data-quality::before { content: "≡"; }

#nav-overview::before,
#nav-alerts::before,
#nav-map::before,
#nav-routes::before,
#nav-carriers::before,
#nav-data-quality::before {
    display:
        inline-block;

    width:
        27px;

    color:
        #DCE5DF;

    font-size:
        16px;

    font-weight:
        900;
}

.sidebar-status {
    padding-top:
        16px !important;

    border-top:
        1px solid #294032 !important;
}

.status-title {
    color:
        var(--rxo-green) !important;

    font-size:
        15px !important;

    font-weight:
        900 !important;
}

.status-line {
    color:
        #BCC9C1 !important;

    font-size:
        13px !important;

    line-height:
        1.55 !important;

    font-weight:
        600 !important;
}

/* ============================================================
   HEADER
   ============================================================ */

.topbar {
    margin:
        0 -20px 13px !important;

    min-height:
        92px !important;

    padding:
        16px 20px !important;

    display:
        grid !important;

    grid-template-columns:
        380px minmax(800px, 1fr) 170px !important;

    align-items:
        center !important;

    gap:
        20px !important;

    background:
        linear-gradient(
            100deg,
            #040906,
            #09140D 72%
        ) !important;

    border-bottom:
        1px solid rgba(0,230,118,.26) !important;
}

.topbar h1 {
    margin:
        0 !important;

    color:
        #FFFFFF !important;

    font-size:
        32px !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.6px !important;
}

.live-row {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    margin-top:
        7px !important;
}

.live-pill {
    padding:
        5px 10px !important;

    background:
        #07813E !important;

    border:
        1px solid #18C96C !important;

    border-radius:
        5px !important;

    color:
        #FFFFFF !important;

    font-size:
        13px !important;

    font-weight:
        900 !important;
}

.last-updated {
    color:
        #D3DDD7 !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;
}

.auto-refresh-status {
    display:
        flex !important;

    justify-content:
        flex-end !important;

    align-items:
        center !important;

    gap:
        8px !important;
}

.refresh-icon {
    color:
        var(--rxo-green) !important;

    font-size:
        31px !important;

    font-weight:
        900 !important;
}

.refresh-title {
    color:
        #FFFFFF !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;
}

.refresh-time {
    color:
        #C7D3CC !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;
}

/* ============================================================
   FILTER BAR
   ============================================================ */

.filters {
    display:
        grid !important;

    grid-template-columns:
        1fr 1fr 1fr 1.15fr 1.15fr 1.15fr !important;

    gap:
        10px !important;
}

.filter .Select-control,
.DateInput_input {
    height:
        48px !important;

    min-height:
        48px !important;

    background:
        #142119 !important;

    border:
        1px solid #496151 !important;

    border-radius:
        6px !important;

    color:
        #FFFFFF !important;
}

.filter .Select-placeholder,
.filter .Select-value-label,
.filter .Select-input > input,
.DateInput_input {
    font-size:
        15px !important;

    font-weight:
        700 !important;
}

.filter .Select-placeholder,
.DateInput_input::placeholder {
    color:
        #D2DDD6 !important;

    opacity:
        1 !important;
}

.filter .Select-value-label,
.filter .Select-input > input,
.DateInput_input {
    color:
        #FFFFFF !important;
}

.filter .Select-control:hover,
.DateInput_input:hover,
.DateInput_input:focus {
    border-color:
        var(--rxo-green) !important;

    box-shadow:
        0 0 0 1px rgba(0,230,118,.15) !important;
}

/* ============================================================
   KPI CARDS
   ============================================================ */

.metric-grid {
    gap:
        11px !important;

    margin-bottom:
        11px !important;
}

.metric-card {
    min-height:
        118px !important;

    padding:
        17px 18px !important;

    background:
        linear-gradient(
            145deg,
            #132018,
            #0E1812
        ) !important;

    border:
        1px solid var(--rxo-border) !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;
}

.metric-card::before {
    height:
        2px !important;

    background:
        linear-gradient(
            90deg,
            var(--rxo-green),
            transparent 75%
        ) !important;
}

.metric-label {
    color:
        #DBE4DF !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;
}

.metric-value {
    margin-top:
        7px !important;

    color:
        #FFFFFF !important;

    font-size:
        39px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;
}

.metric-helper {
    margin-top:
        7px !important;

    color:
        #B6C4BB !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;
}

#kpi-picture,
#kpi-precall,
#kpi-matched {
    color:
        var(--rxo-green) !important;
}

/* ============================================================
   ANALYTICS
   ============================================================ */

.chart-grid {
    grid-template-columns:
        .95fr 1.05fr 1.35fr !important;

    gap:
        11px !important;

    margin-bottom:
        11px !important;
}

.panel,
.table-panel {
    background:
        linear-gradient(
            145deg,
            #111D16,
            #0D1711
        ) !important;

    border:
        1px solid var(--rxo-border) !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;
}

.panel {
    padding:
        14px !important;
}

.panel h2 {
    margin:
        0 0 9px !important;

    color:
        #FFFFFF !important;

    font-size:
        20px !important;

    font-weight:
        900 !important;
}

.js-plotly-plot .plotly text {
    font-family:
        "Segoe UI", Arial, sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        650 !important;
}

/* ============================================================
   LIVE ALERTS WORK QUEUE
   ============================================================ */

.table-panel {
    padding:
        14px !important;
}

.table-heading {
    padding-bottom:
        7px !important;
}

.table-panel h2 {
    margin:
        0 !important;

    color:
        #FFFFFF !important;

    font-size:
        23px !important;

    font-weight:
        900 !important;
}

.table-summary {
    color:
        #D0DAD4 !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;
}

/* ============================================================
   TABLE HEADER
   ============================================================ */

#alerts-table th,
#alerts-table .dash-header {
    height:
        43px !important;

    padding:
        12px 10px !important;

    background:
        #192A20 !important;

    color:
        #FFFFFF !important;

    border-color:
        #486151 !important;

    font-size:
        16px !important;

    font-weight:
        900 !important;
}

/* ============================================================
   TABLE FILTERS
   ============================================================ */

#alerts-table .dash-filter {
    height:
        47px !important;

    background:
        #142219 !important;
}

#alerts-table .dash-filter input {
    min-height:
        36px !important;

    padding:
        7px 8px !important;

    background:
        #1A2B21 !important;

    color:
        #FFFFFF !important;

    border:
        1px solid #486151 !important;

    border-radius:
        4px !important;

    font-size:
        14px !important;

    font-weight:
        650 !important;
}

#alerts-table .dash-filter input::placeholder {
    color:
        #CCD7D0 !important;

    opacity:
        1 !important;
}

#alerts-table .dash-filter input:focus {
    border-color:
        var(--rxo-green) !important;
}

/* ============================================================
   TABLE BODY
   ============================================================ */

/*
   Important:
   background-color intentionally has NO !important.
   Dash style_data_conditional must remain able to apply
   Reason colors and new-alert highlighting.
*/

#alerts-table td,
#alerts-table .dash-cell {
    background-color:
        #101C15;

    color:
        #FFFFFF !important;

    border-color:
        #355040 !important;

    font-size:
        18px !important;

    font-weight:
        650 !important;

    line-height:
        1.45 !important;

    padding:
        13px 11px !important;

    vertical-align:
        middle !important;
}

#alerts-table tbody tr:nth-child(even) td {
    background-color:
        #17271D;
}

#alerts-table tbody tr:hover td {
    background-color:
        #254332;
}

/* ============================================================
   PRIMARY OPERATOR FIELDS
   ============================================================ */

#alerts-table .dash-cell[data-dash-column="SubmittedTime"],
#alerts-table .dash-cell[data-dash-column="Route"],
#alerts-table .dash-cell[data-dash-column="Stop"],
#alerts-table .dash-cell[data-dash-column="Carrier"],
#alerts-table .dash-cell[data-dash-column="OrderNumber"],
#alerts-table .dash-cell[data-dash-column="CustomerCity"],
#alerts-table .dash-cell[data-dash-column="CustomerState"] {
    font-weight:
        800 !important;
}

#alerts-table .dash-cell[data-dash-column="SubmittedTime"] {
    font-weight:
        900 !important;
}

#alerts-table .dash-cell[data-dash-column="CustomerCity"] {
    color:
        #F4FFF8 !important;

    font-weight:
        850 !important;
}

/* ============================================================
   REASON STATUS CELLS
   ============================================================ */

/*
   Color comes from Dash style_data_conditional.
   Do NOT set the background here.
*/

#alerts-table .dash-cell[data-dash-column="Reason"] {
    padding:
        7px 9px !important;

    color:
        #FFFFFF !important;

    border:
        1px solid rgba(255,255,255,.12) !important;

    border-radius:
        5px !important;

    font-size:
        15px !important;

    font-weight:
        900 !important;

    line-height:
        1.25 !important;

    text-align:
        center !important;
}

/* ============================================================
   COMPLIANCE
   ============================================================ */

#alerts-table .dash-cell[data-dash-column="Picture"],
#alerts-table .dash-cell[data-dash-column="precall30m"] {
    color:
        #20F477 !important;

    font-size:
        23px !important;

    font-weight:
        900 !important;

    text-align:
        center !important;
}

/* ============================================================
   NOTES
   ============================================================ */

#alerts-table .dash-cell[data-dash-column="Notes"] {
    min-width:
        420px !important;

    max-width:
        620px !important;

    color:
        #F4F8F5 !important;

    font-size:
        16px !important;

    font-weight:
        600 !important;

    line-height:
        1.45 !important;
}

#alerts-table .dash-cell[data-dash-column="Notes"] > div {
    display:
        -webkit-box !important;

    -webkit-line-clamp:
        2 !important;

    -webkit-box-orient:
        vertical !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}

/* ============================================================
   EXPORT / PAGINATION
   ============================================================ */

#alerts-table button.export {
    min-height:
        34px !important;

    padding:
        7px 14px !important;

    background:
        #00D875 !important;

    color:
        #031008 !important;

    border:
        1px solid #34F195 !important;

    border-radius:
        5px !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;
}

#alerts-table .previous-next-container {
    padding-top:
        8px !important;

    color:
        #FFFFFF !important;

    font-size:
        16px !important;

    font-weight:
        800 !important;
}

#alerts-table .previous-next-container button {
    min-width:
        33px !important;

    min-height:
        31px !important;

    margin:
        0 2px !important;

    background:
        #17271D !important;

    color:
        #FFFFFF !important;

    border:
        1px solid #415A49 !important;

    border-radius:
        4px !important;
}

#alerts-table .previous-next-container button:hover {
    background:
        #1F382A !important;

    border-color:
        var(--rxo-green) !important;
}

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

@media (max-width: 1450px) {

    .topbar {
        grid-template-columns:
            330px 1fr !important;
    }

    .auto-refresh-status {
        display:
            none !important;
    }
}

@media (max-width: 1200px) {

    .chart-grid {
        grid-template-columns:
            1fr 1fr !important;
    }

    .map-panel {
        grid-column:
            1 / -1 !important;
    }
}

@media (max-width: 800px) {

    .sidebar {
        display:
            none !important;
    }

    .content {
        margin-left:
            0 !important;
    }
}

/* ============================================================
   END CONSOLIDATED OPERATOR UI
   ============================================================ */


/* ============================================================
   RXO WAVE 2 - OPERATOR READABILITY
   ============================================================ */


/* ------------------------------------------------------------
   GLOBAL SCALE
   ------------------------------------------------------------ */

html,
body {
    font-size: 18px !important;
}


/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------ */

.nav-item {
    min-height: 52px !important;
    padding: 13px 16px !important;

    font-size: 16.5px !important;
    font-weight: 750 !important;
}

.status-title {
    font-size: 15px !important;
    font-weight: 900 !important;
}

.status-line {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}


/* ------------------------------------------------------------
   TOP HEADER
   ------------------------------------------------------------ */

.topbar h1 {
    font-size: 34px !important;
    font-weight: 900 !important;
}

.live-pill {
    font-size: 14px !important;
    font-weight: 900 !important;
}

.last-updated {
    font-size: 14px !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   GLOBAL FILTER CONTROLS
   ------------------------------------------------------------ */

.filter .Select-control,
.DateInput_input {
    min-height: 52px !important;
    height: 52px !important;
}

.filter .Select-placeholder,
.filter .Select-value-label,
.filter .Select-input > input,
.DateInput_input {
    font-size: 17px !important;
    font-weight: 700 !important;
}

.filter .Select-placeholder,
.DateInput_input::placeholder {
    color: #E4ECE7 !important;
    opacity: 1 !important;
}


/* ------------------------------------------------------------
   KPI CARDS
   ------------------------------------------------------------ */

.metric-card {
    min-height: 132px !important;
    padding: 19px 20px !important;
}

.metric-label {
    font-size: 15px !important;
    font-weight: 900 !important;
}

.metric-value {
    margin-top: 8px !important;

    font-size: 41px !important;
    font-weight: 900 !important;
}

.metric-helper {
    margin-top: 8px !important;

    color: #C0CCC5 !important;

    font-size: 14px !important;
    font-weight: 650 !important;
}


/* ------------------------------------------------------------
   ANALYTICS AREA
   ------------------------------------------------------------ */

.chart-grid {
    grid-template-columns:
        .95fr 1.08fr 1.40fr !important;

    gap: 14px !important;
}

.panel {
    padding: 17px !important;
}

.panel h2 {
    margin-bottom: 10px !important;

    font-size: 22px !important;
    font-weight: 900 !important;
}


/*
   Give the visualizations enough vertical room.
   Readability is more important than forcing the whole
   dashboard above the fold.
*/

#reason-chart,
#carrier-chart,
#map-chart {
    min-height: 455px !important;
    height: 455px !important;
}

#reason-chart .js-plotly-plot,
#carrier-chart .js-plotly-plot,
#map-chart .js-plotly-plot {
    height: 455px !important;
}


/* ------------------------------------------------------------
   MAP
   ------------------------------------------------------------ */

.map-panel {
    position: relative !important;
}

#map-chart {
    border-radius: 7px !important;
    overflow: hidden !important;
}


/*
   Plotly map navigation.

   This makes the toolbar highly visible when the operator
   moves the mouse over the map.
*/

#map-chart .modebar {
    top: 8px !important;
    left: 8px !important;
    right: auto !important;

    padding: 5px !important;

    background:
        rgba(7,16,11,.90) !important;

    border:
        1px solid rgba(0,230,118,.42) !important;

    border-radius:
        6px !important;
}

#map-chart .modebar-btn {
    padding: 5px 6px !important;
}

#map-chart .modebar-btn path {
    fill: #FFFFFF !important;
}

#map-chart .modebar-btn:hover path {
    fill: #00E676 !important;
}


/* ------------------------------------------------------------
   LIVE ALERTS HEADER
   ------------------------------------------------------------ */

.table-panel {
    padding: 18px !important;
}

.table-panel h2 {
    font-size: 25px !important;
    font-weight: 900 !important;
}

.table-summary {
    font-size: 14px !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   LIVE ALERT TABLE - HEADERS
   ------------------------------------------------------------ */

#alerts-table th,
#alerts-table .dash-header {
    min-height: 46px !important;

    padding:
        13px 10px !important;

    font-size:
        17px !important;

    font-weight:
        900 !important;
}


/* ------------------------------------------------------------
   LIVE ALERT TABLE - FILTER ROW
   ------------------------------------------------------------ */

#alerts-table .dash-filter {
    min-height: 49px !important;
}

#alerts-table .dash-filter input {
    min-height: 37px !important;

    padding:
        8px 9px !important;

    color:
        #FFFFFF !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;
}

#alerts-table .dash-filter input::placeholder {
    color:
        #E0E8E3 !important;

    opacity:
        1 !important;
}


/* ------------------------------------------------------------
   LIVE ALERT TABLE - BODY
   ------------------------------------------------------------ */

/*
   Background intentionally DOES NOT use !important.
   Dash conditional Reason colors and NEW-alert highlighting
   must remain able to override the normal row color.
*/

#alerts-table td,
#alerts-table .dash-cell {
    background-color: #101C15;

    color:
        #FFFFFF !important;

    font-size:
        19px !important;

    font-weight:
        700 !important;

    line-height:
        1.45 !important;

    padding:
        14px 11px !important;
}

#alerts-table tbody tr:nth-child(even) td {
    background-color:
        #17271D;
}

#alerts-table tbody tr:hover td {
    background-color:
        #254332;
}


/* ------------------------------------------------------------
   OPERATOR-PRIORITY TABLE FIELDS
   ------------------------------------------------------------ */

#alerts-table .dash-cell[data-dash-column="SubmittedTime"],
#alerts-table .dash-cell[data-dash-column="Route"],
#alerts-table .dash-cell[data-dash-column="Stop"],
#alerts-table .dash-cell[data-dash-column="Carrier"],
#alerts-table .dash-cell[data-dash-column="CustomerCity"],
#alerts-table .dash-cell[data-dash-column="CustomerState"] {
    font-weight:
        850 !important;
}


/* ------------------------------------------------------------
   REASON
   ------------------------------------------------------------ */

/*
   Do not assign a background here.
   The callback owns the Reason colors.
*/

#alerts-table .dash-cell[data-dash-column="Reason"] {
    color:
        #FFFFFF !important;

    font-size:
        16px !important;

    font-weight:
        900 !important;

    line-height:
        1.3 !important;

    text-align:
        center !important;
}


/* ------------------------------------------------------------
   COMPLIANCE CHECKS
   ------------------------------------------------------------ */

#alerts-table .dash-cell[data-dash-column="Picture"],
#alerts-table .dash-cell[data-dash-column="Precall30m"],
#alerts-table .dash-cell[data-dash-column="precall30m"] {
    font-size:
        24px !important;

    font-weight:
        900 !important;
}


/* ------------------------------------------------------------
   NOTES
   ------------------------------------------------------------ */

#alerts-table .dash-cell[data-dash-column="Notes"] {
    min-width:
        460px !important;

    max-width:
        680px !important;

    color:
        #F7FAF8 !important;

    font-size:
        17px !important;

    font-weight:
        650 !important;

    line-height:
        1.48 !important;
}


/*
   Limit the normal queue view to two lines.
   Operators can scan the queue without one long note
   making a row enormous.
*/

#alerts-table .dash-cell[data-dash-column="Notes"] > div {
    display:
        -webkit-box !important;

    -webkit-line-clamp:
        2 !important;

    -webkit-box-orient:
        vertical !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


/* ------------------------------------------------------------
   EXPORT + PAGINATION
   ------------------------------------------------------------ */

#alerts-table button.export {
    min-height:
        37px !important;

    padding:
        8px 15px !important;

    font-size:
        15px !important;

    font-weight:
        900 !important;
}

#alerts-table .previous-next-container {
    font-size:
        16px !important;

    font-weight:
        800 !important;
}


/* ------------------------------------------------------------
   RESPONSIVE SAFETY
   ------------------------------------------------------------ */

@media (max-width: 1500px) {

    #alerts-table td,
    #alerts-table .dash-cell {
        font-size:
            17px !important;
    }

    #alerts-table .dash-cell[data-dash-column="Notes"] {
        font-size:
            16px !important;
    }
}


/* ============================================================
   END RXO WAVE 2
   ============================================================ */







/* RXO NATIVE MAP CONTROLS START */

/* ------------------------------------------------------------
   MAP HEADER
   ------------------------------------------------------------ */

.map-panel-header {
    display: flex !important;

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

    gap: 14px !important;

    margin-bottom: 8px !important;
}

.map-panel-header h2 {
    margin: 0 !important;
}


/* ------------------------------------------------------------
   CONTROL BAR
   ------------------------------------------------------------ */

.map-control-bar {
    display: flex !important;

    align-items: center !important;

    gap: 6px !important;
}


/* ------------------------------------------------------------
   CONTROL BUTTONS
   ------------------------------------------------------------ */

.map-control-btn {
    min-height: 34px !important;

    padding:
        6px 10px !important;

    background:
        #17291F !important;

    color:
        #FFFFFF !important;

    border:
        1px solid #506B59 !important;

    border-radius:
        5px !important;

    cursor:
        pointer !important;

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

    font-size:
        13px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;

    transition:
        background .12s ease,
        border-color .12s ease,
        transform .08s ease !important;
}

.map-control-btn:hover {
    background:
        #21402E !important;

    border-color:
        #00E676 !important;
}

.map-control-btn:active {
    transform:
        translateY(1px) !important;
}

.map-control-btn:focus-visible {
    outline:
        2px solid #00E676 !important;

    outline-offset:
        2px !important;
}


/* ------------------------------------------------------------
   FIT ALL BUTTON
   ------------------------------------------------------------ */

.map-fit-btn {
    background:
        rgba(0,230,118,.13) !important;

    border-color:
        rgba(0,230,118,.55) !important;

    color:
        #DCFFEC !important;
}


/*
   Generic Plotly toolbar is no longer needed because
   the map has explicit operator controls.
*/

#map-chart .modebar {
    display:
        none !important;
}


/* RXO NATIVE MAP CONTROLS END */



/* RXO SIDEBAR HEADER CLEANUP START */


/* ============================================================
   SIDEBAR - REMOVE BROKEN GENERATED ICONS
   ============================================================ */

#nav-overview::before,
#nav-alerts::before,
#nav-map::before,
#nav-routes::before,
#nav-carriers::before,
#nav-data-quality::before {
    content: none !important;
    display: none !important;
}


/* Give nav labels clean alignment without pseudo-icons */

.nav-item {
    display: flex !important;

    align-items: center !important;

    min-height: 46px !important;

    padding:
        11px 16px !important;

    gap: 0 !important;

    font-size:
        16px !important;

    font-weight:
        750 !important;

    line-height:
        1.2 !important;
}


/* Active item remains obvious */

.nav-item.active {
    padding-left:
        16px !important;

    border-left:
        4px solid #00E676 !important;
}


/* ============================================================
   HEADER - ALIGN TITLE WITH FILTER ROW
   ============================================================ */

.topbar {
    min-height:
        96px !important;

    padding:
        14px 20px !important;

    grid-template-columns:
        360px minmax(820px, 1fr) 165px !important;

    align-items:
        center !important;

    column-gap:
        18px !important;
}


/* Left title block */

.topbar > div:first-child {
    align-self:
        center !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    min-height:
        64px !important;

    padding-top:
        0 !important;

    transform:
        translateY(1px) !important;
}


/* Dashboard title */

.topbar h1 {
    margin:
        0 0 6px 0 !important;

    padding:
        0 !important;

    font-size:
        31px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -0.6px !important;

    white-space:
        nowrap !important;
}


/* LIVE / last updated line */

.live-row {
    margin:
        0 !important;

    min-height:
        24px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;
}

.live-pill {
    display:
        inline-flex !important;

    align-items:
        center !important;

    min-height:
        23px !important;

    padding:
        3px 9px !important;

    font-size:
        12px !important;

    line-height:
        1 !important;
}

.last-updated {
    font-size:
        12.5px !important;

    line-height:
        1.15 !important;
}


/* ============================================================
   FILTER BAR ALIGNMENT
   ============================================================ */

.filters {
    align-self:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

.filter {
    display:
        flex !important;

    align-items:
        center !important;
}

.filter .Select-control,
.DateInput_input {
    margin:
        0 !important;
}


/* ============================================================
   AUTO REFRESH ALIGNMENT
   ============================================================ */

.auto-refresh-status {
    align-self:
        center !important;

    min-height:
        52px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;
}


/* ============================================================
   TITLE WIDTH SAFETY
   ============================================================ */

@media (max-width: 1500px) {

    .topbar {
        grid-template-columns:
            330px minmax(700px, 1fr) 150px !important;
    }

    .topbar h1 {
        font-size:
            28px !important;
    }
}


/* RXO SIDEBAR HEADER CLEANUP END */



/* RXO LINKED FILTERS START */

.linked-filter-toolbar {
    min-height: 48px !important;

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

    gap: 16px !important;

    margin-bottom: 10px !important;
    padding: 9px 12px !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,230,118,.10),
            rgba(0,230,118,.025)
        ) !important;

    border:
        1px solid #365344 !important;

    border-radius:
        7px !important;
}

.linked-filter-copy {
    min-width: 0 !important;

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

    gap: 12px !important;
}

.linked-filter-label {
    flex: 0 0 auto !important;

    color: #00E676 !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}

.linked-selection-summary {
    color: #E8F0EB !important;

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

    line-height: 1.35 !important;
}

.linked-clear-btn {
    flex: 0 0 auto !important;

    min-height: 34px !important;

    padding:
        6px 12px !important;

    background:
        #16261D !important;

    color:
        #FFFFFF !important;

    border:
        1px solid #557061 !important;

    border-radius:
        5px !important;

    cursor:
        pointer !important;

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

    font-size:
        13px !important;

    font-weight:
        850 !important;
}

.linked-clear-btn:hover {
    background:
        #20412F !important;

    border-color:
        #00E676 !important;
}

#reason-chart,
#carrier-chart {
    cursor: pointer !important;
}

@media (max-width: 1150px) {

    .linked-filter-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .linked-filter-copy {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* RXO LINKED FILTERS END */


/* =========================================================
   ON TIME PAGE - SCOPED LAYOUT FIX
   Does not affect Overview or other pages
   ========================================================= */

#on-time-view .alerts-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    align-items: stretch !important;
}

#on-time-view .metric-card {
    min-height: 92px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
}

#on-time-view .metric-label {
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

#on-time-view .metric-value {
    font-size: 30px !important;
    line-height: 1 !important;
    margin-top: 6px !important;
}

#on-time-view .metric-helper {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 5px !important;
}

#on-time-view .table-panel {
    padding: 14px !important;
    margin-bottom: 12px !important;
}

#on-time-view #on-time-status-chart {
    height: 320px !important;
}

#on-time-view #on-time-status-chart .js-plotly-plot,
#on-time-view #on-time-status-chart .plot-container,
#on-time-view #on-time-status-chart .svg-container {
    height: 320px !important;
    min-height: 320px !important;
}

#on-time-view #on-time-table {
    font-size: 12px !important;
}

@media (max-width: 1200px) {
    #on-time-view .alerts-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}