/* ---------- 1. Design tokens ---------- */
:root {
    --vt-navy: #004157; /* header (reference se sample kiya) */
    --vt-teal: #1592a6; /* active tab, primary buttons */
    --vt-teal-dark: #0f7a8b;
    --vt-ink: #1f2d3d; /* main text */
    --vt-muted: #66788a;
    --vt-bg: #fcfdfd; /* page background (reference mein white panel) */
    --vt-card: #ffffff;
    --vt-tile: #f5f7f9; /* KPI tile background */
    --vt-line: #e2e9ef;
    --vt-strip-a: #ffc473; /* top colour strip */
    --vt-strip-b: #ffb0a4;
    --vt-strip-c: #90adcb;
    --vt-poor: #e5372f;
    --vt-avg: #f5a623;
    --vt-good: #2e9e44;
    --vt-radius: 12px;
    --vt-shadow: 0 2px 14px rgba(10, 86, 111, .08);
    --vt-font: 'Poppins', 'Roboto', 'Segoe UI', Arial, sans-serif;
}

/* ---------- 2. Base + top colour strip ---------- */
html, body {
    font-family: var(--vt-font);
}

    body.skin-black-light {
        position: relative;
        background: var(--vt-bg);
        color: var(--vt-ink);
        font-size: 14px;
    }

        body.skin-black-light::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            z-index: 1100;
            background: linear-gradient(70deg, var(--vt-strip-a) 0 30%, var(--vt-strip-b) 30% 66%, var(--vt-strip-c) 66% 100%);
        }

        /* ---------- 3. Header ---------- */
        body.skin-black-light .main-header {
            position: relative;
            z-index: 1030;
            max-height: none;
            margin-top: 10px;
            background: var(--vt-navy);
            border: 0;
        }

            body.skin-black-light .main-header .navbar,
            body.skin-black-light .main-header .navbar-static-top {
                position: static; /* hanging tab header ke hisaab se position hoga */
                min-height: 0;
                margin: 0;
                background: transparent;
                border: 0;
            }

            body.skin-black-light .main-header .navbar-header {
                float: none;
                display: flex;
                align-items: center;
                width: 100%;
                min-height: 70px;
                padding: 0 44px;
            }

                body.skin-black-light .main-header .navbar-header::before,
                body.skin-black-light .main-header .navbar-header::after {
                    display: none;
                }

            body.skin-black-light .main-header .navbar-brand {
                float: none;
                height: auto;
                padding: 0;
                margin: 0 150px 0 0 !important;
                display: flex;
                align-items: center;
            }

            body.skin-black-light .main-header .navbar-brand {
                background: #004157 !important;
            }

                body.skin-black-light .main-header .navbar-brand img {
                    height: 50px !important;
                    width: auto !important;
                    max-width: 220px !important;
                    object-fit: contain !important;
                    margin: 0 !important;
                    display: block !important;
                }
            /* main navigation links (Dashboard, Vehicle Checks ...) */
            body.skin-black-light .main-header .navbar-header > .nav.navbar-nav {
                float: none !important;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin: 0 0 0 auto;
            }

                body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li {
                    float: none;
                }

                    body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li > a {
                        position: relative;
                        margin-left: 34px;
                        padding: 10px 0;
                        background: transparent;
                        color: #fff;
                        font-size: 14px;
                        font-weight: 600;
                    }

                        body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li > a::after {
                            content: "";
                            position: absolute;
                            left: 0;
                            right: 0;
                            bottom: 2px;
                            height: 2px;
                            background: #fff;
                            transform: scaleX(0);
                            transition: transform .18s ease;
                        }

                        body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li > a:hover,
                        body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li > a:focus,
                        body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li.active > a {
                            background: transparent;
                            color: #fff;
                        }

                            body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li > a:hover::after,
                            body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li > a:focus::after,
                            body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li.active > a::after {
                                transform: scaleX(1);
                            }

            /* settings + user icons: header ka hi hissa jo right side mein neeche latakta hai.
   Reference wala S-shape curve ::before se banta hai (SVG mask, colour = header colour).
   Geometry: header ki bottom line se 34px neeche tak, curve 40px chaudi. */
            body.skin-black-light .main-header .navbar-custom-menu {
                position: absolute;
                right: 0;
                top: calc(100% - 26px); /* 26px header ke andar chhupa, 34px neeche latakta hai */
                float: none;
                z-index: 1040;
                display: flex;
                align-items: center;
                height: 60px;
                margin: 0;
                padding: 0px 0px 0px 15px; /* icons ka centre header line se ~6px neeche */
                background: var(--vt-navy);
            }

                body.skin-black-light .main-header .navbar-custom-menu::before {
                    content: "";
                    position: absolute;
                    top: 25px; /* header ki bottom line (1px overlap, seam na dikhe) */
                    right: calc(100% - 6px);
                    width: 41px;
                    height: 35px;
                    background: var(--vt-navy);
                    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 40 35' preserveAspectRatio='none'%3E%3Cpath d='M0 -1V0C6 0 9 2 12 6L28 28C31 32 34 34 40 34V-1Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 40 35' preserveAspectRatio='none'%3E%3Cpath d='M0 -1V0C6 0 9 2 12 6L28 28C31 32 34 34 40 34V-1Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
                }

                body.skin-black-light .main-header .navbar-custom-menu > .navbar-nav {
                    display: flex;
                    align-items: center;
                    float: none;
                    margin: 0;
                }

                    body.skin-black-light .main-header .navbar-custom-menu > .navbar-nav > li {
                        float: none;
                    }

                        body.skin-black-light .main-header .navbar-custom-menu > .navbar-nav > li + li {
                            margin-left: 30px;
                        }

                        body.skin-black-light .main-header .navbar-custom-menu > .navbar-nav > li > a {
                            padding: 6px 12px;
                            background: transparent;
                            color: #fff;
                            font-size: 24px;
                            line-height: 1;
                        }

                            body.skin-black-light .main-header .navbar-custom-menu > .navbar-nav > li > a:hover,
                            body.skin-black-light .main-header .navbar-custom-menu > .navbar-nav > li.open > a {
                                background: rgba(255, 255, 255, .14);
                                border-radius: 8px;
                                color: #fff;
                            }

            /* dropdowns */
            body.skin-black-light .main-header .dropdown-menu {
                margin-top: 14px;
                border: 0;
                border-radius: var(--vt-radius);
                box-shadow: 0 10px 30px rgba(10, 86, 111, .18);
                overflow: hidden;
            }

            body.skin-black-light .main-header .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
                background: var(--vt-navy);
                color: #fff;
            }

            body.skin-black-light .main-header .dropdown-menu > li > a:hover {
                background: rgba(20, 161, 181, .10);
            }

        /* ---------- 4. Page area ---------- */
        body.skin-black-light .content-wrapper {
            background: var(--vt-bg);
            min-height: calc(100vh - 125px);
        }

            body.skin-black-light .content-wrapper .container {
                width: auto;
                /*max-width: 1320px;*/
                padding: 0 32px;
            }

            body.skin-black-light .content-wrapper > .content-header {
                padding: 30px 0 0;
            }

            body.skin-black-light .content-wrapper > .content {
                padding: 0;
            }

        /* generic AdminLTE boxes ko same card look */
        body.skin-black-light .content .box {
            border: 1px solid var(--vt-line);
            border-radius: var(--vt-radius);
            box-shadow: var(--vt-shadow);
        }

/* ---------- 5. Tabs (contentMenu section) ---------- */
.vt-tabs,
.content-header .nav-pills,
.content-header .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

    .vt-tabs > li,
    .content-header .nav-pills > li,
    .content-header .nav-tabs > li {
        float: none;
        margin: 0;
    }

        .vt-tabs > li > a,
        .content-header .nav-pills > li > a,
        .content-header .nav-tabs > li > a {
            margin: 0;
            padding: 13px 22px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--vt-ink);
            font-weight: 600;
            transition: background-color .15s ease, color .15s ease;
        }

            .vt-tabs > li > a:hover,
            .content-header .nav-pills > li > a:hover,
            .content-header .nav-tabs > li > a:hover {
                border: 0;
                background: rgba(20, 161, 181, .10);
                color: var(--vt-teal-dark);
            }

        .vt-tabs > li.active > a,
        .vt-tabs > li.active > a:hover,
        .vt-tabs > li.active > a:focus,
        .content-header .nav-pills > li.active > a,
        .content-header .nav-pills > li.active > a:hover,
        .content-header .nav-pills > li.active > a:focus,
        .content-header .nav-tabs > li.active > a,
        .content-header .nav-tabs > li.active > a:hover,
        .content-header .nav-tabs > li.active > a:focus {
            border: 0;
            background: var(--vt-teal);
            color: #fff;
            box-shadow: 0 6px 16px rgba(20, 161, 181, .30);
        }

.content-header .nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

    .content-header .nav-pills > li {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

        .content-header .nav-pills > li > a {
            white-space: nowrap !important;
            padding: 13px 16px !important;
        }
/* ---------- 6. Filter bar ---------- */
.vt-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 22px;
    margin: 26px 0 30px;
    padding: 22px 28px;
    background: var(--vt-card);
    border: 1px solid var(--vt-line);
    border-radius: var(--vt-radius);
    box-shadow: var(--vt-shadow);
}

.vt-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
}

    .vt-field label {
        margin: 0;
        color: var(--vt-ink);
        font-size: 13px;
        font-weight: 600;
    }

    .vt-field .form-control,
    .vt-field select {
        height: 44px;
        padding: 0 14px;
        border: 1px solid #d5dee6;
        border-radius: 8px;
        box-shadow: none;
        color: var(--vt-ink);
        font-size: 13px;
        font-weight: 500;
    }

        .vt-field .form-control:focus,
        .vt-field select:focus {
            border-color: var(--vt-teal);
            box-shadow: 0 0 0 3px rgba(20, 161, 181, .18);
            outline: 0;
        }

.vt-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--vt-teal);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .vt-btn:hover, .vt-btn:focus {
        background: var(--vt-teal-dark);
        color: #fff;
        text-decoration: none;
    }

.vt-btn--group {
    align-self: center;
    height: 54px;
    padding: 0 30px;
    border-radius: 10px;
}

.vt-filters__apply {
    margin-left: auto;
}

.vt-btn:focus-visible,
.vt-tabs a:focus-visible {
    outline: 2px solid var(--vt-teal);
    outline-offset: 2px;
}

/* ---------- 7. Summary cards ---------- */
.vt-summary-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 3fr;
    gap: 24px;
}

.vt-card {
    padding: 22px 24px;
    background: var(--vt-card);
    border: 1px solid var(--vt-line);
    border-radius: var(--vt-radius);
    box-shadow: var(--vt-shadow);
}

.vt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.vt-card__title {
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid var(--vt-teal);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.vt-pill {
    padding: 4px 12px;
    border: 1px solid rgba(20, 161, 181, .35);
    border-radius: 999px;
    background: rgba(20, 161, 181, .10);
    color: var(--vt-teal-dark);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* overall score gauge (--score 0-100) */
.vt-overall {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.vt-gauge {
    --score: 67;
    --size: 150px;
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--vt-avg) calc(var(--score) * 1%), #e6eef3 0);
}

    .vt-gauge::before {
        content: "";
        position: absolute;
        inset: 16px;
        border-radius: 50%;
        background: var(--vt-card);
    }

.vt-gauge__center {
    position: relative;
    text-align: center;
    line-height: 1;
}

.vt-gauge__value {
    display: block;
    font-size: 34px;
    font-weight: 700;
}

.vt-gauge__label {
    display: block;
    margin-top: 4px;
    color: var(--vt-muted);
    font-size: 10px;
    font-weight: 500;
}

.vt-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vt-muted);
    font-size: 12px;
    line-height: 1.9;
}

.vt-note {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(20, 161, 181, .08);
    color: var(--vt-teal-dark);
    font-size: 11px;
    font-weight: 500;
}

/* score rows: Speeding / Idling ... (--v = score out of 10) */
.vt-score-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.vt-score-row {
    display: grid;
    grid-template-columns: 72px 1fr 40px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 12px;
}

    .vt-score-row b {
        color: var(--vt-avg);
        text-align: right;
        font-weight: 600;
    }

.vt-bar {
    height: 6px;
    border-radius: 99px;
    background: #eaf0f4;
    overflow: hidden;
}

    .vt-bar > i {
        display: block;
        height: 100%;
        width: calc(var(--v) * 10%);
        border-radius: inherit;
        background: var(--vt-avg);
    }

/* fleet summary KPI tiles */
.vt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vt-kpi {
    --hole: var(--vt-tile);
    padding: 18px 12px 14px;
    border-radius: var(--vt-radius);
    background: var(--vt-tile);
    text-align: center;
}

.vt-kpi__title {
    margin: 0;
    color: var(--vt-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* donut: --poor / --avg = % of drivers (rest = good) */
.vt-donut {
    --poor: 30;
    --avg: 40;
    --size: 92px;
    position: relative;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    margin: 14px auto 10px;
    border-radius: 50%;
    background: conic-gradient( var(--vt-poor) 0 calc(var(--poor) * 1%), var(--vt-avg) 0 calc((var(--poor) + var(--avg)) * 1%), var(--vt-good) 0);
}

    .vt-donut::before {
        content: "";
        position: absolute;
        inset: 11px;
        border-radius: 50%;
        background: var(--hole);
    }

.vt-donut__center {
    position: relative;
    text-align: center;
    line-height: 1.1;
}

.vt-donut__value {
    display: block;
    font-size: 22px;
    font-weight: 700;
}

.vt-donut__unit {
    display: block;
    color: var(--vt-muted);
    font-size: 9px;
}

.vt-legend {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vt-muted);
    font-size: 10px;
}

    .vt-legend li::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 4px;
        border-radius: 50%;
        background: var(--dot);
    }

    .vt-legend .poor {
        --dot: var(--vt-poor);
    }

    .vt-legend .avg {
        --dot: var(--vt-avg);
    }

    .vt-legend .good {
        --dot: var(--vt-good);
    }

/* ---------- 8. Responsive ---------- */
@media (max-width: 991px) {
    .vt-summary-grid {
        grid-template-columns: 1fr;
    }

    .vt-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    body.skin-black-light .main-header .navbar-header {
        flex-wrap: wrap;
        min-height: 0;
        padding: 14px 16px 8px;
    }

        body.skin-black-light .main-header .navbar-header > .nav.navbar-nav {
            order: 3;
            width: 100%;
            margin: 10px 0 0;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

            body.skin-black-light .main-header .navbar-header > .nav.navbar-nav > li > a {
                margin: 0 22px 0 0;
                white-space: nowrap;
            }

    body.skin-black-light .main-header .navbar-custom-menu {
        top: 10px;
        right: 8px;
        height: auto;
        margin: 0;
        padding: 0;
        background: transparent;
    }

        body.skin-black-light .main-header .navbar-custom-menu::before {
            display: none;
        }

    body.skin-black-light .content-wrapper .container {
        padding: 0 16px;
    }

    body.skin-black-light .content-wrapper > .content-header {
        padding-top: 28px;
    }

    .vt-filters {
        padding: 16px;
        gap: 14px;
    }

    .vt-field {
        flex: 1 1 100%;
    }

    .vt-filters__apply {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .vt-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

        .vt-tabs > li > a {
            white-space: nowrap;
        }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

.box-body label {
    color: #000000 !important;
}

.box-body label {
    color: #000 !important;
}


/* Filter dropdowns - white like client reference */
.box-body select.form-control,
.box-body .select2-container .select2-selection {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #D9E1E5 !important;
}

.box-body select.form-control {
    color: #000000 !important;
}

.box-body .select2-container .select2-selection--single .select2-selection__rendered {
    color: #000000 !important;
}

.box-body .select2-container .select2-selection--single {
    background-color: #FFFFFF !important;
}

.content-header {
    margin-bottom: 20px !important;
}



.vt-driver-cards > .col-md-4 {
    padding-left: 7px;
    padding-right: 7px;
}

    .vt-driver-cards > .col-md-4 > .box {
        min-height: 0 !important;
    }

/* Card header */
.vt-driver-cards .box-header {
    padding: 16px 18px 8px !important;
}

    .vt-driver-cards .box-header .box-title {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }

/* Card body */
.vt-driver-cards .box-body {
    padding: 8px 14px 14px !important;
}

/* DataTables top area */
.vt-driver-cards .dataTables_wrapper {
    width: 100%;
}

/* Show entries */
.vt-driver-cards .dataTables_length {
    margin: 0 0 8px 0 !important;
}

    .vt-driver-cards .dataTables_length label {
        margin: 0 !important;
        font-weight: 400;
    }

    .vt-driver-cards .dataTables_length select {
        height: 34px !important;
        min-width: 70px;
        padding: 4px 8px !important;
    }

/* Buttons */
.vt-driver-cards .dt-buttons {
    margin: 0 0 8px 0 !important;
}

.vt-driver-cards .dt-button,
.vt-driver-cards .buttons-copy,
.vt-driver-cards .buttons-csv,
.vt-driver-cards .buttons-excel,
.vt-driver-cards .buttons-pdf,
.vt-driver-cards .buttons-print {
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 4px 4px 0 !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
}

/* Search */
.vt-driver-cards .dataTables_filter {
    margin: 0 0 8px 0 !important;
    text-align: right !important;
}

    .vt-driver-cards .dataTables_filter label {
        margin: 0 !important;
        font-weight: 400;
    }

    .vt-driver-cards .dataTables_filter input {
        height: 34px !important;
        width: 145px !important;
        margin-left: 6px !important;
        padding: 6px 10px !important;
    }

/* Table */
.vt-driver-cards .table {
    margin-bottom: 8px !important;
}

    .vt-driver-cards .table thead th {
        height: 36px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    .vt-driver-cards .table tbody td {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

/* No-data message */
.vt-driver-cards .dataTables_empty {
    padding: 10px !important;
}

/* Driver table headers - white background */
#bestDrivers thead th {
    background-color: #FFFFFF !important;
    color: #1B5E20 !important;
}

#goodDrivers thead th {
    background-color: #FFFFFF !important;
    color: #E65100 !important;
}

#worstDrivers thead th {
    background-color: #FFFFFF !important;
    color: #B71C1C !important;
}
/* Bottom information */
.vt-driver-cards .dataTables_info {
    padding-top: 6px !important;
    font-size: 12px !important;
}

/* Pagination */
/*.vt-driver-cards .dataTables_paginate {
    padding-top: 4px !important;
}

    .vt-driver-cards .dataTables_paginate .paginate_button {
        padding: 5px 10px !important;
        margin-left: 2px !important;
        font-size: 12px !important;
    }*/
/* =========================================================
   LIGHT DRIVER CARD THEME
   Excellent = Light Green
   Good      = Light Yellow
   Needs     = Light Red
   ========================================================= */

.vt-dcard {
    --tier: #35B87F;
    --tier-head: #DDF5E8;
    --tier-ink: #073F4D;
    --tier-rgb: 53, 184, 127;
}

.vt-dcard--excellent {
    --tier: #35B87F;
    --tier-head: #DDF5E8;
    --tier-ink: #073F4D;
    --tier-rgb: 53, 184, 127;
}

.vt-dcard--good {
    --tier: #F2B93F;
    --tier-head: #FFF2CC;
    --tier-ink: #073F4D;
    --tier-rgb: 242, 185, 63;
}

.vt-dcard--needs {
    --tier: #EF6B6B;
    --tier-head: #FDE2E2;
    --tier-ink: #073F4D;
    --tier-rgb: 239, 107, 107;
}
/* =========================================
   DRIVER CARDS - EXPORT BUTTONS
   ========================================= */

.vt-dcard .dt-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 12px 0 !important;
}

    .vt-dcard .dt-buttons .dt-button,
    .vt-dcard .dt-buttons .btn {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        background: #F4FBFC !important;
        background-image: none !important;
        border: 1px solid #72CDD7 !important;
        border-radius: 7px !important;
        color: #087F8C !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.15s ease !important;
    }

        /* Hover */
        .vt-dcard .dt-buttons .dt-button:hover,
        .vt-dcard .dt-buttons .btn:hover {
            background: #18B5C8 !important;
            border-color: #18B5C8 !important;
            color: #FFFFFF !important;
            box-shadow: 0 3px 8px rgba(24,181,200,0.18) !important;
        }

        /* Active / Focus */
        .vt-dcard .dt-buttons .dt-button:focus,
        .vt-dcard .dt-buttons .btn:focus {
            outline: none !important;
            box-shadow: 0 0 0 2px rgba(24,181,200,0.15) !important;
        }

    .vt-dcard .dt-buttons .dt-button,
    .vt-dcard .dt-buttons .btn {
        height: 34px !important;
        padding: 0 13px !important;
        margin: 0 4px 5px 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        background: #F4FBFC !important;
        background-image: none !important;
        border: 1px solid #72CDD7 !important;
        border-radius: 7px !important;
        color: #087F8C !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
/* =========================================
   DRIVER CARD - HEADER ICONS
   ========================================= */

/* Common icon circle */
.box:has(#bestDrivers) .box-title::before,
.box:has(#goodDrivers) .box-title::before,
.box:has(#worstDrivers) .box-title::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    margin-right: 9px !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    font-family: FontAwesome !important;
    font-size: 15px !important;
    vertical-align: middle !important;
}

/* Excellent - Green */
.box:has(#bestDrivers) .box-title::before {
    content: "\f091" !important;
    background: #1B5E20 !important;
}

/* Good - Orange */
.box:has(#goodDrivers) .box-title::before {
    content: "\f080" !important;
    background: #E65100 !important;
}

/* Needs Improvement - Red */
.box:has(#worstDrivers) .box-title::before {
    content: "\f140" !important;
    background: #B71C1C !important;
}

/* CARD */
body.skin-black-light .content .vt-dcard {
    position: relative;
    margin-bottom: 20px;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #E1E8EC !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(7, 63, 77, 0.08) !important;
    overflow: hidden;
}


    /* TOP STATUS LINE */
    body.skin-black-light .content .vt-dcard::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--tier);
        border-radius: 14px 14px 0 0;
    }


/* CARD TITLE */
.vt-dcard > .box-header {
    padding: 20px 20px 10px !important;
    background: #FFFFFF !important;
    border: 0 !important;
}

    .vt-dcard > .box-header .box-title {
        color: #073F4D !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }


/* CARD BODY */
.vt-dcard > .box-body {
    padding: 10px 16px 16px !important;
    background: #FFFFFF !important;
}


/* SHOW ENTRIES */
.vt-dcard div.dataTables_wrapper div.dataTables_length {
    color: #073F4D !important;
    margin-bottom: 8px !important;
}

    .vt-dcard div.dataTables_wrapper div.dataTables_length select {
        height: 36px !important;
        background: #FFFFFF !important;
        border: 1px solid #D5E0E5 !important;
        border-radius: 7px !important;
        color: #073F4D !important;
    }


/* EXPORT BUTTONS */
.vt-dcard .dt-buttons .dt-button,
.vt-dcard .dt-buttons .btn {
    height: 34px !important;
    padding: 0 13px !important;
    margin: 0 4px 5px 0 !important;
    background: #F4FBFC !important;
    background-image: none !important;
    border: 1px solid #72CDD7 !important;
    border-radius: 7px !important;
    color: #087F8C !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}


    /* BUTTON HOVER */
    .vt-dcard .dt-buttons .dt-button:hover,
    .vt-dcard .dt-buttons .btn:hover {
        background: #16BECB !important;
        border-color: #16BECB !important;
        color: #FFFFFF !important;
    }



/* SEARCH */
.vt-dcard div.dataTables_wrapper div.dataTables_filter {
    margin-bottom: 8px !important;
}

    .vt-dcard div.dataTables_wrapper div.dataTables_filter label {
        color: #073F4D !important;
        font-weight: 500 !important;
    }

    .vt-dcard div.dataTables_wrapper div.dataTables_filter input {
        height: 36px !important;
        width: 150px !important;
        background: #FFFFFF !important;
        border: 1px solid #D5E0E5 !important;
        border-radius: 7px !important;
        color: #073F4D !important;
    }


/* TABLE HEADER - LIGHT STATUS COLOURS */
.vt-dcard table.dataTable thead th {
    background: var(--tier-head) !important;
    color: var(--tier-ink) !important;
    border: 0 !important;
    font-weight: 700 !important;
    height: 38px !important;
    padding: 8px 10px !important;
}


/* TABLE BODY */
.vt-dcard table.dataTable tbody td {
    background: #FFFFFF !important;
    color: #073F4D !important;
    border-bottom: 1px solid #EDF2F4 !important;
    padding: 9px 10px !important;
}


    /* EMPTY TABLE */
    .vt-dcard table.dataTable tbody td.dataTables_empty {
        color: #526A72 !important;
        background: #FFFFFF !important;
        padding: 14px !important;
    }


/* PAGINATION */
.vt-dcard div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 6px !important;
}



/* =========================================
   DRIVER TABLE - INFO TEXT
   ========================================= */

.vt-dcard div.dataTables_wrapper div.dataTables_info {
    display: block !important;
    color: #073F4D !important;
    padding-top: 12px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
}
/* Last 6 Months Optidriver Report */
body.skin-black-light .content .vt-driver-cards > .col-md-12 > .box {
    background: #FFFFFF !important;
    border: 1px solid #E1E8EC !important;
    border-radius: 0px !important;
    box-shadow: 0 3px 12px rgba(7, 63, 77, 0.08) !important;
    overflow: hidden;
}

/* Last 6 Months Optidriver Report - Heading */
.vt-driver-cards > .col-md-12 > .box .box-header {
    background: #CFEDEC !important;
    border-bottom: 1px solid #D5E7EA !important;
    padding: 18px 20px !important;
    text-align: center !important;
}

.vt-driver-cards > .col-md-12 > .box .box-title {
    color: #164E63 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    text-align: center !important;
    width: 100% !important;
}

.vt-driver-cards > .col-md-12 > .box .box-body {
    background: #FFFFFF !important;
}
/* =========================================================
   LAST 6 MONTHS OPTIDRIVER TABLE
   ========================================================= */

#speedingZones {
    color: #073F4D !important;
    /*background: #FFFFFF !important;*/
}

    #speedingZones thead th {
        background: #F2F8F9 !important;
        color: #073F4D !important;
        font-weight: 700 !important;
        border-bottom: 1px solid #D9E7EA !important;
    }

    #speedingZones tbody td {
        /*background: #FFFFFF !important;*/
        color: #073F4D !important;
    }

    #speedingZones tbody tr {
        /*background: #FFFFFF !important;*/
    }

        #speedingZones tbody tr:hover td {
            background: #F7FBFC !important;
        }

#speedingZones_wrapper {
    color: #073F4D !important;
}

    #speedingZones_wrapper .dataTables_info,
    #speedingZones_wrapper .dataTables_length,
    #speedingZones_wrapper .dataTables_filter,
    #speedingZones_wrapper .dataTables_paginate {
        color: #073F4D !important;
    }

        #speedingZones_wrapper .dataTables_filter input {
            background: #FFFFFF !important;
            color: #073F4D !important;
            border: 1px solid #D9E7EA !important;
        }
/* =========================================================
   DASHBOARD TABS
   ========================================================= */

body.skin-black-light .content-header .nav-pills {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    body.skin-black-light .content-header .nav-pills > li {
        float: none;
        margin: 0 !important;
    }

        body.skin-black-light .content-header .nav-pills > li > a {
            display: block;
            padding: 12px 16px !important;
            margin: 0 !important;
            background: transparent !important;
            color: #073F4D !important;
            border: none !important;
            border-radius: 0px !important;
            font-weight: 600;
        }

            body.skin-black-light .content-header .nav-pills > li > a:hover {
                background: #F2F8F9 !important;
                color: #073F4D !important;
            }

        body.skin-black-light .content-header .nav-pills > li.active > a,
        body.skin-black-light .content-header .nav-pills > li.active > a:hover,
        body.skin-black-light .content-header .nav-pills > li.active > a:focus {
            background: #18B5C8 !important;
            color: #FFFFFF !important;
        }
/* =========================================================
   SPEEDING EVENTS PAGE
   ========================================================= */

.speeding-events-page {
    background: #FCFDFD;
}

    /* Main dashboard boxes */
    .speeding-events-page .box {
        background: #FFFFFF !important;
        border: 1px solid #E2E9EF !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 14px rgba(10, 86, 111, .08) !important;
    }

    /* Box header - Light Cyan */
    .speeding-events-page .box-header {
        background: #CFEDEC !important;
        border-bottom: 1px solid #D5E7EA !important;
        text-align: center !important;
    }

    /* Box titles - Centered Medium */
    .speeding-events-page .box-title {
        color: #164E63 !important;
        font-weight: 500 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Chart area */
    .speeding-events-page .box-body {
        background: #FFFFFF !important;
    }

    /* Groups / filter section */
    .speeding-events-page .speeding-filter-box {
        background: #FFFFFF !important;
    }
    /* =========================================================
   SPEEDING EVENTS - FINAL LIGHT TEAL CHART HEADER
   ========================================================= */

    /* Light teal header + white chart area */
    .speeding-events-page #seCountChart .apexcharts-canvas,
    .speeding-events-page #seBySeverityByMonth .apexcharts-canvas {
        background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 52px, #FFFFFF 52px, #FFFFFF 100% ) !important;
    }

    /* Keep SVG transparent so the light teal header is visible */
    .speeding-events-page #seCountChart .apexcharts-svg,
    .speeding-events-page #seBySeverityByMonth .apexcharts-svg {
        background: transparent !important;
    }

    /* Chart heading text */
    .speeding-events-page #seCountChart .apexcharts-title-text,
    .speeding-events-page #seBySeverityByMonth .apexcharts-title-text {
        fill: #164E63 !important;
        color: #164E63 !important;
    }
    /* =========================================================
   SPEEDING EVENTS - MENU ICON
   ========================================================= */

    /* Make icon container transparent */
    .speeding-events-page #seCountChart .apexcharts-menu-icon,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        color: #164E63 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        /* Make SVG transparent */
        .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
            background: transparent !important;
            background-color: transparent !important;
            fill: #164E63 !important;
            color: #164E63 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    /* =========================================================
   SPEEDING EVENTS - MENU ICON
   ========================================================= */

    .speeding-events-page #seCountChart .apexcharts-menu-icon,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        color: #164E63 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
            background: transparent !important;
            background-color: transparent !important;
            width: 20px !important;
            height: 20px !important;
            fill: #164E63 !important;
            color: #164E63 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

            .speeding-events-page #seCountChart .apexcharts-menu-icon svg path,
            .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg path {
                fill: #164E63 !important;
                opacity: 1 !important;
                visibility: visible !important;
            }


    /* =========================================================
   SPEEDING EVENTS - CHART BOXES
   ========================================================= */

    .speeding-events-page .speeding-chart-box {
        background: #FFFFFF !important;
        overflow: hidden !important;
    }

        .speeding-events-page .speeding-chart-box .box-body {
            background: #FFFFFF !important;
        }


    /* =========================================================
   SPEEDING EVENTS - CHART HEADINGS
   ========================================================= */

    .speeding-events-page #seCountChart,
    .speeding-events-page #seBySeverityByMonth {
        background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 52px, #FFFFFF 52px, #FFFFFF 100% ) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

        /* Chart SVG transparent */
        .speeding-events-page #seCountChart .apexcharts-svg,
        .speeding-events-page #seBySeverityByMonth .apexcharts-svg {
            background: transparent !important;
        }

        /* Existing chart titles */
        .speeding-events-page #seCountChart .apexcharts-title-text,
        .speeding-events-page #seBySeverityByMonth .apexcharts-title-text {
            fill: #164E63 !important;
            color: #164E63 !important;
            font-weight: 600 !important;
        }

        /* Existing title container */
        .speeding-events-page #seCountChart .apexcharts-title,
        .speeding-events-page #seBySeverityByMonth .apexcharts-title {
            display: block !important;
            visibility: visible !important;
            transform: none !important;
            border-bottom: none !important;
        }

        /* Softer gridlines */
        .speeding-events-page #seCountChart .apexcharts-gridline,
        .speeding-events-page #seBySeverityByMonth .apexcharts-gridline {
            stroke: #E5EEF0 !important;
        }


    /* =========================================================
   SPEEDING EVENTS - SEVERITY AREA
   ========================================================= */

    .speeding-events-page .se-speedometers-box-size {
        background: #F5F7F9 !important;
        border-radius: 10px !important;
    }

        /* Severity 1 */
        .speeding-events-page .se-speedometers-box-size .box-primary .box-header {
            background: #E0F2FE !important;
            color: #073F4D !important;
        }

        /* Severity 2 */
        .speeding-events-page .se-speedometers-box-size .box-success .box-header {
            background: #DDF5E8 !important;
            color: #073F4D !important;
        }

        /* Severity 3 */
        .speeding-events-page .se-speedometers-box-size .box-warning .box-header {
            background: #FFF2CC !important;
            color: #073F4D !important;
        }

        /* Severity 4 */
        .speeding-events-page .se-speedometers-box-size .box-danger .box-header {
            background: #FDE2E2 !important;
            color: #073F4D !important;
        }

        /* Severity titles */
        .speeding-events-page .se-speedometers-box-size .box-title {
            color: #073F4D !important;
        }

        /* Severity card bodies */
        .speeding-events-page .se-speedometers-box-size .box-body {
            background: #FFFFFF !important;
        }


    /* =========================================================
   SPEEDING EVENTS - TABLE CARD HEADERS
   ========================================================= */

    .speeding-events-page .sp-zone-title,
    .speeding-events-page .all-sp-title {
        color: #164E63 !important;
        background: #CFEDEC !important;
        display: block;
        margin: -10px -15px 0 -15px;
        padding: 14px 18px;
        /*border-radius: 12px 12px 0 0;*/
    }


    /* =========================================================
   SPEEDING EVENTS - TABLES
   ========================================================= */

    .speeding-events-page table.dataTable thead th {
        background: #F2F8F9 !important;
        color: #073F4D !important;
        font-weight: 700 !important;
    }

    .speeding-events-page table.dataTable tbody td {
        background: transparent !important;
        color: #073F4D !important;
    }


    /* =========================================================
   SPEEDING EVENTS - APEXCHARTS MENU
   ========================================================= */

    .speeding-events-page .apexcharts-menu {
        background: #004D4D !important;
    }


/* =========================================================
   SPEEDING EVENTS - TABLE HEADERS
   ========================================================= */

#speedingZones_wrapper table.dataTable thead th,
#allSpeedingEvents_wrapper table.dataTable thead th,
#seCountByDriver_wrapper table.dataTable thead th,
#seCountByTripReport_wrapper table.dataTable thead th {
    background-color: #F2F8F9 !important;
    color: #073F4D !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #D9E5E8 !important;
}


/* =========================================================
   SPEEDING EVENTS - TABLE STYLING
   ========================================================= */

#speedingZones_wrapper table.dataTable,
#allSpeedingEvents_wrapper table.dataTable,
#seCountByDriver_wrapper table.dataTable,
#seCountByTripReport_wrapper table.dataTable {
    border: 1px solid #E2E8F0 !important;
}

    #speedingZones_wrapper table.dataTable tbody td,
    #allSpeedingEvents_wrapper table.dataTable tbody td,
    #seCountByDriver_wrapper table.dataTable tbody td,
    #seCountByTripReport_wrapper table.dataTable tbody td {
        border-bottom: 1px solid #E2E8F0 !important;
    }


/* =========================================================
   SPEEDING EVENTS - SEARCH BOX
   ========================================================= */

#speedingZones_wrapper .dataTables_filter input,
#allSpeedingEvents_wrapper .dataTables_filter input,
#seCountByDriver_wrapper .dataTables_filter input,
#seCountByTripReport_wrapper .dataTables_filter input {
    background-color: #FFFFFF !important;
    color: #073F4D !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
}


/* =========================================================
   SPEEDING EVENT COUNT - DRIVER HEADER
   ========================================================= */

.speeding-events-page .sp-per-driver-title {
    background: #CFEDEC !important;
    color: #164E63 !important;
    display: block;
    margin: -10px -15px 0 -15px;
    padding: 14px 18px;
    /*border-radius: 12px 12px 0 0;*/
}


/* =========================================================
   SPEEDING EVENT COUNT - PER 1000 MILES
   ========================================================= */

.speeding-events-page .per-1000-title {
    background: #004157 !important;
    color: #FFFFFF !important;
    margin: -15px !important;
    padding: 14px 18px !important;
    /*border-radius: 12px 12px 0 0;*/
}


/* =========================================================
   SPEEDING EVENTS - OTHER HEADERS
   ========================================================= */

.speeding-events-page h4.speedo-title {
    background: #CFEDEC !important;
    color: #164E63 !important;
    display: block;
    margin: -10px -15px 0 -15px;
    padding: 14px 18px;
    /*border-radius: 12px 12px 0 0;*/
}

.speeding-events-page .sp-per-driver-title,
.speeding-events-page .per-1000-title,
.speeding-events-page .sp-per-tripreport-title {
    color: #164E63 !important;
    background: #CFEDEC !important;
    display: block;
    padding: 14px 18px;
    /*border-radius: 12px 12px 0 0;*/
    margin: -10px -15px 0 -15px;
}


/* =========================================================
   DRIVING EVENTS COUNT
   ========================================================= */

#drivingEventsCount {
    position: relative;
    background: #FFFFFF !important;
    overflow: hidden;
}

    #drivingEventsCount .apexcharts-canvas {
        position: relative;
        z-index: 1;
    }

    #drivingEventsCount .apexcharts-svg {
        background: transparent !important;
    }

    #drivingEventsCount::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: #CFEDEC !important;
        /*border-radius: 12px 12px 0 0;*/
    }


    #drivingEventsCount .apexcharts-title-text {
        fill: #164E63 !important;
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
        font-weight: 700 !important;
    }
/* =========================================================
   DRIVING EVENTS - FINAL TITLE OVERRIDE
   ========================================================= */

body #drivingEventsCount svg text.apexcharts-title-text,
body #drivingEventsCount svg text.apexcharts-title-text tspan {
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 700 !important;
}

/* =========================================================
   DRIVING EVENTS - FINAL CENTERED TITLE
   ========================================================= */

body #drivingEventsCount svg text.apexcharts-title-text {
    /*x: 50% !important;*/
    transform: none !important;
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 700 !important;
}

    body #drivingEventsCount svg text.apexcharts-title-text tspan {
        /*x: 50% !important;*/
        fill: #164E63 !important;
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
        font-weight: 700 !important;
    }
/* Driving Events filter card */
body:has(#drivingEventsCount) .content-wrapper .row:first-of-type .box {
    background: #FFFFFF !important;
}

body:has(#drivingEventsCount) .content-wrapper .row:first-of-type .box-body {
    background: #FFFFFF !important;
}

/* Driving Events Count by Severity */
.box:has(.severity-title) {
    background: #FFFFFF !important;
}

    .box:has(.severity-title) .box-body {
        background: #FFFFFF !important;
    }
/* Driving Events - chart header */
#drivingEventsCount {
    background: linear-gradient( to bottom, #18B5C8 0, #18B5C8 52px, #FFFFFF 52px, #FFFFFF 100% ) !important;
}

    #drivingEventsCount .apexcharts-canvas,
    #drivingEventsCount .apexcharts-svg {
        background: transparent !important;
    }

    #drivingEventsCount .apexcharts-title-text {
        fill: #FFFFFF !important;
        color: #FFFFFF !important;
    }
/* Events by Severity - heading */
.box:has(.severity-title) .severity-title {
    background: #CFEDEC !important;
    color: #164E63 !important;
    display: block;
    padding: 14px 18px;
    /*margin: -10px -15px 0 -15px;
    border-radius: 12px 12px 0 0;*/
}
/* Driving Events chart - remove outer aqua background */
#drivingEventsCount {
    background: #FFFFFF !important;
}
/* Driving Events chart outer card */
.box:has(#drivingEventsCount) > .box-body {
    background: #FFFFFF !important;
    padding: 0 !important;
}
/* Driving Events chart header */
#drivingEventsCount {
    position: relative !important;
    width: 100% !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
}
    #drivingEventsCount::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 52px !important;
        background: #CFEDEC !important;
        border-radius: 0 !important;
        pointer-events: none !important;
    }

    /* Driving Events - Theme */
    .box:has(#drivingEvents) {
    background: #FFFFFF !important;
}

    .box:has(#drivingEvents) > .box-header {
        background: #CFEDEC !important;
        color: #164E63 !important;
    }

        .box:has(#drivingEvents) > .box-header .box-title {
            color: #164E63 !important;
        }

    .box:has(#drivingEvents) > .box-body {
        background: #FFFFFF !important;
    }

    .box:has(#drivingEvents) .dataTables_filter input {
        background: #FFFFFF !important;
        color: #334155 !important;
        /*border: 1px solid #E2ECEE !important;*/
    }

    .box:has(#drivingEvents) .dataTables_filter label {
        color: #1F2D3D !important;
    }
    /* Driving Events table header */
    .box:has(#drivingEvents) #drivingEvents thead th {
        background: #F5FAFA !important;
        color: #164E63 !important;
        font-weight: 600 !important;
    }

        .box:has(#drivingEvents) #drivingEvents thead th .sorting,
        .box:has(#drivingEvents) #drivingEvents thead th .sorting_asc,
        .box:has(#drivingEvents) #drivingEvents thead th .sorting_desc {
            color: #164E63 !important;
        }

/* Fuel Performance - Main Chart */
.box:has(#fuelPerformanceByMonth) {
    background: #FFFFFF !important;
}

    .box:has(#fuelPerformanceByMonth) > .box-body {
        background: #FFFFFF !important;
    }

#fuelPerformanceByMonth {
    background: #FFFFFF !important;
}

    #fuelPerformanceByMonth .highcharts-title,
    #fuelPerformanceByMonth .highcharts-title text,
    #fuelPerformanceByMonth .highcharts-title tspan {
        color: #164E63 !important;
        fill: #164E63 !important;
    }

#fuelPerformanceByMonth {
    background: #FFFFFF;
    /*border-radius: 12px;*/
    overflow: hidden;
}


    /* Fuel Performance - Chart Header */

    #fuelPerformanceByMonth .apexcharts-canvas {
        background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 55px, #FFFFFF 55px, #FFFFFF 100% ) !important;
    }

    #fuelPerformanceByMonth .apexcharts-title-text {
        fill: #164E63 !important;
        color: #164E63 !important;
        font-weight: 700 !important;
    }

/* Fuel Performance - Chart Theme */
/* MPG + IDLE HOURS - CHART HEADERS */

#fuelPerformanceByMonthV1 .apexcharts-canvas,
#idleTimes .apexcharts-canvas {
    background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 55px, #FFFFFF 55px, #FFFFFF 100% ) !important;
}
/* Fuel Performance - Match All Idling Vehicles header corners */
#fuelPerformanceByMonthV1 .apexcharts-canvas,
#idleTimes .apexcharts-canvas {
    background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 55px, #FFFFFF 55px, #FFFFFF 100% ) !important;
    border-radius: 0 !important;
}

#fuelPerformanceByMonthV1 .apexcharts-title-text,
#idleTimes .apexcharts-title-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    font-weight: 700 !important;
}

#fuelPerformanceByMonthV1 .apexcharts-gridline,
#idleTimes .apexcharts-gridline {
    stroke: #E5EEF0 !important;
}

/* Fuel Performance - chart outer containers */

/*.box:has(#fuelPerformanceByMonthV1),
.box:has(#idleTimes) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
}

    .box:has(#fuelPerformanceByMonthV1) .box-body,
    .box:has(#idleTimes) .box-body {
        background: #FFFFFF !important;
    }*/
/* Fuel Performance - MPG and Idle Hours outer containers */

.box:has(#fuelPerformanceByMonthV1),
.box:has(#idleTimes) {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
    /* Remove the gap around chart headers */
    .box:has(#fuelPerformanceByMonthV1) > .box-body,
    .box:has(#idleTimes) > .box-body {
        background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 65px, #FFFFFF 65px, #FFFFFF 100% ) !important;
        border: none !important;
    }

/* =========================================================
   ALL IDLING VEHICLES
   ========================================================= */

.box:has(#idlingVehicles) {
    background: #FFFFFF !important;
    /*border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;*/
    box-shadow: 0 2px 14px rgba(10, 86, 111, .08) !important;
}

    .box:has(#idlingVehicles) .box-header {
        background: #CFEDEC !important;
        background-color: #CFEDEC !important;
        color: #164E63 !important;
        border: none !important;
        /*border-bottom: none !important;
        border-radius: 12px 12px 0 0 !important;*/
        box-shadow: none !important;
    }

        .box:has(#idlingVehicles) .box-header .idling-vehicles-title,
        .box:has(#idlingVehicles) .box-header .box-title {
            color: #164E63 !important;
            -webkit-text-fill-color: #164E63 !important;
            font-weight: 700 !important;
        }

    .box:has(#idlingVehicles) .box-body {
        background: #FFFFFF !important;
    }

/* All Idling Vehicles - Search */

#idlingVehicles_wrapper .dataTables_filter input {
    background-color: #FFFFFF !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    /*border: 1px solid #E2ECEE !important;
    border-radius: 4px !important;*/
    opacity: 1 !important;
}

    #idlingVehicles_wrapper .dataTables_filter input:focus {
        background-color: #FFFFFF !important;
        color: #1F2D3D !important;
        -webkit-text-fill-color: #1F2D3D !important;
        outline: none !important;
        border-color: #18B5C8 !important;
    }

/* All Idling Vehicles - Table Header */

#idlingVehicles_wrapper table.dataTable thead tr th,
#idlingVehicles_wrapper table.dataTable thead tr th span {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 600 !important;
}

/* DataTables sorting icons */

#idlingVehicles_wrapper table.dataTable thead th::before,
#idlingVehicles_wrapper table.dataTable thead th::after {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    opacity: 0.6 !important;
}

/* All Idling Vehicles - Table text */

#idlingVehicles_wrapper table.dataTable thead th,
#idlingVehicles_wrapper table.dataTable tbody td {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Search label */

#idlingVehicles_wrapper .dataTables_filter label {
    color: #334155 !important;
    opacity: 1 !important;
}

/* DataTables information text */

#idlingVehicles_wrapper .dataTables_info {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Highcharts menu icon */

.highcharts-button-symbol {
    stroke: #004157 !important;
}

.highcharts-button-box {
    fill: transparent !important;
    stroke: none !important;
}

/* Fuel Performance - Chart Menu Icons */

#fuelPerformanceByMonth .highcharts-contextbutton .highcharts-button-symbol,
#fuelPerformanceByMonthV1 .highcharts-contextbutton .highcharts-button-symbol,
#idleTimes .highcharts-contextbutton .highcharts-button-symbol {
    stroke: #FFFFFF !important;
}

#fuelPerformanceByMonth .apexcharts-title,
#fuelPerformanceByMonthV1 .apexcharts-title,
#idleTimes .apexcharts-title {
    padding-left: 12px !important;
}

/* Capacity & Utilisation - Chart Text Visibility */

#utilisationHours .highcharts-title,
#utilisationHours .highcharts-axis-labels text,
#utilisationHours .highcharts-axis-title,
#utilisationHours .highcharts-legend-item text,
#utilisationHours .highcharts-data-label text,
#usageChart .highcharts-title,
#usageChart .highcharts-axis-labels text,
#usageChart .highcharts-axis-title,
#usageChart .highcharts-legend-item text,
#usageChart .highcharts-data-label text {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.box:has(#ActiveVehicles) .box-header,
.box:has(#InActiveVehicles) .box-header {
    background: #18B5C8 !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
    /*border-radius: 12px 12px 0 0 !important;*/
}

.box:has(#ActiveVehicles) .box-title,
.box:has(#InActiveVehicles) .box-title {
    color: #FFFFFF !important;
}

.box:has(#vehicles-usage) .box-header {
    background: #18B5C8 !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
    /*border-radius: 12px 12px 0 0 !important;*/
}

.box:has(#vehicles-usage) .textvehicleusage {
    color: #FFFFFF !important;
}

.box:has(#vehicles-Performance) .box-header {
    background: #18B5C8 !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
    /*border-radius: 12px 12px 0 0 !important;*/
}

.box:has(#vehicles-Performance) .textvehicleperformance {
    color: #FFFFFF !important;
}

.box:has(#ActiveVehicles) .box-header .box-title,
.box:has(#InActiveVehicles) .box-header .box-title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

    .box:has(#ActiveVehicles) .box-header .box-title *,
    .box:has(#InActiveVehicles) .box-header .box-title * {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }
/* =========================================
   Capacity & Utilisation - Client Theme
   ========================================= */

/* Filter Card */
.box:has(#ObjectGroupName) {
    background: #FFFFFF !important;
    /*border: 1px solid #E2E9EF !important;*/
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
}

    .box:has(#ObjectGroupName) .box-body {
        background: #FFFFFF !important;
    }


/* Main Utilisation Chart */
.box:has(#utilisationHours) {
    background: #FFFFFF !important;
    /*border: 1px solid #E2E9EF !important;*/
    border-radius: 0px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden;
}

    .box:has(#utilisationHours) .box-body {
        background: #FFFFFF !important;
    }


/* Usage Chart */
.box:has(#usageChart) {
    background: #FFFFFF !important;
    /*border: 1px solid #E2E9EF !important;*/
    border-radius: 0px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden;
}

    .box:has(#usageChart) .box-body {
        background: #FFFFFF !important;
    }


/* Highcharts chart area */
#utilisationHours .highcharts-background,
#usageChart .highcharts-background {
    fill: #FFFFFF !important;
}


/* Chart titles */
#utilisationHours .highcharts-title,
#usageChart .highcharts-title {
    color: #164E63 !important;
    fill: #164E63 !important;
}


/* Active Vehicles / Inactive Vehicles Headers */
.box:has(#ActiveVehicles) .box-header,
.box:has(#InActiveVehicles) .box-header {
    background: #CFEDEC !important;
    color: #164E63 !important;
    border-bottom: none !important;
    /*border-radius: 12px 12px 0 0 !important;*/
}

.box:has(#ActiveVehicles) .box-title,
.box:has(#InActiveVehicles) .box-title {
    color: #164E63 !important;
}


/* Active / Inactive table bodies */
.box:has(#ActiveVehicles) .box-body,
.box:has(#InActiveVehicles) .box-body {
    background: #FFFFFF !important;
}


/* Vehicles Usage / Performance Headers */
.box:has(#vehicles-usage) .box-header,
.box:has(#vehicles-Performance) .box-header {
    background: #CFEDEC !important;
    color: #164E63 !important;
    border-bottom: none !important;
    /*border-radius: 12px 12px 0 0 !important;*/
}

.box:has(#vehicles-usage) .box-body,
.box:has(#vehicles-Performance) .box-body {
    background: #FFFFFF !important;
}

.box:has(#vehicles-usage) .textvehicleusage,
.box:has(#vehicles-Performance) .textvehicleperformance {
    color: #164E63 !important;
}


/* Monthly Utilisation Hours - chart header */
.box:has(#utilisationHours) {
    position: relative;
    overflow: hidden;
}

#utilisationHours::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: #CFEDEC;
    /*border-radius: 12px 12px 0 0;*/
    z-index: 0;
}

#utilisationHours .highcharts-title,
#utilisationHours .highcharts-title text,
#utilisationHours .highcharts-title tspan {
    color: #164E63 !important;
    fill: #164E63 !important;
}

#utilisationHours .highcharts-button-symbol {
    stroke: #164E63 !important;
}


/* Weekly Usage chart header */
.box:has(#usageChart) {
    position: relative;
    overflow: hidden;
}

#usageChart::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: #CFEDEC;
    /*border-radius: 12px 12px 0 0;*/
    z-index: 0;
}

#usageChart .highcharts-title,
#usageChart .highcharts-title text,
#usageChart .highcharts-title tspan {
    color: #164E63 !important;
    fill: #164E63 !important;
}

#usageChart .highcharts-button-symbol {
    stroke: #164E63 !important;
}


/* Capacity & Utilisation tables - text visibility */

.box:has(#ActiveVehicles) table tbody td,
.box:has(#InActiveVehicles) table tbody td {
    color: #334155 !important;
    background: #FFFFFF !important;
}

.box:has(#ActiveVehicles) table thead th,
.box:has(#InActiveVehicles) table thead th {
    color: #164E63 !important;
    background: #F2F8F9 !important;
}


/* =========================================
   Capacity & Utilisation - Vehicle Tables
   ========================================= */

/* Table body */
#vehicles-usage_wrapper table.dataTable tbody td,
#vehicles-Performance_wrapper table.dataTable tbody td {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    background-color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* Table header */
#vehicles-usage_wrapper table.dataTable thead th,
#vehicles-Performance_wrapper table.dataTable thead th {
    background-color: #F2F8F9 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


    /* Table header sorting text/icons */
    #vehicles-usage_wrapper table.dataTable thead th::before,
    #vehicles-usage_wrapper table.dataTable thead th::after,
    #vehicles-Performance_wrapper table.dataTable thead th::before,
    #vehicles-Performance_wrapper table.dataTable thead th::after {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
        opacity: 0.7 !important;
    }


/* Table borders */
#vehicles-usage_wrapper table.dataTable,
#vehicles-Performance_wrapper table.dataTable {
    color: #334155 !important;
}

    #vehicles-usage_wrapper table.dataTable tbody tr td,
    #vehicles-Performance_wrapper table.dataTable tbody tr td {
        border-color: #E2ECEE !important;
    }

.row > div:has(.dataTables_wrapper) select,
.row > div:has(.dataTables_wrapper) input {
    background: #ffffff !important;
    color: #17404b !important;
}


/* Capacity & Utilisation - Vehicle table header text */
#vehicles-usage_wrapper table.dataTable thead th,
#vehicles-usage_wrapper table.dataTable thead th span,
#vehicles-usage_wrapper table.dataTable thead th div,
#vehicles-Performance_wrapper table.dataTable thead th,
#vehicles-Performance_wrapper table.dataTable thead th span,
#vehicles-Performance_wrapper table.dataTable thead th div {
    background: #F2F8F9 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 600 !important;
}


    /* Sorting icons */
    #vehicles-usage_wrapper table.dataTable thead th::before,
    #vehicles-usage_wrapper table.dataTable thead th::after,
    #vehicles-Performance_wrapper table.dataTable thead th::before,
    #vehicles-Performance_wrapper table.dataTable thead th::after {
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
        opacity: 0.6 !important;
    }

#utilisationHours .highcharts-title text,
#utilisationHours .highcharts-title tspan,
#usageChart .highcharts-title text,
#usageChart .highcharts-title tspan {
    fill: #164E63 !important;
    font-weight: 700 !important;
}
/* Capacity & Utilisation - Final Chart Heading Bold */

#utilisationHours svg text.highcharts-title,
#usageChart svg text.highcharts-title {
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
}

    #utilisationHours svg text.highcharts-title tspan,
    #usageChart svg text.highcharts-title tspan {
        fill: #164E63 !important;
        font-weight: 700 !important;
    }




/* Capacity & Utilisation - ApexCharts title */
#utilisationHours .apexcharts-title-text,
#usageChart .apexcharts-title-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 700 !important;
}

/* =========================================================
   PTO v Idle Time - Chart Theme
   ========================================================= */

/* Chart card */
/*body:has(#ptoVIdleTimechart) .box:has(#ptoVIdleTimechart) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
}*/
.box:has(#ptoVIdleTimechart) {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    body:has(#ptoVIdleTimechart) .box:has(#ptoVIdleTimechart) .box-body {
        background: #FFFFFF !important;
    }
/* Remove inner spacing so chart fills the card */
.box:has(#ptoVIdleTimechart) .box-body {
    padding: 0 !important;
}


/* Weekly Usage - Heading Text Override */

.box:has(#ActiveVehicles) .box-header .idling-vehicles-title,
.box:has(#InActiveVehicles) .box-header .idling-vehicles-title {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
}
/* Weekly Usage - Heading Text */

.box:has(#vehicles-usage) .textvehicleusage,
.box:has(#vehicles-Performance) .textvehicleperformance {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 600 !important;
}

/*body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-canvas,
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-svg {
    background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 40px, #FFFFFF 40px, #FFFFFF 100% ) !important;
}*/
/* Full-width teal chart heading */
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-canvas,
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-svg {
    background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 80px, #FFFFFF 80px, #FFFFFF 100% ) !important;
}
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .highcharts-background {
    fill: transparent !important;
    stroke: none !important;
}
/* =========================================================
   PTO v Idle Time - Final Chart Header
   ========================================================= */

body:has(#ptoVIdleTimechart) #ptoVIdleTimechart {
    position: relative;
}

    /* Light Teal header background */
    /*body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-canvas,
    body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-svg {
        background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 48px, #FFFFFF 48px, #FFFFFF 100% ) !important;
    }*/

    /* PTO v Idle Time - Chart Title */

    body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-title-text {
        fill: #164E63 !important;
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
        font-weight: 700 !important;
    }

    /* Existing date - move it below the teal header */
    body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-subtitle-text {
        fill: #164E63 !important;
        color: #164E63 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0px) !important;
    }
/* PTO v Idle Time - Date Range */
body:has(#ptoVIdleTimechart) #filterDateRange {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    border: 1px solid #E2ECEE !important;
}

body:has(#ptoVIdleTimechart) .input-group-addon {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #E2ECEE !important;
}

/* Chart title - Client Theme */
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-title-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    font-weight: 700 !important;
}

/* Chart subtitle/date - dark teal on white */
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-subtitle-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Chart labels */
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-xaxis-label,
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-yaxis-label {
    fill: #164E63 !important;
    color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Grid lines */
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-gridline {
    stroke: #E5EEF0 !important;
}
/* ---------------------------------------------------------
   Chart Title - Explicit Visibility
   --------------------------------------------------------- */

#ptoVIdleTimechart svg text.apexcharts-title-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: #164E63 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

#ptoVIdleTimechart svg text.apexcharts-subtitle-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: #164E63 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}
/* =========================================================
   PTO v Idle Time - Filter Card WHITE
   ========================================================= */

body:has(#ptoVIdleTimechart) .col-md-12 .box.box-solid.box-default,
body:has(#ptoVIdleTimechart) .col-md-12 .box.box-solid.box-default .box-body,
body:has(#ptoVIdleTimechart) .col-md-12 .box.box-solid.box-default #ReportFilterForm {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}
/* =========================================================
   PTO v Idle Time - Date Range Picker Theme
   ========================================================= */

body:has(#ptoVIdleTimechart) .daterangepicker {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 10px !important;
}

    /* Start / End date input boxes */
    body:has(#ptoVIdleTimechart) .daterangepicker .input-mini {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #E2ECEE !important;
        box-shadow: none !important;
    }

    /* Calendar area */
    body:has(#ptoVIdleTimechart) .daterangepicker .calendar-table {
        background: #FFFFFF !important;
        border: none !important;
    }

    /* Range list */
    body:has(#ptoVIdleTimechart) .daterangepicker .ranges li {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border-radius: 6px !important;
    }

        /* Range hover */
        body:has(#ptoVIdleTimechart) .daterangepicker .ranges li:hover {
            background: #E5F5F7 !important;
            color: #164E63 !important;
        }

        /* Active range */
        body:has(#ptoVIdleTimechart) .daterangepicker .ranges li.active {
            background: #18B5C8 !important;
            color: #FFFFFF !important;
        }

    /* Calendar text */
    body:has(#ptoVIdleTimechart) .daterangepicker td,
    body:has(#ptoVIdleTimechart) .daterangepicker th {
        color: #164E63 !important;
    }

        /* Selected date */
        body:has(#ptoVIdleTimechart) .daterangepicker td.active,
        body:has(#ptoVIdleTimechart) .daterangepicker td.active:hover {
            background: #18B5C8 !important;
            color: #FFFFFF !important;
        }

        /* Date range inside calendar */
        body:has(#ptoVIdleTimechart) .daterangepicker td.in-range {
            background: #E5F5F7 !important;
            color: #164E63 !important;
        }

    /* Apply */
    body:has(#ptoVIdleTimechart) .daterangepicker .applyBtn {
        background: #18B5C8 !important;
        border-color: #18B5C8 !important;
        color: #FFFFFF !important;
    }

    /* Cancel */
    body:has(#ptoVIdleTimechart) .daterangepicker .cancelBtn {
        background: #FFFFFF !important;
        border: 1px solid #E2ECEE !important;
        color: #164E63 !important;
    }

    /* Month / Year dropdown */
    body:has(#ptoVIdleTimechart) .daterangepicker select.monthselect,
    body:has(#ptoVIdleTimechart) .daterangepicker select.yearselect {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #E2ECEE !important;
    }
/* Vehicle Performance Date Range */
#filterDateRange1 {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D9E6EA !important;
}

/* Capacity Hours */
#txtCapacity {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D9E6EA !important;
}
/* OptiDrive table headings */
.box:has(#bestDrivers) .box-title,
.box:has(#goodDrivers) .box-title,
.box:has(#worstDrivers) .box-title {
    color: #164E63 !important;
}
/* ================================
   AutoBoard Pack - Theme Controls
   ================================ */

/* All Select2 / dropdown controls */
.select2-container--default .select2-selection--single {
    background-color: #FFFFFF !important;
    border: 1px solid #D9E6EA !important;
    color: #164E63 !important;
    height: 40px !important;
    border-radius: 4px !important;
}

    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        color: #164E63 !important;
        line-height: 38px !important;
    }

    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
        height: 38px !important;
    }

/* Opened Select2 dropdown */
.select2-container--default .select2-dropdown {
    background-color: #FFFFFF !important;
    border: 1px solid #D9E6EA !important;
}

/* Dropdown search box */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #18B5C8 !important;
}

/* Dropdown options */
.select2-container--default .select2-results__option {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
}

/* Hover / highlighted option */
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background-color: #18B5C8 !important;
    color: #FFFFFF !important;
}

/* Selected option */
.select2-container--default
.select2-results__option[aria-selected="true"] {
    background-color: #E8F8FA !important;
    color: #164E63 !important;
}


/* Normal HTML select controls */
#ddlWDys,
#ddlMonth,
#ddlYear,
#ddlQuterly {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D9E6EA !important;
}


/* Input controls */
#filterDateRange1,
#txtCapacity {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D9E6EA !important;
}


/* Labels */
.control-label {
    color: #164E63 !important;
}
/* ================================
   Driver Performance Table Colors
   ================================ */

/* Excellent Drivers */
#bestDrivers thead th {
    background-color: #C8E6C9 !important;
    color: #1B5E20 !important;
}

/* Good Drivers */
#goodDrivers thead th {
    background-color: #FFF8E1 !important;
    color: #E65100 !important;
}

/* Needs Improvement */
#worstDrivers thead th {
    background-color: #FFCDD2 !important;
    color: #B71C1C !important;
}

#bestDrivers,
#goodDrivers,
#worstDrivers {
    border: 1px solid #D9E6EA !important;
}

    #bestDrivers th,
    #bestDrivers td,
    #goodDrivers th,
    #goodDrivers td,
    #worstDrivers th,
    #worstDrivers td {
        border: 1px solid #D9E6EA !important;
    }
/* Speeding Events Charts - Light Theme */

.box:has(#seCountChart),
.box:has(#seBySeverityByMonth) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
}

    .box:has(#seCountChart) .box-body,
    .box:has(#seBySeverityByMonth) .box-body {
        background: #FFFFFF !important;
    }

#seCountChart,
#seBySeverityByMonth {
    background: #FFFFFF !important;
}

/* =========================================================
   AUTOBOARD PACK - DRIVER & CHART HEADER THEME
   ========================================================= */

/* ---------------- DRIVER CARDS ---------------- */

.box:has(#bestDrivers),
.box:has(#goodDrivers),
.box:has(#worstDrivers) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden;
}

    /* Excellent Drivers header */
    .box:has(#bestDrivers) .box-header {
        background: #C8E6C9 !important;
        border-bottom: none !important;
    }

        .box:has(#bestDrivers) .box-header .box-title {
            color: #1B5E20 !important;
            font-weight: 600 !important;
        }

    /* Good Drivers header */
    .box:has(#goodDrivers) .box-header {
        background: #FFF8E1 !important;
        border-bottom: none !important;
    }

        .box:has(#goodDrivers) .box-header .box-title {
            color: #E65100 !important;
            font-weight: 600 !important;
        }

    /* Needs Improvement header */
    .box:has(#worstDrivers) .box-header {
        background: #FFCDD2 !important;
        border-bottom: none !important;
    }

        .box:has(#worstDrivers) .box-header .box-title {
            color: #B71C1C !important;
            font-weight: 600 !important;
        }


/* ---------------- DRIVER TABLE HEADERS ---------------- */

/* Excellent */
#bestDrivers thead th {
    background-color: #C8E6C9 !important;
    color: #1B5E20 !important;
}

/* Good */
#goodDrivers thead th {
    background-color: #FFF8E1 !important;
    color: #E65100 !important;
}

/* Needs Improvement */
#worstDrivers thead th {
    background-color: #FFCDD2 !important;
    color: #B71C1C !important;
}


/* ---------------- DRIVER TABLE BORDERS ---------------- */

#bestDrivers,
#goodDrivers,
#worstDrivers {
    border: 1px solid #D9E6EA !important;
}

    #bestDrivers th,
    #bestDrivers td,
    #goodDrivers th,
    #goodDrivers td,
    #worstDrivers th,
    #worstDrivers td {
        border: 1px solid #D9E6EA !important;
    }


/* =========================================================
   SPEEDING EVENTS CHART HEADERS
   ========================================================= */

/* Chart cards */
.box:has(#seCountChart),
.box:has(#seBySeverityByMonth) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden;
}

#seCountChart .apexcharts-canvas,
#seBySeverityByMonth .apexcharts-canvas {
    background: #FFFFFF !important;
}
/* Speeding Events - Chart Heading Background */

.speeding-events-page #seCountChart .apexcharts-title,
.speeding-events-page #seBySeverityByMonth .apexcharts-title {
    background: #CFEDEC !important;
}


/* Chart menu icon */
#seCountChart .apexcharts-menu-icon,
#seBySeverityByMonth .apexcharts-menu-icon {
    fill: #FFFFFF !important;
}
/* =========================================================
   SPEEDING EVENTS - MENU ICON FINAL
   ========================================================= */

.speeding-events-page #seCountChart .apexcharts-menu-icon,
.speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    fill: none !important;
    color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================================
   SPEEDING EVENTS - REMOVE DARK SQUARE FROM MENU ICON
   ========================================================= */

.speeding-events-page #seCountChart .apexcharts-menu-icon,
.speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    fill: transparent !important;
    color: #164E63 !important;
}

    /* Remove background/fill from SVG */
    .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
        background: transparent !important;
        background-color: transparent !important;
        fill: transparent !important;
    }

        /* Keep only the actual icon stroke */
        .speeding-events-page #seCountChart .apexcharts-menu-icon svg path,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg path {
            fill: none !important;
            stroke: #164E63 !important;
            stroke-width: 2 !important;
        }
/* =========================================================
   SPEEDING EVENTS - FINAL WHITE TITLE + MENU
   ========================================================= */

/* ---------- CHART TITLE ---------- */




/* ---------- MENU ICON ---------- */

body .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
body .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: transparent !important;
}


/* =========================================================
   SPEEDING EVENTS - CHART TITLE FINAL
   ========================================================= */

body .speeding-events-page #seCountChart svg text.apexcharts-title-text,
body .speeding-events-page #seCountChart svg text.apexcharts-title-text *,
body .speeding-events-page #seCountChart svg text.apexcharts-title-text tspan,
body .speeding-events-page #seBySeverityByMonth svg text.apexcharts-title-text,
body .speeding-events-page #seBySeverityByMonth svg text.apexcharts-title-text *,
body .speeding-events-page #seBySeverityByMonth svg text.apexcharts-title-text tspan {
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    stroke: none !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}


body .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
body .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    background: transparent !important;
}


/* Keep menu button transparent */
body .speeding-events-page #seCountChart .apexcharts-menu-icon,
body .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =========================================================
   SPEEDING EVENTS - CLEAN HAMBURGER MENU ICON
   ========================================================= */

/* Keep the ApexCharts menu button clickable */
.speeding-events-page #seCountChart .apexcharts-menu-icon,
.speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: transparent !important;
    fill: none !important;
}

    /* Hide ApexCharts original icon */
    .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
        display: none !important;
    }

    /* Create our own clean hamburger icon */
    .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
        content: "☰" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 22px !important;
        line-height: 22px !important;
        font-weight: 600 !important;
        font-family: Arial, sans-serif !important;
        color: #164E63 !important;
        background: transparent !important;
    }
/* =========================================================
   SPEEDING EVENTS - CENTER TITLES
   ========================================================= */

.speeding-events-page #seCountChart .apexcharts-title-text,
.speeding-events-page #seBySeverityByMonth .apexcharts-title-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    text-anchor: middle !important;
    transform: translateX(50%) !important;
}

.speeding-events-page #seCountChart .apexcharts-title,
.speeding-events-page #seBySeverityByMonth .apexcharts-title {
    border-bottom: none !important;
}

/* Softer gridlines */
#seCountChart .apexcharts-gridline,
#seBySeverityByMonth .apexcharts-gridline {
    stroke: #E5EEF0 !important;
}


/* ---------------- CHART CONTAINER ---------------- */

#seCountChart,
#seBySeverityByMonth {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    overflow: hidden;
}


/* Chart card ka background + rounded corners */

.speeding-events-page #seCountChart,
.speeding-events-page #seBySeverityByMonth {
    background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 52px, #FFFFFF 52px, #FFFFFF 100% ) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}




    /* ---------- Menu Icon ---------- */

    .speeding-events-page #seCountChart .apexcharts-menu-icon,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
        position: relative !important;
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: transparent !important;
        fill: none !important;
    }


        /* Hide original ApexCharts icon */

        .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
            display: none !important;
        }


        /* Create clean dark-teal hamburger */

        .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
            content: "\2630" !important;
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            font-size: 22px !important;
            line-height: 22px !important;
            font-weight: 600 !important;
            font-family: Arial, sans-serif !important;
            color: #164E63 !important;
            -webkit-text-fill-color: #164E63 !important;
            background: transparent !important;
        }

    .speeding-events-page #seCountChart .apexcharts-title,
    .speeding-events-page #seBySeverityByMonth .apexcharts-title {
        border-bottom: none !important;
    }

    /* ---------- Menu (hamburger) icon: apexcharts ka default icon hide karke
   apna saaf ☰ banaya hai, ab pakka white ---------- */
    .speeding-events-page #seCountChart .apexcharts-menu-icon,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
        position: relative !important;
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: transparent !important;
        fill: none !important;
    }

        .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
            display: none !important;
        }

        .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
            content: "\2630" !important; /* ☰ */
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            font-size: 22px !important;
            line-height: 22px !important;
            font-weight: 600 !important;
            font-family: Arial, sans-serif !important;
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
            background: transparent !important;
        }

/* =========================================================
   SPEEDING EVENTS CHART HEADERS
   ========================================================= */

/* Chart cards */
.box:has(#seCountChart),
.box:has(#seBySeverityByMonth) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden;
}

#seCountChart .apexcharts-canvas,
#seBySeverityByMonth .apexcharts-canvas {
    background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 52px, #FFFFFF 52px, #FFFFFF 100% ) !important;
}
/* Speeding Events - Chart Heading Text */
.speeding-events-page #seCountChart svg text.apexcharts-title-text,
.speeding-events-page #seBySeverityByMonth svg text.apexcharts-title-text,
.speeding-events-page #seCountChart svg text.apexcharts-title-text tspan,
.speeding-events-page #seBySeverityByMonth svg text.apexcharts-title-text tspan {
    fill: #164E63 !important;
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 700 !important;
}
/* Speeding Events - Chart Heading Background */

.speeding-events-page #seCountChart .apexcharts-title,
.speeding-events-page #seBySeverityByMonth .apexcharts-title {
    background: #CFEDEC !important;
}
/* Chart menu icon */
#seCountChart .apexcharts-menu-icon,
#seBySeverityByMonth .apexcharts-menu-icon {
    fill: #FFFFFF !important;
}
/* =========================================================
   SPEEDING EVENTS - MENU ICON FINAL
   ========================================================= */

.speeding-events-page #seCountChart .apexcharts-menu-icon,
.speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    fill: none !important;
    color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================================
   SPEEDING EVENTS - REMOVE DARK SQUARE FROM MENU ICON
   ========================================================= */

.speeding-events-page #seCountChart .apexcharts-menu-icon,
.speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    fill: transparent !important;
    color: #164E63 !important;
}

    /* Remove background/fill from SVG */
    .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
        background: transparent !important;
        background-color: transparent !important;
        fill: transparent !important;
    }

        /* Keep only the actual icon stroke */
        .speeding-events-page #seCountChart .apexcharts-menu-icon svg path,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg path {
            fill: none !important;
            stroke: #164E63 !important;
            stroke-width: 2 !important;
        }



/* ---------- MENU ICON ---------- */

body .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
body .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: transparent !important;
}


body .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
body .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    background: transparent !important;
}


/* Keep menu button transparent */
body .speeding-events-page #seCountChart .apexcharts-menu-icon,
body .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =========================================================
   SPEEDING EVENTS - CLEAN HAMBURGER MENU ICON
   ========================================================= */

/* Keep the ApexCharts menu button clickable */
.speeding-events-page #seCountChart .apexcharts-menu-icon,
.speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: transparent !important;
    fill: none !important;
}

    /* Hide ApexCharts original icon */
    .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
        display: none !important;
    }

    /* Create our own clean hamburger icon */
    .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
        content: "☰" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 22px !important;
        line-height: 22px !important;
        font-weight: 600 !important;
        font-family: Arial, sans-serif !important;
        color: #164E63 !important;
        background: transparent !important;
    }
/* =========================================================
   SPEEDING EVENTS - CENTER TITLES
   ========================================================= */

.speeding-events-page #seCountChart .apexcharts-title-text,
.speeding-events-page #seBySeverityByMonth .apexcharts-title-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    text-anchor: middle !important;
    transform: translateX(50%) !important;
}

.speeding-events-page #seCountChart .apexcharts-title,
.speeding-events-page #seBySeverityByMonth .apexcharts-title {
    border-bottom: none !important;
}

/* Softer gridlines */
#seCountChart .apexcharts-gridline,
#seBySeverityByMonth .apexcharts-gridline {
    stroke: #E5EEF0 !important;
}


/* ---------------- CHART CONTAINER ---------------- */

#seCountChart,
#seBySeverityByMonth {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    overflow: hidden;
}


/* Chart card ka background + rounded corners */
.speeding-events-page #seCountChart,
.speeding-events-page #seBySeverityByMonth {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    overflow: hidden;
}



    .speeding-events-page #seCountChart .apexcharts-title,
    .speeding-events-page #seBySeverityByMonth .apexcharts-title {
        border-bottom: none !important;
    }

    /* ---------- Menu (hamburger) icon: apexcharts ka default icon hide karke
   apna saaf ☰ banaya hai, ab pakka white ---------- */
    .speeding-events-page #seCountChart .apexcharts-menu-icon,
    .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon {
        position: relative !important;
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: transparent !important;
        fill: none !important;
    }

        .speeding-events-page #seCountChart .apexcharts-menu-icon svg,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon svg {
            display: none !important;
        }

        .speeding-events-page #seCountChart .apexcharts-menu-icon::before,
        .speeding-events-page #seBySeverityByMonth .apexcharts-menu-icon::before {
            content: "\2630" !important; /* ☰ */
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            font-size: 22px !important;
            line-height: 22px !important;
            font-weight: 600 !important;
            font-family: Arial, sans-serif !important;
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
            background: transparent !important;
        }



/* =========================================================
   AUTOBOARD PACK - EVENTS BY SEVERITY
   ========================================================= */

/* Main Events by Severity card */
.box:has(#speedeventsspeedometer) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden !important;
}

/* =========================================================
   EVENTS BY SEVERITY - MAIN HEADER
   ========================================================= */
/* =========================================================
   EVENTS BY SEVERITY - MAIN HEADER
   ========================================================= */

.speeding-events-page .box-header:has(.speedo-title) {
    background: #CFEDEC !important;
    color: #164E63 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

    .speeding-events-page .box-header:has(.speedo-title) .speedo-title {
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
        font-weight: 600 !important;
    }

.speeding-events-page .box-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E9EF !important;
}

.box:has(#speedeventsspeedometer) > .box-header .speedo-title {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 600 !important;
}

/* Main section body */
#speedeventsspeedometer {
    background: #FFFFFF !important;
    padding: 15px !important;
}


    /* Remove old turquoise background */
    #speedeventsspeedometer .se-speedometers-box-size {
        background: #FFFFFF !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }


        /* =========================================================
   SEVERITY CARDS
   ========================================================= */

        /* Common card */
        #speedeventsspeedometer .se-speedometers-box-size .box {
            background: #FFFFFF !important;
            border: 1px solid #E2E9EF !important;
            border-radius: 10px !important;
            box-shadow: 0 2px 10px rgba(10, 86, 111, 0.07) !important;
            overflow: hidden !important;
        }


    /* Severity 1 */
    #speedeventsspeedometer .box-primary .box-header {
        background: #E0F2FE !important;
        border-bottom: 1px solid #D2EAF5 !important;
    }

    #speedeventsspeedometer .box-primary .box-title {
        color: #075985 !important;
    }


    /* Severity 2 */
    #speedeventsspeedometer .box-success .box-header {
        background: #DDF5E8 !important;
        border-bottom: 1px solid #C9EBD8 !important;
    }

    #speedeventsspeedometer .box-success .box-title {
        color: #166534 !important;
    }


    /* Severity 3 */
    #speedeventsspeedometer .box-warning .box-header {
        background: #FFF2CC !important;
        border-bottom: 1px solid #F5E5AE !important;
    }

    #speedeventsspeedometer .box-warning .box-title {
        color: #B45309 !important;
    }


    /* Severity 4 */
    #speedeventsspeedometer .box-danger .box-header {
        background: #FDE2E2 !important;
        border-bottom: 1px solid #F5CACA !important;
    }

    #speedeventsspeedometer .box-danger .box-title {
        color: #B91C1C !important;
    }


    /* Gauge body */
    #speedeventsspeedometer .box-primary .box-body,
    #speedeventsspeedometer .box-success .box-body,
    #speedeventsspeedometer .box-warning .box-body,
    #speedeventsspeedometer .box-danger .box-body {
        background: #FFFFFF !important;
    }

/* DataTables Search Box - VTEC Theme */
.dataTables_filter input {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D7E3E8 !important;
    border-radius: 6px !important;
    height: 38px !important;
    padding: 6px 10px !important;
    outline: none !important;
}

    .dataTables_filter input:focus {
        border-color: #18B5C8 !important;
        box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.15) !important;
    }




/* =========================================================
   AUTOBOARD PACK - EVENTS BY SEVERITY
   ========================================================= */

/* Main Events by Severity card */
.box:has(#speedeventsspeedometer) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden !important;
}

/* =========================================================
   EVENTS BY SEVERITY - MAIN HEADER
   ========================================================= */
/* =========================================================
   EVENTS BY SEVERITY - MAIN HEADER
   ========================================================= */

.speeding-events-page .box-header:has(.speedo-title) {
    background: #CFEDEC !important;
    color: #164E63 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

    .speeding-events-page .box-header:has(.speedo-title) .speedo-title {
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
        font-weight: 600 !important;
    }

.speeding-events-page .box-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E9EF !important;
}

.box:has(#speedeventsspeedometer) > .box-header .speedo-title {
    color: #164E63 !important;
    -webkit-text-fill-color: #164E63 !important;
    font-weight: 600 !important;
}


/* Main section body */
#speedeventsspeedometer {
    background: #FFFFFF !important;
    padding: 15px !important;
}


    /* Remove old turquoise background */
    #speedeventsspeedometer .se-speedometers-box-size {
        background: #FFFFFF !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }


        /* =========================================================
   SEVERITY CARDS
   ========================================================= */

        /* Common card */
        #speedeventsspeedometer .se-speedometers-box-size .box {
            background: #FFFFFF !important;
            border: 1px solid #E2E9EF !important;
            border-radius: 10px !important;
            box-shadow: 0 2px 10px rgba(10, 86, 111, 0.07) !important;
            overflow: hidden !important;
        }


    /* Severity 1 */
    #speedeventsspeedometer .box-primary .box-header {
        background: #E0F2FE !important;
        border-bottom: 1px solid #D2EAF5 !important;
    }

    #speedeventsspeedometer .box-primary .box-title {
        color: #075985 !important;
    }


    /* Severity 2 */
    #speedeventsspeedometer .box-success .box-header {
        background: #DDF5E8 !important;
        border-bottom: 1px solid #C9EBD8 !important;
    }

    #speedeventsspeedometer .box-success .box-title {
        color: #166534 !important;
    }


    /* Severity 3 */
    #speedeventsspeedometer .box-warning .box-header {
        background: #FFF2CC !important;
        border-bottom: 1px solid #F5E5AE !important;
    }

    #speedeventsspeedometer .box-warning .box-title {
        color: #B45309 !important;
    }


    /* Severity 4 */
    #speedeventsspeedometer .box-danger .box-header {
        background: #FDE2E2 !important;
        border-bottom: 1px solid #F5CACA !important;
    }

    #speedeventsspeedometer .box-danger .box-title {
        color: #B91C1C !important;
    }


    /* Gauge body */
    #speedeventsspeedometer .box-primary .box-body,
    #speedeventsspeedometer .box-success .box-body,
    #speedeventsspeedometer .box-warning .box-body,
    #speedeventsspeedometer .box-danger .box-body {
        background: #FFFFFF !important;
    }

/* DataTables Search Box - VTEC Theme */
.dataTables_filter input {
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D7E3E8 !important;
    border-radius: 6px !important;
    height: 38px !important;
    padding: 6px 10px !important;
    outline: none !important;
}

    .dataTables_filter input:focus {
        border-color: #18B5C8 !important;
        box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.15) !important;
    }


/* =========================================================
   STANDARD CHECK TEMPLATES
   ========================================================= */

body.skin-black-light .content .box:has(#templates) {
    background: #FFFFFF !important;
    border: 1px solid #E1E8EC !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(7, 63, 77, 0.08) !important;
    overflow: hidden;
}

    body.skin-black-light .content .box:has(#templates) .box-header {
        background: #CFEDEC !important;
        color: #073F4D !important;
        border-bottom: none !important;
        padding: 18px 20px !important;
    }

        body.skin-black-light .content .box:has(#templates) .box-header h4 {
            color: #073F4D !important;
            font-size: 20px !important;
            font-weight: 700 !important;
            margin: 0 !important;
        }

    body.skin-black-light .content .box:has(#templates) .box-body {
        background: #FFFFFF !important;
    }

/* Table header */
#templates thead th {
    background: #F2F8F9 !important;
    color: #073F4D !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #D9E7EA !important;
}

/* Table body */
#templates tbody td {
    background: #FFFFFF !important;
    color: #073F4D !important;
    border-color: #D9E7EA !important;
}

/* Edit button */
#templates .btn-info {
    background: #18B5C8 !important;
    border-color: #18B5C8 !important;
    color: #FFFFFF !important;
}

    #templates .btn-info:hover {
        background: #129CAF !important;
        border-color: #129CAF !important;
    }
/* Standard Check Templates - DataTable Info */
#templates_wrapper .dataTables_info {
    display: block !important;
    color: #073F4D !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-top: 10px !important;
}

/* =========================================================
   STANDALONE CHECK TEMPLATES - VTEC THEME
   ========================================================= */

.box:has(#standaloneTemplates),
.box:has(#templateFields) {
    background: #FFFFFF !important;
    border: 1px solid #E1E8EC !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(7, 63, 77, 0.08) !important;
    overflow: hidden;
}

/* Card headings */
.box:has(#standalone-templates) .box-header,
.box:has(#standalone-template-fields) .box-header {
    background: #CFEDEC !important;
    background-color: #CFEDEC !important;
    color: #073F4D !important;
    border-bottom: none !important;
    min-height: 58px;
    padding: 14px 18px !important;
}


    /* Heading text */
    .box:has(#standalone-templates) .box-header h4,
    .box:has(#standalone-template-fields) .box-header h4 {
        color: #073F4D !important;
        -webkit-text-fill-color: #073F4D !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: 5px 0 !important;
    }
/* Card Body */
.box:has(#standaloneTemplates) .box-body,
.box:has(#templateFields) .box-body {
    background: #FFFFFF !important;
}

/* Table Header */
#standaloneTemplates thead th,
#templateFields thead th {
    background: #F2F8F9 !important;
    color: #073F4D !important;
    font-weight: 700 !important;
    border-color: #D9E7EA !important;
}

/* Table Body */
#standaloneTemplates tbody td,
#templateFields tbody td {
    background: #FFFFFF !important;
    color: #073F4D !important;
    border-color: #D9E7EA !important;
}

/* Search */
#standaloneTemplates_wrapper .dataTables_filter input,
#templateFields_wrapper .dataTables_filter input {
    background: #FFFFFF !important;
    color: #073F4D !important;
    border: 1px solid #D7E3E8 !important;
    border-radius: 6px !important;
}

    #standaloneTemplates_wrapper .dataTables_filter input:focus,
    #templateFields_wrapper .dataTables_filter input:focus {
        border-color: #18B5C8 !important;
        box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.15) !important;
    }

/* Buttons */
.box:has(#standaloneTemplates) .btn-info,
.box:has(#templateFields) .btn-info {
    background: #18B5C8 !important;
    border-color: #18B5C8 !important;
    color: #FFFFFF !important;
}

/* DataTable info */
#standaloneTemplates_wrapper .dataTables_info,
#templateFields_wrapper .dataTables_info {
    color: #073F4D !important;
}

/* Pagination active */
#standaloneTemplates_wrapper .pagination > .active > a,
#templateFields_wrapper .pagination > .active > a {
    background: #18B5C8 !important;
    border-color: #18B5C8 !important;
    color: #FFFFFF !important;
}

/* =========================================================
   Standalone Check Templates - VTEC Theme
   ========================================================= */

/* Main cards */
.box:has(#standalone-templates),
.box:has(#standalone-template-fields) {
    background: #FFFFFF !important;
    border: 1px solid #E2E9EF !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    overflow: hidden;
}

    /* Card headings */
    .box:has(#standalone-templates) .box-header,
    .box:has(#standalone-template-fields) .box-header {
        background-color: #CFEDEC !important;
        color: #FFFFFF !important;
        border-bottom: none !important;
        min-height: 58px;
        padding: 14px 18px !important;
    }

        /* Heading text */
        .box:has(#standalone-templates) .box-header h4,
        .box:has(#standalone-template-fields) .box-header h4 {
            color: #FFFFFF !important;
            font-size: 18px !important;
            font-weight: 600 !important;
            margin: 5px 0 !important;
        }

        /* Add Template / Add Field buttons */
        .box:has(#standalone-templates) .box-header .box-tools a,
        .box:has(#standalone-template-fields) .box-header .box-tools a {
            background: #004D4D !important;
            color: #FFFFFF !important;
            border: none !important;
            border-radius: 6px !important;
            padding: 7px 12px !important;
            font-weight: 600 !important;
            text-decoration: none !important;
        }

            .box:has(#standalone-templates) .box-header .box-tools a:hover,
            .box:has(#standalone-template-fields) .box-header .box-tools a:hover {
                background: #003B3B !important;
                color: #FFFFFF !important;
            }

    /* Card body */
    .box:has(#standalone-templates) .box-body,
    .box:has(#standalone-template-fields) .box-body {
        background: #FFFFFF !important;
        padding: 16px !important;
    }

/* DataTable header */
#standalone-templates thead th,
#standalone-template-fields thead th {
    background: #E8F6F7 !important;
    color: #004D4D !important;
    border: 1px solid #D6E7EA !important;
    font-weight: 600 !important;
}

/* Table cells */
#standalone-templates tbody td,
#standalone-template-fields tbody td {
    color: #164E63 !important;
    border: 1px solid #D6E7EA !important;
    background: #FFFFFF !important;
}

/* Table row hover */
#standalone-templates tbody tr:hover td,
#standalone-template-fields tbody tr:hover td {
    background: #F2FAFA !important;
}

/* Edit button */
#standalone-templates .edit-standalone-template {
    background: #18B5C8 !important;
    border-color: #18B5C8 !important;
    color: #FFFFFF !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
}

    #standalone-templates .edit-standalone-template:hover {
        background: #0FA0B2 !important;
        border-color: #0FA0B2 !important;
    }

/* DataTables Show entries */
.box:has(#standalone-templates) .dataTables_length,
.box:has(#standalone-template-fields) .dataTables_length {
    color: #164E63 !important;
}

/* Search label */
.box:has(#standalone-templates) .dataTables_filter label,
.box:has(#standalone-template-fields) .dataTables_filter label {
    color: #164E63 !important;
    font-weight: 500 !important;
}

/* Search box */
#standalone-templates_wrapper .dataTables_filter input,
#standalone-template-fields_wrapper .dataTables_filter input {
    border: 1px solid #C9DDE2 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #164E63 !important;
    outline: none !important;
}

    #standalone-templates_wrapper .dataTables_filter input:focus,
    #standalone-template-fields_wrapper .dataTables_filter input:focus {
        border-color: #18B5C8 !important;
        box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.12) !important;
    }

/* Showing 1 to X entries */
.box:has(#standalone-templates) .dataTables_info,
.box:has(#standalone-template-fields) .dataTables_info {
    color: #164E63 !important;
    font-weight: 500 !important;
}

/* Pagination */
.box:has(#standalone-templates) .dataTables_paginate .paginate_button,
.box:has(#standalone-template-fields) .dataTables_paginate .paginate_button {
    color: #164E63 !important;
    border: 1px solid #D6E7EA !important;
    background: #FFFFFF !important;
    border-radius: 5px !important;
}

    .box:has(#standalone-templates) .dataTables_paginate .paginate_button:hover,
    .box:has(#standalone-template-fields) .dataTables_paginate .paginate_button:hover {
        background: #E8F6F7 !important;
        color: #004D4D !important;
        border-color: #18B5C8 !important;
    }

    /* Active page */
    .box:has(#standalone-templates) .dataTables_paginate .paginate_button.current,
    .box:has(#standalone-template-fields) .dataTables_paginate .paginate_button.current {
        background: #18B5C8 !important;
        color: #FFFFFF !important;
        border-color: #18B5C8 !important;
    }

    /* Disabled pagination */
    .box:has(#standalone-templates) .dataTables_paginate .paginate_button.disabled,
    .box:has(#standalone-template-fields) .dataTables_paginate .paginate_button.disabled {
        color: #A8B8BD !important;
        background: #F7F9FA !important;
    }
/* =========================================================
   Standalone Check Template Modal - Light VTEC Theme
   ========================================================= */

.modal-content {
    border: 1px solid #D6E7EA !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(10, 86, 111, 0.15) !important;
    overflow: hidden;
}

/* Modal header */
.modal-header {
    background: #E8F6F7 !important;
    border-bottom: 1px solid #D6E7EA !important;
}

    .modal-header h4,
    .modal-header .modal-title {
        color: #164E63 !important;
        font-weight: 600 !important;
    }

    /* Close icon */
    .modal-header .close {
        color: #164E63 !important;
        opacity: 0.7 !important;
    }

        .modal-header .close:hover {
            opacity: 1 !important;
        }

/* Modal body */
.modal-body {
    background: #FFFFFF !important;
    color: #164E63 !important;
}

    /* Label */
    .modal-body label {
        color: #164E63 !important;
        font-weight: 500 !important;
    }

    /* Input */
    .modal-body input,
    .modal-body textarea,
    .modal-body select {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #BFDDE2 !important;
        border-radius: 5px !important;
    }

        .modal-body input:focus,
        .modal-body textarea:focus,
        .modal-body select:focus {
            border-color: #18B5C8 !important;
            box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.12) !important;
            outline: none !important;
        }

/* Modal footer */
.modal-footer {
    background: #F7FAFB !important;
    border-top: 1px solid #D6E7EA !important;
}

    /* Add button */
    .modal-footer .btn-primary {
        background: #18B5C8 !important;
        border-color: #18B5C8 !important;
        color: #FFFFFF !important;
        border-radius: 5px !important;
    }

        .modal-footer .btn-primary:hover {
            background: #0FA0B2 !important;
            border-color: #0FA0B2 !important;
        }

    /* Cancel button */
    .modal-footer .btn-default {
        background: #FFFFFF !important;
        border: 1px solid #D6E7EA !important;
        color: #164E63 !important;
        border-radius: 5px !important;
    }

        .modal-footer .btn-default:hover {
            background: #E8F6F7 !important;
            color: #004D4D !important;
        }
/* ================================
   Total Vehicle Checks - Vtec Theme
   ================================ */

#total_wrapper {
    color: #164E63;
}

    #total_wrapper .dataTables_length select,
    #total_wrapper .dataTables_filter input {
        border: 1px solid #D7E5EA !important;
        border-radius: 6px !important;
        background: #FFFFFF !important;
        color: #164E63 !important;
    }

        #total_wrapper .dataTables_filter input:focus {
            border-color: #18B5C8 !important;
            outline: none !important;
            box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.12) !important;
        }

    #total_wrapper .dt-buttons .btn {
        background: #18B5C8 !important;
        border-color: #18B5C8 !important;
        color: #FFFFFF !important;
    }

        #total_wrapper .dt-buttons .btn:hover {
            background: #129FB0 !important;
            border-color: #129FB0 !important;
            color: #FFFFFF !important;
        }

#total thead th {
    background: #E5F4F5 !important;
    color: #164E63 !important;
    border-color: #D7E5EA !important;
    font-weight: 600 !important;
}

#total tbody td {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border-color: #D7E5EA !important;
}

#total tbody tr:hover td {
    background: #F5FBFC !important;
}

#total_wrapper .dataTables_info {
    color: #164E63 !important;
}

#total_wrapper .dataTables_paginate .paginate_button {
    color: #164E63 !important;
    border: 1px solid #D7E5EA !important;
    background: #FFFFFF !important;
    border-radius: 4px !important;
}

    #total_wrapper .dataTables_paginate .paginate_button.current {
        background: #18B5C8 !important;
        border-color: #18B5C8 !important;
        color: #FFFFFF !important;
    }

    #total_wrapper .dataTables_paginate .paginate_button:hover {
        background: #E5F4F5 !important;
        border-color: #18B5C8 !important;
        color: #164E63 !important;
    }
/* Total Vehicle Checks - keep table area white */

.box:has(#total) .box-body {
    background: #FFFFFF !important;
}

#total_wrapper {
    background: #FFFFFF !important;
}

    #total_wrapper .dataTables_length,
    #total_wrapper .dataTables_filter,
    #total_wrapper .dataTables_info,
    #total_wrapper .dataTables_paginate {
        background: #FFFFFF !important;
    }
/* =========================================
   Transport Managers - VTEC Theme
   ========================================= */

#transport-managers {
    width: 100% !important;
}

/* Main heading - Light Cyan */
.box:has(#transport-managers) .box-header {
    background: #CFEDEC !important;
    color: #164E63 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 18px !important;
}

    .box:has(#transport-managers) .box-header h4 {
        color: #164E63 !important;
        font-weight: 600 !important;
    }

/* Add Transport Manager button */
.box:has(#transport-managers) .add-transport-manager {
    background: #00566B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
}

    .box:has(#transport-managers) .add-transport-manager:hover {
        background: #004555 !important;
    }

/* Table Header - White */
#transport-managers thead th {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
}

/* Table Body */
#transport-managers tbody td {
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    background: #FFFFFF !important;
}

/* Delete button - Keep Red */
#transport-managers .remove-transport-manager {
    background: #E74C3C !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
}
/* Transport Managers - Table Area */
.box:has(#transport-managers) .box-body {
    background: #FFFFFF !important;
}

/* =========================================
   Daily Vehicle Checks - VTEC Theme
   ========================================= */

/* Main Daily Checks area */
.box:has(.box-header h4) .box-body {
    background: #FFFFFF !important;
}

/* Section headings */
.box:has(.box-header h4) .box-header {
    background: #CFEDEC !important;
    color: #164E63 !important;
}

    .box:has(.box-header h4) .box-header h4 {
        color: #164E63 !important;
        font-weight: 600 !important;
    }

/* Daily Checks tables */
.box:has(.box-header h4) table thead th {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
}

/* Table rows */
.box:has(.box-header h4) table tbody td {
    /*background: #FFFFFF !important;*/
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
}

/* Email Transport Manager heading */
.box:has(.box-header h5) .box-header {
    background: #CFEDEC !important;
    color: #164E63 !important;
}

    .box:has(.box-header h5) .box-header h5 {
        color: #164E63 !important;
    }
/* =========================================
   Daily Vehicle Checks - Send Button
   ========================================= */

.daily-check-send-btn {
    background-color: #18B5C8 !important;
    color: #FFFFFF !important;
    border: 1px solid #18B5C8 !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

    .daily-check-send-btn:hover {
        background-color: #129CAF !important;
        border-color: #129CAF !important;
        color: #FFFFFF !important;
    }

.daily-check-send-btn {
    background-color: #18B5C8 !important;
    color: #FFFFFF !important;
    border: 1px solid #18B5C8 !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin-top: 10px !important;
}

/* =========================================
   Vehicle Check - Checks Section
   ========================================= */

.vehicle-check-box {
    background: #CFEDEC !important;
    border-radius: 12px !important;
}

    /* Main vehicle check box */
    .vehicle-check-box .box {
        background: #CFEDEC !important;
        border: none !important;
        box-shadow: 0 2px 14px rgba(10, 86, 111, 0.08) !important;
    }

    /* Header / vehicle information */
    .vehicle-check-box .box-header {
        background: #CFEDEC !important;
        color: #164E63 !important;
    }

    /* Main body */
    .vehicle-check-box .box-body {
        background: #CFEDEC !important;
        color: #164E63 !important;
    }

    /* Checks heading */
    .vehicle-check-box .h-underline {
        color: #164E63 !important;
    }

    /* Check item names */
    .vehicle-check-box .col-aligner h4 {
        color: #164E63 !important;
    }

    /* Check buttons */
    .vehicle-check-box .change-status {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #D5E7EA !important;
    }

    /* Camera button */
    .vehicle-check-box .btn-linkedin {
        background: #18B5C8 !important;
        color: #FFFFFF !important;
        border: none !important;
    }

    /* Hover */
    .vehicle-check-box .change-status:hover {
        background: #E8F7F8 !important;
    }
    /* Vehicle Check - Checks Section */
    .vehicle-check-box .h-underline {
        color: #164E63 !important;
    }

    .vehicle-check-box .fields-container-item-flex h4 {
        color: #164E63 !important;
    }

/* =========================================
   Vehicle Check - Light Theme
   ========================================= */

/* Username / Driver / Vehicle information header */
.checks .box-primary > .box-header {
    background: #CFEDEC !important;
    color: #164E63 !important;
    border: none !important;
}

    /* Header text */
    .checks .box-primary > .box-header p,
    .checks .box-primary > .box-header strong,
    .checks .box-primary > .box-header span,
    .checks .box-primary > .box-header a {
        color: #164E63 !important;
    }

/* Checks area - WHITE */
.checks .box-primary > .box-body {
    background: #FFFFFF !important;
    color: #164E63 !important;
}

    /* Checks heading */
    .checks .box-primary > .box-body .h-underline {
        color: #164E63 !important;
    }

    /* Check item names */
    .checks .box-primary > .box-body .col-aligner h4 {
        color: #164E63 !important;
    }

    /* Check buttons - WHITE */
    .checks .box-primary > .box-body .change-status {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #D5E7EA !important;
    }
/* =========================================
   Vehicle Selection Box
   ========================================= */

.box:has(#VehicleNosForm) {
    background: #CFEDEC !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

    .box:has(#VehicleNosForm) .box-body {
        background: #CFEDEC !important;
        border-radius: 12px !important;
        padding: 18px 25px !important;
    }

/* Vehicles label */
#VehicleNosForm label {
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* Vehicle dropdown */
#VehicleNosForm select {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 6px !important;
}

/* Switch to stand alone check */
#VehicleNosForm .a-align a {
    color: #008FA3 !important;
    font-weight: 600 !important;
}

    #VehicleNosForm .a-align a:hover {
        color: #00566B !important;
    }
/* =========================================
   Vehicle Check - Signature & Comments
   ========================================= */

/* Section headings */
.checks .bottom-part .h-underline {
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* Normal text */
.checks .bottom-part p,
.checks .bottom-part label,
.checks .comments-list span {
    color: #164E63 !important;
}

/* Signature canvas */
.checks .signature-pad {
    background: #FFFFFF !important;
    border: 1px solid #D5E7EA !important;
}

/* Signature horizontal line */
.checks .signature-hr {
    border-top: 1px solid #D5E7EA !important;
}

/* Clear Signature button - keep red */
.checks #clear {
    background: #E74C3C !important;
    border-color: #E74C3C !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
}

    .checks #clear:hover {
        background: #C0392B !important;
        border-color: #C0392B !important;
    }

/* Add Comment - Name input */
.checks #yourName {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 6px !important;
}

/* Vehicle check dropdown */
.checks #fieldsCommentsSection {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 6px !important;
}

/* Comment textarea */
.checks #comment {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 6px !important;
    resize: vertical !important;
}

    /* Input focus */
    .checks #yourName:focus,
    .checks #fieldsCommentsSection:focus,
    .checks #comment:focus {
        border-color: #18B5C8 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.12) !important;
    }

/* Add Comment button */
.checks .comment-area .btn-primary {
    background: #18B5C8 !important;
    border-color: #18B5C8 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

    .checks .comment-area .btn-primary:hover {
        background: #129CAF !important;
        border-color: #129CAF !important;
    }

/* Comments count */
.checks .comment-area span {
    color: #164E63 !important;
}

/* Transport Managers dropdown */
.checks .bottom-part ~ .row .form-control {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 6px !important;
}

/* Transport Managers label */
.checks .bottom-part ~ .row label {
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* Confirm button */
.checks .bottom-part ~ .row .btn-success {
    background: #18B5C8 !important;
    border-color: #18B5C8 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

    .checks .bottom-part ~ .row .btn-success:hover {
        background: #129CAF !important;
        border-color: #129CAF !important;
    }


/* =========================================
   STANDALONE CHECK - VTEC LIGHT THEME
   ========================================= */

/* Main Standalone Check box */
.standalone-check-box .box.box-info {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
}

    /* Username + Date header */
    .standalone-check-box .box.box-info > .box-header {
        background: #CFEDEC !important;
        background-image: none !important;
        color: #164E63 !important;
        border: none !important;
        border-radius: 12px 12px 0 0 !important;
    }

/* Header text */
.standalone-check-box .standalone-check-header-flex,
.standalone-check-box .standalone-check-header-flex-item,
.standalone-check-box .box-header strong {
    color: #164E63 !important;
}

/* Main body */
.standalone-check-box .box.box-info > .box-body {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: none !important;
}

/* Templates label */
.standalone-check-box #ChooseNewTemplateForm label {
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* Template dropdown */
.standalone-check-box #ChooseNewTemplateForm .select2 {
    background: #FFFFFF !important;
    color: #164E63 !important;
}

/* Checks heading */
.standalone-check-box .box-body > h4.h-underline {
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* =========================================
   CHECK CARDS
   ========================================= */

.standalone-check-box .fields-flex {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

    /* Check name */
    .standalone-check-box .fields-flex h4 {
        color: #164E63 !important;
        font-weight: 600 !important;
    }

    /* Check buttons */
    .standalone-check-box .fields-flex .change-status {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #D5E7EA !important;
    }

        /* Check button hover */
        .standalone-check-box .fields-flex .change-status:hover {
            background: #E5F4F5 !important;
            color: #164E63 !important;
        }

/* Camera button */
.standalone-check-box .fail-input-image .btn {
    background: #18B5C8 !important;
    border-color: #18B5C8 !important;
    color: #FFFFFF !important;
}

/* =========================================
   TRAILER / DEFECTS / DRIVER NAME
   ========================================= */

.standalone-check-box .fields-flex .form-control {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 6px !important;
}

.standalone-check-box .fields-flex label {
    color: #164E63 !important;
}

/* Input focus */
.standalone-check-box .fields-flex .form-control:focus {
    border-color: #18B5C8 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.12) !important;
}

/* =========================================
   USERS / MANAGE EMPLOYEES - VTEC THEME
   ========================================= */

/* Main box */
.box:has(.staffs-icon) {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
}

    /* =========================================
   Manage Employees Header
   ========================================= */

    .box:has(.staffs-icon) .box-header.title-box {
        background: #CFEDEC !important;
        background-image: none !important;
        color: #164E63 !important;
        border: none !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Employee / Manage Employees title */
    .box:has(.staffs-icon) .subtitle,
    .box:has(.staffs-icon) .title,
    .box:has(.staffs-icon) .dropdown-title-menu > a.main {
        color: #164E63 !important;
    }

    /* Users icon */
    .box:has(.staffs-icon) .staffs-icon {
        background: #18B5C8 !important;
        color: #FFFFFF !important;
    }

    /* Dropdown arrow */
    .box:has(.staffs-icon) .dropdown-title-menu .caret {
        color: #164E63 !important;
    }

    /* Manage Employees dropdown */
    .box:has(.staffs-icon) .dropdown-title-menu .dropdown-menu {
        background: #FFFFFF !important;
        border: 1px solid #D5E7EA !important;
    }

        .box:has(.staffs-icon) .dropdown-title-menu .dropdown-menu a {
            color: #164E63 !important;
        }

            .box:has(.staffs-icon) .dropdown-title-menu .dropdown-menu a:hover {
                background: #E5F4F5 !important;
                color: #00566B !important;
            }

    /* =========================================
   New Employee Button
   ========================================= */

    .box:has(.staffs-icon) .right-side-menu .btn {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #D5E7EA !important;
        border-radius: 6px !important;
    }

        .box:has(.staffs-icon) .right-side-menu .btn:hover {
            background: #18B5C8 !important;
            border-color: #18B5C8 !important;
            color: #FFFFFF !important;
        }

    /* =========================================
   Table Area
   ========================================= */

    .box:has(.staffs-icon) .box-body {
        background: #FFFFFF !important;
        color: #164E63 !important;
    }

    /* DataTable */
    .box:has(.staffs-icon) .data-table {
        background: #FFFFFF !important;
        color: #164E63 !important;
    }

        /* Table Header */
        .box:has(.staffs-icon) .data-table thead th {
            background: #E5F4F5 !important;
            color: #164E63 !important;
            border-bottom: 1px solid #D5E7EA !important;
            font-weight: 600 !important;
        }

        /* Table Rows */
        .box:has(.staffs-icon) .data-table tbody tr {
            background: #FFFFFF !important;
        }

        .box:has(.staffs-icon) .data-table tbody td {
            background: #FFFFFF !important;
            color: #164E63 !important;
            border-top: 1px solid #D5E7EA !important;
        }

            /* Employee names */
            .box:has(.staffs-icon) .data-table tbody td a {
                color: #006E87 !important;
            }

                .box:has(.staffs-icon) .data-table tbody td a:hover {
                    color: #18B5C8 !important;
                }

        /* =========================================
   Action Dropdown Button
   ========================================= */

        .box:has(.staffs-icon) .data-table .btn-group .handle {
            background: #FFFFFF !important;
            color: #164E63 !important;
            border: 1px solid #D5E7EA !important;
            border-radius: 4px !important;
        }

            .box:has(.staffs-icon) .data-table .btn-group .handle:hover {
                background: #18B5C8 !important;
                border-color: #18B5C8 !important;
                color: #FFFFFF !important;
            }

        /* Action dropdown menu */
        .box:has(.staffs-icon) .data-table .dropdown-menu {
            background: #FFFFFF !important;
            border: 1px solid #D5E7EA !important;
        }

            .box:has(.staffs-icon) .data-table .dropdown-menu a {
                color: #164E63 !important;
            }

                .box:has(.staffs-icon) .data-table .dropdown-menu a:hover {
                    background: #E5F4F5 !important;
                    color: #00566B !important;
                }
/* =========================================
   STAFF - CREATE / NEW EMPLOYEE
   VTEC LIGHT THEME
   ========================================= */

/* Main form box */
#CustomerForm {
    color: #164E63 !important;
}

    /* Main white page body */
    #CustomerForm .box-body {
        background: #FFFFFF !important;
    }

    /* Section headings */
    #CustomerForm h5 {
        background: #CFEDEC !important;
        color: #164E63 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 10px 14px !important;
        border-radius: 6px !important;
        margin-bottom: 18px !important;
    }

    /* Labels */
    #CustomerForm .control-label {
        color: #164E63 !important;
        font-weight: 600 !important;
    }

    /* All text inputs */
    #CustomerForm input.form-control,
    #CustomerForm select.form-control,
    #CustomerForm textarea.form-control {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #D5E7EA !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

        /* Placeholder */
        #CustomerForm input.form-control::placeholder,
        #CustomerForm textarea.form-control::placeholder {
            color: #7A9AA3 !important;
            opacity: 1 !important;
        }

        /* Focus */
        #CustomerForm input.form-control:focus,
        #CustomerForm select.form-control:focus,
        #CustomerForm textarea.form-control:focus {
            border-color: #18B5C8 !important;
            outline: none !important;
            box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.12) !important;
        }

    /* Validation messages */
    #CustomerForm .text-danger {
        color: #E74C3C !important;
    }

    /* Horizontal separator */
    #CustomerForm hr {
        border-top: 1px solid #D5E7EA !important;
    }

    /* Add Employee button */
    #CustomerForm .btn-primary {
        background: #18B5C8 !important;
        border-color: #18B5C8 !important;
        color: #FFFFFF !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
    }

        #CustomerForm .btn-primary:hover {
            background: #129CAF !important;
            border-color: #129CAF !important;
        }

    /* Cancel */
    #CustomerForm .btn-link {
        color: #164E63 !important;
        font-weight: 600 !important;
    }

        #CustomerForm .btn-link:hover {
            color: #18B5C8 !important;
        }
/* =========================================
   Switch Account Popup - VTEC Theme
   ========================================= */

/* Popup */
.bootstrap-dialog .modal-content {
    background: #FFFFFF !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Popup Header */
.bootstrap-dialog .modal-header {
    background: #CFEDEC !important;
    border-bottom: 1px solid #D5E7EA !important;
}

/* Switch Account title */
.bootstrap-dialog .modal-title {
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* Close X */
.bootstrap-dialog .close {
    color: #164E63 !important;
    opacity: 1 !important;
}

/* Popup body */
.bootstrap-dialog .modal-body {
    background: #FFFFFF !important;
    color: #164E63 !important;
}

/* Confirmation message */
.bootstrap-dialog .bootstrap-dialog-message {
    color: #164E63 !important;
    font-size: 16px !important;
}

/* Footer */
.bootstrap-dialog .modal-footer {
    background: #FFFFFF !important;
    border-top: 1px solid #D5E7EA !important;
}

    /* No button */
    .bootstrap-dialog .modal-footer .btn-default {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #D5E7EA !important;
        border-radius: 6px !important;
    }

    /* Yes, Switch button */
    .bootstrap-dialog .modal-footer .btn-danger {
        background: #18B5C8 !important;
        border-color: #18B5C8 !important;
        color: #FFFFFF !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
    }

        .bootstrap-dialog .modal-footer .btn-danger:hover {
            background: #129CAF !important;
            border-color: #129CAF !important;
        }
/* Switch Account - Fix Header Text */
.bootstrap-dialog .modal-header .bootstrap-dialog-title {
    color: #164E63 !important;
    font-weight: 600 !important;
}
/* =========================================
   VTEC LOGIN - REFERENCE DESIGN
   ========================================= */

.login-page .login-box {
    width: 350px !important;
    margin: 6% auto !important;
    position: relative !important;
    background: radial-gradient( ellipse at -8% 4%, rgba(24, 181, 200, 0.20) 0%, rgba(24, 181, 200, 0.12) 16%, transparent 38% ), radial-gradient( ellipse at 108% 96%, rgba(24, 181, 200, 0.18) 0%, rgba(24, 181, 200, 0.10) 18%, transparent 40% ), #CFEDEC !important;
    border: 1px solid #B8DDE0 !important;
    border-radius: 16px !important;
    padding: 18px 28px 18px !important;
    box-shadow: 0 12px 35px rgba(22, 78, 99, 0.20) !important;
    overflow: hidden !important;
}

    /* Soft curved decoration - top left */
    .login-page .login-box::before {
        content: "" !important;
        position: absolute !important;
        width: 230px !important;
        height: 150px !important;
        top: -75px !important;
        left: -85px !important;
        border: 3px solid rgba(24, 181, 200, 0.16) !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 10px rgba(24, 181, 200, 0.08), 0 0 0 20px rgba(24, 181, 200, 0.05) !important;
        background: transparent !important;
    }


    /* =========================================
   BOTTOM-RIGHT CURVED WAVE
   ========================================= */

    .login-page .login-box::after {
        content: "" !important;
        position: absolute !important;
        width: 280px !important;
        height: 190px !important;
        right: -120px !important;
        bottom: -105px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(24, 181, 200, 0.18) !important;
        box-shadow: 0 0 0 10px rgba(24, 181, 200, 0.08), 0 0 0 20px rgba(24, 181, 200, 0.05), 0 0 0 32px rgba(255,255,255,0.10) !important;
        background: transparent !important;
        z-index: 0 !important;
    }


    /* Keep login content above decorations */
    .login-page .login-box > * {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Hide old empty logo container */
    .login-page .login-box .login-logo {
        display: none !important;
    }

    /* Logo */
    .login-page .login-box .center {
        padding: 0px 0 8px !important;
        text-align: center !important;
    }

        .login-page .login-box .center img {
            width: 190px !important;
            height: 90px !important;
            max-width: 100% !important;
            object-fit: contain !important;
            display: block !important;
            margin: 0 auto !important;
            /*border-radius: 8px !important;*/
            /* Rounded logo edges */
            border-radius: 22px !important;
            /* Logo background blend */
            mix-blend-mode: multiply !important;
            box-shadow: 0 6px 12px rgba(22, 78, 99, 0.12) !important;
        }
/* =========================================
   VTEC LOGIN - LOGO DESIGN 3
   ========================================= */

.login-page .login-box-body .center {
    padding-bottom: 18px !important;
    text-align: center !important;
}

    .login-page .login-box-body .center img {
        width: 180px !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
        /* Clean rounded logo treatment */
        border-radius: 18px !important;
        /* Soft white logo plate */
        background: #FFFFFF !important;
        /* Light teal shadow matching Vtec theme */
        box-shadow: 0 6px 18px rgba(24, 181, 200, 0.18) !important;
    }




    .login-page .login-box-body .center img {
        mix-blend-mode: multiply !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }
/* Heading */
.login-page .login-box .login-box-msg {
    color: #073F4D !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 2px 0 14px !important;
    margin: 0 !important;
}

/* Inputs */
.login-page .login-box .form-control {
    height: 42px !important;
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D5E7EA !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 15px !important;
}

    /* Placeholder */
    .login-page .login-box .form-control::placeholder {
        color: #7A9AA3 !important;
        opacity: 1 !important;
    }

    /* Input focus */
    .login-page .login-box .form-control:focus {
        border-color: #18B5C8 !important;
        box-shadow: 0 0 0 2px rgba(24, 181, 200, 0.12) !important;
    }

/* Icons */
.login-page .login-box .form-control-feedback {
    color: #18B5C8 !important;
    height: 48px !important;
    line-height: 48px !important;
}

/* Remember Me */
.login-page .login-box .checkbox {
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

    .login-page .login-box .checkbox label {
        color: #164E63 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

/* Sign In button */
.login-page .login-box button[type="submit"] {
    height: 48px !important;
    background: #18B5C8 !important;
    border: 1px solid #18B5C8 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(24, 181, 200, 0.20) !important;
}

    /* Button hover */
    .login-page .login-box button[type="submit"]:hover {
        background: #129CAF !important;
        border-color: #129CAF !important;
    }

/* Forgot password */
.login-page .login-box > a {
    display: inline-block !important;
    margin-top: 3px !important;
    color: #008FA3 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

    .login-page .login-box > a:hover {
        color: #164E63 !important;
    }

/* Validation */
.login-page .login-box .text-danger {
    color: #E74C3C !important;
}
/* =========================================
   VTEC FORGOT PASSWORD - MATCHING THEME
   ========================================= */

.login-page .login-box-body {
    position: relative !important;
    background: radial-gradient( ellipse 220px 150px at -5% 0%, rgba(24, 181, 200, 0.28) 0%, rgba(24, 181, 200, 0.14) 30%, transparent 68% ), radial-gradient( ellipse 250px 170px at 105% 100%, rgba(24, 181, 200, 0.26) 0%, rgba(24, 181, 200, 0.12) 30%, transparent 68% ), #CFEDEC !important;
    border: 1px solid #B8DDE0 !important;
    border-radius: 14px !important;
    padding: 28px 24px 24px !important;
    box-shadow: 0 10px 30px rgba(22, 78, 99, 0.18), inset 0 1px 0 rgba(255,255,255,0.60) !important;
    overflow: hidden !important;
}


    /* Top-left wave */
    .login-page .login-box-body::before {
        content: "" !important;
        position: absolute !important;
        width: 220px !important;
        height: 150px !important;
        top: -90px !important;
        left: -100px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(24,181,200,0.16) !important;
        box-shadow: 0 0 0 10px rgba(24,181,200,0.07), 0 0 0 20px rgba(24,181,200,0.04) !important;
        background: transparent !important;
    }


    /* Bottom-right wave */
    .login-page .login-box-body::after {
        content: "" !important;
        position: absolute !important;
        width: 250px !important;
        height: 170px !important;
        right: -110px !important;
        bottom: -100px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(24,181,200,0.16) !important;
        box-shadow: 0 0 0 10px rgba(24,181,200,0.07), 0 0 0 20px rgba(24,181,200,0.04) !important;
        background: transparent !important;
    }


    /* Keep content above waves */
    .login-page .login-box-body > * {
        position: relative !important;
        z-index: 2 !important;
    }


    /* Forgot password heading */
    .login-page .login-box-body h2,
    .login-page .login-box-body h3,
    .login-page .login-box-body .login-box-msg {
        color: #073F4D !important;
    }


    /* Description text */
    .login-page .login-box-body p {
        color: #164E63 !important;
    }


    /* Labels */
    .login-page .login-box-body label {
        color: #164E63 !important;
    }


    /* Email input */
    .login-page .login-box-body .form-control {
        background: #FFFFFF !important;
        color: #164E63 !important;
        border: 1px solid #D5E7EA !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

        .login-page .login-box-body .form-control:focus {
            border-color: #18B5C8 !important;
            box-shadow: 0 0 0 2px rgba(24,181,200,0.12) !important;
        }


    /* Submit button */
    .login-page .login-box-body button[type="submit"] {
        background: #18B5C8 !important;
        border-color: #18B5C8 !important;
        color: #FFFFFF !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 10px rgba(24,181,200,0.20) !important;
    }

        .login-page .login-box-body button[type="submit"]:hover {
            background: #129CAF !important;
            border-color: #129CAF !important;
        }


    /* Go to login */
    .login-page .login-box-body a {
        color: #008FA3 !important;
    }

        .login-page .login-box-body a:hover {
            color: #164E63 !important;
        }


    /* Horizontal line */
    .login-page .login-box-body hr {
        border-top: 1px solid rgba(22,78,99,0.25) !important;
    }
/* =========================================
   CENTER ALL TABLE HEADINGS
   ========================================= */

.vtec-theme table thead th,
table thead th {
    text-align: center !important;
    vertical-align: middle !important;
}
/* =========================================
 /* Driving Events - Center Header */
#drivingEvents_wrapper .box-header,
#drivingEvents_wrapper .box-header h4 {
    text-align: center !important;
}
/* VtecFLEETiQ Navbar Logo */
.navbar-brand img[src*="vtec_fleetiq_logo"] {
    border-radius: 8px !important;
    padding: 4px !important;
    object-fit: contain !important;
}

.vtec-driver-card .box-header {
    text-align: left !important;
}
/* Keep Driver Card headings LEFT aligned */
.box:has(#bestDrivers) .box-header,
.box:has(#goodDrivers) .box-header,
.box:has(#worstDrivers) .box-header {
    text-align: left !important;
}

    .box:has(#bestDrivers) .box-header .box-title,
    .box:has(#goodDrivers) .box-header .box-title,
    .box:has(#worstDrivers) .box-header .box-title {
        text-align: left !important;
    }


/* =========================================================
   GLOBAL DATATABLES BUTTON THEME
   (Copy / CSV / Excel / PDF / Print) — applies site-wide
   ========================================================= */

.dt-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 10px 0 !important;
}

    .dt-buttons .dt-button,
    .dt-buttons .btn,
    .buttons-copy,
    .buttons-csv,
    .buttons-excel,
    .buttons-pdf,
    .buttons-print {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important; /* icon aur text ke beech space */
        height: 36px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        background: #FFFFFF !important; /* white background */
        background-image: none !important;
        border: 1px solid #72CDD7 !important;
        border-radius: 6px !important;
        color: #087F8C !important; /* icon/text colour - jo abhi hai wahi rakha */
        font-size: 12px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transition: all 0.15s ease !important;
        line-height: 1 !important;
    }

        /* icon (span/i tag ke against spacing, agar font-awesome icon hai to) */
        .dt-buttons .dt-button i,
        .dt-buttons .dt-button span,
        .dt-buttons .btn i,
        .dt-buttons .btn span {
            display: inline-flex !important;
            align-items: center !important;
            color: inherit !important;
        }

        /* hover state */
        .dt-buttons .dt-button:hover,
        .dt-buttons .btn:hover,
        .buttons-copy:hover,
        .buttons-csv:hover,
        .buttons-excel:hover,
        .buttons-pdf:hover,
        .buttons-print:hover {
            background: #18B5C8 !important;
            border-color: #18B5C8 !important;
            color: #FFFFFF !important;
            box-shadow: 0 3px 8px rgba(24,181,200,0.18) !important;
        }

        /* focus state */
        .dt-buttons .dt-button:focus,
        .dt-buttons .btn:focus {
            outline: none !important;
            box-shadow: 0 0 0 2px rgba(24,181,200,0.15) !important;
        }
/* =========================================================
   GLOBAL DATATABLES BUTTONS - INDIVIDUAL ICON COLOURS
   (white background, coloured icon + text per button type)
   ========================================================= */

/* Copy - Blue */
.buttons-copy {
    color: #2E7DD1 !important;
    border-color: #B9D6F2 !important;
}

    .buttons-copy:hover {
        background: #2E7DD1 !important;
        border-color: #2E7DD1 !important;
        color: #FFFFFF !important;
    }

/* CSV - Teal */
.buttons-csv {
    color: #087F8C !important;
    border-color: #9FDCE2 !important;
}

    .buttons-csv:hover {
        background: #087F8C !important;
        border-color: #087F8C !important;
        color: #FFFFFF !important;
    }

/* Excel - Green */
.buttons-excel {
    color: #1B7A3D !important;
    border-color: #A8DAB5 !important;
}

    .buttons-excel:hover {
        background: #1B7A3D !important;
        border-color: #1B7A3D !important;
        color: #FFFFFF !important;
    }

/* PDF - Red */
.buttons-pdf {
    color: #C0392B !important;
    border-color: #F0B5AD !important;
}

    .buttons-pdf:hover {
        background: #C0392B !important;
        border-color: #C0392B !important;
        color: #FFFFFF !important;
    }

/* Print - Dark Slate / Navy */
.buttons-print {
    color: #073F4D !important;
    border-color: #B7CBD0 !important;
}

    .buttons-print:hover {
        background: #073F4D !important;
        border-color: #073F4D !important;
        color: #FFFFFF !important;
    }

    /* icon inherits button's own colour, not fixed teal */
    .buttons-copy i, .buttons-copy span,
    .buttons-csv i, .buttons-csv span,
    .buttons-excel i, .buttons-excel span,
    .buttons-pdf i, .buttons-pdf span,
    .buttons-print i, .buttons-print span {
        color: inherit !important;
    }

/* =========================================================
   FINAL OVERRIDE - INDIVIDUAL BUTTON COLOURS
   (beats .vt-dcard / #total_wrapper scoped rules)
   ========================================================= */

/* ---- Copy : Blue ---- */
.dt-buttons .buttons-copy,
.vt-dcard .dt-buttons .buttons-copy,
#total_wrapper .dt-buttons .buttons-copy {
    background: #FFFFFF !important;
    color: #2E7DD1 !important;
    border-color: #B9D6F2 !important;
}

    .dt-buttons .buttons-copy:hover,
    .vt-dcard .dt-buttons .buttons-copy:hover,
    #total_wrapper .dt-buttons .buttons-copy:hover {
        background: #2E7DD1 !important;
        border-color: #2E7DD1 !important;
        color: #FFFFFF !important;
    }

/* ---- CSV : Teal ---- */
.dt-buttons .buttons-csv,
.vt-dcard .dt-buttons .buttons-csv,
#total_wrapper .dt-buttons .buttons-csv {
    background: #FFFFFF !important;
    color: #087F8C !important;
    border-color: #9FDCE2 !important;
}

    .dt-buttons .buttons-csv:hover,
    .vt-dcard .dt-buttons .buttons-csv:hover,
    #total_wrapper .dt-buttons .buttons-csv:hover {
        background: #087F8C !important;
        border-color: #087F8C !important;
        color: #FFFFFF !important;
    }

/* ---- Excel : Green ---- */
.dt-buttons .buttons-excel,
.vt-dcard .dt-buttons .buttons-excel,
#total_wrapper .dt-buttons .buttons-excel {
    background: #FFFFFF !important;
    color: #1B7A3D !important;
    border-color: #A8DAB5 !important;
}

    .dt-buttons .buttons-excel:hover,
    .vt-dcard .dt-buttons .buttons-excel:hover,
    #total_wrapper .dt-buttons .buttons-excel:hover {
        background: #1B7A3D !important;
        border-color: #1B7A3D !important;
        color: #FFFFFF !important;
    }

/* ---- PDF : Red ---- */
.dt-buttons .buttons-pdf,
.vt-dcard .dt-buttons .buttons-pdf,
#total_wrapper .dt-buttons .buttons-pdf {
    background: #FFFFFF !important;
    color: #C0392B !important;
    border-color: #F0B5AD !important;
}

    .dt-buttons .buttons-pdf:hover,
    .vt-dcard .dt-buttons .buttons-pdf:hover,
    #total_wrapper .dt-buttons .buttons-pdf:hover {
        background: #C0392B !important;
        border-color: #C0392B !important;
        color: #FFFFFF !important;
    }

/* ---- Print : Dark Navy ---- */
.dt-buttons .buttons-print,
.vt-dcard .dt-buttons .buttons-print,
#total_wrapper .dt-buttons .buttons-print {
    background: #FFFFFF !important;
    color: #073F4D !important;
    border-color: #B7CBD0 !important;
}

    .dt-buttons .buttons-print:hover,
    .vt-dcard .dt-buttons .buttons-print:hover,
    #total_wrapper .dt-buttons .buttons-print:hover {
        background: #073F4D !important;
        border-color: #073F4D !important;
        color: #FFFFFF !important;
    }

/* icon rang parent button se inherit kare */
.dt-buttons .dt-button i,
.dt-buttons .dt-button span {
    color: inherit !important;
}
/* =========================================================
   FINAL FIX 1: Buttons in single row (no wrap)
   ========================================================= */
.vt-dcard .dt-buttons {
    flex-wrap: nowrap !important;
    gap: 6px !important;
}

    .vt-dcard .dt-buttons .dt-button,
    .vt-dcard .dt-buttons .btn {
        padding: 0 10px !important;
        font-size: 11px !important;
        height: 34px !important;
        white-space: nowrap !important;
    }

/* agar chhoti screen par bhi fit karna ho to thoda aur compact */
@media (max-width: 1300px) {
    .vt-dcard .dt-buttons .dt-button,
    .vt-dcard .dt-buttons .btn {
        padding: 0 8px !important;
        font-size: 10px !important;
    }
}

/* =========================================================
   FINAL FIX 2: Table column headers -> White
   (Driver / OptiDrive row inside table)
   Only the TOP banner (box-header) keeps its colour
   ========================================================= */
#bestDrivers thead th,
#goodDrivers thead th,
#worstDrivers thead th {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #164E63 !important;
    border-bottom: 1px solid #D9E6EA !important;
}

/* "No data available in table" row - white background bhi confirm kar do */
#bestDrivers tbody td,
#goodDrivers tbody td,
#worstDrivers tbody td {
    background: #FFFFFF !important;
}


/* =========================================================
   FINAL FIX: ALL HEADINGS LEFT ALIGN (Global)
   ========================================================= */

/* Box / card headings (table cards, report cards, etc.) */
body.skin-black-light .content .box-header .box-title,
body.skin-black-light .content .box-header h4,
body.skin-black-light .content .box-header h5 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Section titles like "Last 6 Months Optidriver Report" */
.speeding-events-page .box-title,
.vt-driver-cards > .col-md-12 > .box .box-title {
    text-align: left !important;
    width: 100% !important;
}



/* Highcharts chart titles */
.highcharts-title {
    text-anchor: start !important;
}

/* Driver cards heading (already left, just confirming) */
.box:has(#bestDrivers) .box-header,
.box:has(#goodDrivers) .box-header,
.box:has(#worstDrivers) .box-header {
    text-align: left !important;
}



/* =========================================================
   FINAL OVERRIDE 2: ALL CHART/TABLE HEADINGS -> LEFT ALIGN
   + fix white text to dark teal
   ========================================================= */

/* Generic box-header titles (covers "Speeding Events Count",
   "Fuel Performance by Month", "Vehicles Usage for (SEPT)", etc.) */
body.skin-black-light .content .box-header,
body.skin-black-light .content .box-header .box-title,
.speeding-events-page .box-header,
.speeding-events-page .box-title,
.vt-driver-cards > .col-md-12 > .box .box-header,
.vt-driver-cards > .col-md-12 > .box .box-title,
h4.speedo-title,
.sp-per-driver-title,
.per-1000-title,
.sp-per-tripreport-title,
.severity-title {
    text-align: left !important;
    justify-content: flex-start !important;
    width: auto !important;
}

    body.skin-black-light .content .box-header .box-title,
    .speeding-events-page .box-title,
    .vt-driver-cards > .col-md-12 > .box .box-title,
    h4.speedo-title,
    .sp-per-driver-title,
    .per-1000-title,
    .sp-per-tripreport-title,
    .severity-title {
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
    }


.apexcharts-title {
    text-align: left !important;
}



/* =========================================================
   PTO v Idle Time - REMOVE DUPLICATE TOP HEADER
   Keep only one teal chart header
   ========================================================= */

/* Remove teal background from outer ApexCharts canvas */
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-canvas {
    background: #FFFFFF !important;
}

/* PTO v Idle Time - single header background */
body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-svg {
    background: linear-gradient( to bottom, #CFEDEC 0, #CFEDEC 48px, #FFFFFF 48px, #FFFFFF 100% ) !important;
}

body:has(#ptoVIdleTimechart) #ptoVIdleTimechart .apexcharts-canvas {
    background: #FFFFFF !important;
}
/* =========================================================
   DRIVER CARD HEADER ICONS - LIGHT THEME
   ========================================================= */

/* Common icon */
.box:has(#bestDrivers) .box-title::before,
.box:has(#goodDrivers) .box-title::before,
.box:has(#worstDrivers) .box-title::before {
    width: 34px !important;
    height: 34px !important;
    margin-right: 10px !important;
    font-size: 15px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Excellent - light green */
.box:has(#bestDrivers) .box-title::before {
    background: #E3F3E5 !important;
    color: #2E7D32 !important;
}

/* Good - light orange */
.box:has(#goodDrivers) .box-title::before {
    background: #FFF1D6 !important;
    color: #E67E22 !important;
}

/* Needs Improvement - light red */
.box:has(#worstDrivers) .box-title::before {
    background: #FDE7E7 !important;
    color: #C62828 !important;
}


/* =========================================================
   LOGIN BOX - GLASS / TRANSPARENT DESIGN
   ========================================================= */

.login-page .login-box-body {
    background: rgba(207, 236, 237, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(22, 78, 99, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Keep inputs clearly visible */
.login-page .login-box .form-control {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* Keep login content above transparent decorations */
.login-page .login-box-body > * {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   VTEC LOGIN - TRANSPARENT GLASS BOX
   FINAL OVERRIDE
   ========================================================= */

/* Main login box */
.login-page .login-box {
    background: rgba(207, 236, 237, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 10px 30px rgba(22, 78, 99, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

/* Inner login area - remove solid teal */
.login-page .login-box-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Keep form fields readable */
.login-page .login-box .form-control {
    background: rgba(255, 255, 255, 0.94) !important;
}

/* Keep content above decorative waves */
.login-page .login-box > *,
.login-page .login-box-body > * {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   LOGIN PAGE - MAKE "REMEMBER ME" CHECKBOX VISIBLE
   ========================================================= */


/* =========================================================
   VTEC LOGIN - REMEMBER ME CHECKBOX
   ========================================================= */

.login-page .login-box .checkbox {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
}

    .login-page .login-box .checkbox label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #164E63 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        cursor: pointer !important;
    }

    /* =========================================================
   REMEMBER ME - VTEC CHECKBOX
   Light teal border + teal checked state
   ========================================================= */

    /* Checkbox container */
    .login-page .login-box .checkbox label {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        padding-left: 26px !important;
        color: #164E63 !important;
        cursor: pointer !important;
    }

        /* Hide native checkbox visually */
        .login-page .login-box .checkbox label input[type="checkbox"] {
            position: absolute !important;
            opacity: 0 !important;
            width: 18px !important;
            height: 18px !important;
            left: 0 !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            margin: 0 !important;
            cursor: pointer !important;
        }

        /* Our visible checkbox */
        .login-page .login-box .checkbox label::before {
            content: "" !important;
            position: absolute !important;
            left: 0 !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 18px !important;
            height: 18px !important;
            background: #FFFFFF !important;
            border: 2px solid #8FC5CC !important;
            border-radius: 4px !important;
            box-sizing: border-box !important;
        }

        /* =========================================================
   VTEC LOGIN - REMEMBER ME CHECKBOX
   FINAL FIX - iCheck
   ========================================================= */

        /* Remove our previously created fake checkbox */
        .login-page .login-box .checkbox label::before,
        .login-page .login-box .checkbox label::after {
            display: none !important;
            content: none !important;
        }

    /* iCheck checkbox box */
    .login-page .login-box .checkbox [class*="icheckbox"] {
        width: 20px !important;
        height: 20px !important;
        background: #FFFFFF !important;
        background-image: none !important;
        border: 2px solid #8FC5CC !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        vertical-align: middle !important;
        margin-right: 6px !important;
    }

        /* Remove iCheck internal image/helper effect */
        .login-page .login-box .checkbox [class*="icheckbox"] .iCheck-helper {
            background: transparent !important;
        }

        /* CHECKED state */
        .login-page .login-box .checkbox [class*="icheckbox"].checked {
            background: #18B5C8 !important;
            background-image: none !important;
            border-color: #18B5C8 !important;
        }

            /* White tick */
            .login-page .login-box .checkbox [class*="icheckbox"].checked::after {
                content: "" !important;
                position: absolute !important;
                width: 5px !important;
                height: 10px !important;
                left: 6px !important;
                top: 2px !important;
                border: solid #FFFFFF !important;
                border-width: 0 2px 2px 0 !important;
                transform: rotate(45deg) !important;
            }

    /* Remember Me text */
    .login-page .login-box .checkbox label {
        color: #164E63 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
/* =========================================================
   OPTIDRIVE TABS - GREEN HOVER
   ========================================================= */

/* All dashboard tabs hover */
body.skin-black-light .content-header .nav-pills > li > a:hover,
body.skin-black-light .content-header .nav-pills > li > a:focus {
    background-color: #DDF5E8 !important;
    color: #073F4D !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ACTIVE OptiDrive Indicators - hover bhi green ho */
body.skin-black-light .content-header .nav-pills > li.active > a:hover,
body.skin-black-light .content-header .nav-pills > li.active > a:focus {
    background-color: #DDF5E8 !important;
    color: #073F4D !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(53, 184, 127, 0.18) !important;
}









/* =========================================================
   DRIVER CARDS - VERY LIGHT BACKGROUND
   Page background remains WHITE
   ========================================================= */

/* Excellent Drivers */
body:has(#bestDrivers) .box:has(#bestDrivers) {
    background: #F3FBF4 !important;
}

/* Good Drivers */
body:has(#goodDrivers) .box:has(#goodDrivers) {
    background: #FFFBEB !important;
}

/* Needs Improvement */
body:has(#worstDrivers) .box:has(#worstDrivers) {
    background: #FFF5F5 !important;
}


/* Keep the existing coloured heading strips unchanged */
body:has(#bestDrivers) .box:has(#bestDrivers) .box-header {
    background: #DDF5E8 !important;
}

body:has(#goodDrivers) .box:has(#goodDrivers) .box-header {
    background: #FFF2CC !important;
}

body:has(#worstDrivers) .box:has(#worstDrivers) .box-header {
    background: #FDE2E2 !important;
}


/* Table/search area transparent so card background remains visible */
body:has(#bestDrivers) .box:has(#bestDrivers) .box-body,
body:has(#goodDrivers) .box:has(#goodDrivers) .box-body,
body:has(#worstDrivers) .box:has(#worstDrivers) .box-body {
    background: transparent !important;
}


/* Keep table itself white for readability */
body:has(#bestDrivers) #bestDrivers,
body:has(#goodDrivers) #goodDrivers,
body:has(#worstDrivers) #worstDrivers {
    background: #FFFFFF !important;
}


    /* Keep table header white */
    body:has(#bestDrivers) #bestDrivers thead th,
    body:has(#goodDrivers) #goodDrivers thead th,
    body:has(#worstDrivers) #worstDrivers thead th {
        background: #FFFFFF !important;
    }
/* REMOVE TOP 3-COLOR STRIP */
body.skin-black-light::before {
    display: none !important;
}
/* AutoBoard Pack - keep all 5 export buttons in one row */
.box:has(#bestDrivers) .dt-buttons,
.box:has(#goodDrivers) .dt-buttons,
.box:has(#worstDrivers) .dt-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    white-space: nowrap !important;
}

    /* Compact buttons so Print does not move to the next line */
    .box:has(#bestDrivers) .dt-buttons .dt-button,
    .box:has(#goodDrivers) .dt-buttons .dt-button,
    .box:has(#worstDrivers) .dt-buttons .dt-button {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        height: 34px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
/* AutoBoard Pack - Fix DataTables entries text visibility */
.box:has(#bestDrivers) .dataTables_info,
.box:has(#goodDrivers) .dataTables_info,
.box:has(#worstDrivers) .dataTables_info {
    color: #164E63 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================
   DATE RANGE CALENDAR - LIGHT THEME
   ========================================= */

/* Start and End Date fields */
.daterangepicker .drp-input input,
.daterangepicker input {
    background: #F4FBFC !important;
    background-color: #F4FBFC !important;
    color: #164E63 !important;
    border: 1px solid #D7E5EA !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

/* Calendar month/year header */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table thead th {
    background: #E8F7F7 !important;
    color: #164E63 !important;
}

/* Month and year dropdowns */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    background: #FFFFFF !important;
    color: #164E63 !important;
    border: 1px solid #D7E5EA !important;
    border-radius: 4px !important;
}

/* Previous / Next month arrows */
.daterangepicker .prev,
.daterangepicker .next {
    background: #F4FBFC !important;
    color: #087F8C !important;
}

/* Selected date range */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: #18B5C8 !important;
    color: #FFFFFF !important;
}

/* Calendar border and background */
.daterangepicker,
.daterangepicker .calendar-table {
    background: #FFFFFF !important;
    border-color: #D7E5EA !important;
}

    /* Date range preset buttons */
    .daterangepicker .ranges li {
        background: #F4FBFC !important;
        color: #164E63 !important;
        border-radius: 4px !important;
    }

        .daterangepicker .ranges li:hover,
        .daterangepicker .ranges li.active {
            background: #DDF5F3 !important;
            color: #087F8C !important;
        }
/* Chart headings - Dark Teal Theme */
.apexcharts-title-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* Custom chart header titles */
.speeding-chart-box .box-title,
.speeding-chart-box .chart-title,
.speeding-chart-box h3,
.speeding-chart-box h4 {
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* AutoBoard Pack chart headings */
.apexcharts-canvas .apexcharts-title-text {
    fill: #164E63 !important;
}


/* EXCESSIVE SPEEDING - DATATABLES INFO TEXT */
body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_info *,
body .dt-container .dt-info {
    color: #164E63 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding-top: 12px !important;
}

/* Keep the bottom info text visible */
body .dataTables_wrapper .dataTables_info,
body .dt-container .dt-info {
    display: block !important;
    background: transparent !important;
    text-shadow: none !important;
}

/* SPEEDING EVENTS - ALIGN CHART TITLES LEFT */

.speeding-events-page #seCountChart,
.speeding-events-page #seBySeverityByMonth {
    position: relative !important;
}

    /* Hide the existing centered SVG titles */
    .speeding-events-page #seCountChart .apexcharts-title-text,
    .speeding-events-page #seBySeverityByMonth .apexcharts-title-text {
        visibility: hidden !important;
    }

    /* First chart title */
    .speeding-events-page #seCountChart::before {
        content: "Speeding Events Count" !important;
        position: absolute !important;
        top: 0 !important;
        left: 14px !important;
        right: auto !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        color: #164E63 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        z-index: 20 !important;
        pointer-events: none !important;
    }

    /* Second chart title */
    .speeding-events-page #seBySeverityByMonth::before {
        content: "Number of Speeding Events by Severity by Month" !important;
        position: absolute !important;
        top: 0 !important;
        left: 14px !important;
        right: auto !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        color: #164E63 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        z-index: 20 !important;
        pointer-events: none !important;
    }

/* SPEEDING EVENTS - Chart heading alignment and colour */
.speeding-events-page .speeding-chart-box .box-title,
.speeding-events-page .speeding-chart-box .chart-title {
    color: #164E63 !important;
    text-align: left !important;
    font-weight: 600 !important;
}

/* Keep chart header content aligned to the left */
.speeding-events-page .speeding-chart-box .box-header {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Keep Clear Filter button text white */
.speeding-events-page .btn-clear-filter,
.speeding-events-page .clear-filter-btn {
    color: #FFFFFF !important;
}

/* Capacity & Utilisation - Keep chart title and Clear Filter on one line */
.box-header:has(.box-title):has(.btn) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

    .box-header:has(.box-title):has(.btn) .box-title {
        margin: 0 !important;
        float: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .box-header:has(.box-title):has(.btn) .btn {
        float: none !important;
        margin: 0 8px 0 auto !important;
        flex-shrink: 0 !important;
    }

/* PTO v Idle Time - Extend light teal background behind title and date */
#ptoVIdleTimechart .apexcharts-svg {
    background: linear-gradient( to bottom, #CFEDEC 0px, #CFEDEC 72px, #FFFFFF 72px, #FFFFFF 100% ) !important;
}

/* Keep chart title and date readable */
#ptoVIdleTimechart .apexcharts-title-text,
#ptoVIdleTimechart .apexcharts-subtitle-text {
    fill: #164E63 !important;
    color: #164E63 !important;
    font-weight: 600 !important;
}

/* PROFILE DROPDOWN - Light Theme */
.navbar-nav > .user-menu > .dropdown-menu > .user-header {
    background: #E8F7F7 !important;
    color: #164E63 !important;
    border-bottom: 1px solid #D7E5EA !important;
}

    /* Profile name */
    .navbar-nav > .user-menu > .dropdown-menu > .user-header > p,
    .navbar-nav > .user-menu > .dropdown-menu > .user-header > p > small {
        color: #164E63 !important;
        font-weight: 600 !important;
    }

    /* Profile avatar border */
    .navbar-nav > .user-menu > .dropdown-menu > .user-header > img {
        border-color: #B8E3E3 !important;
    }

/* Dropdown footer */
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background: #FFFFFF !important;
    padding: 12px !important;
    border-top: 1px solid #D7E5EA !important;
}

    /* Switch Account and Sign out links */
    .navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
        color: #087F8C !important;
        background: #FFFFFF !important;
        border-color: #D7E5EA !important;
    }

        /* Hover effect */
        .navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
            background: #E8F7F7 !important;
            color: #164E63 !important;
        }

/*  Title + hamburger icon one line*/ body.skin-black-light .content .box-header, .speeding-events-page .box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

    body.skin-black-light .content .box-header .box-title,
    .speeding-events-page .box-title {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        float: none !important;
        line-height: 1.3 !important;
    }

    /* Hamburger / box-tools icon ko bhi center align karo */ body.skin-black-light .content .box-header .box-tools,
    .speeding-events-page .box-header .box-tools {
        display: flex !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
        position: static !important;
    }
/* Speeding Events - Align chart menu icon with heading */

.speeding-events-page .speeding-chart-box .apexcharts-toolbar {
    top: 18px !important;
    right: 10px !important;
    z-index: 5 !important;
}
/* Speeding Events - Align section headings to the left */

.speeding-events-page .speeding-chart-box .box-header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
}

    .speeding-events-page .speeding-chart-box .box-header .box-title {
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        padding-left: 12px !important;
    }
/* FIX: Align all Speeding Events headings to the left */
body.skin-black-light .content .speeding-events-page .box-header, body .speeding-events-page .box-header {
    justify-content: flex-start !important;
    text-align: left !important;
}

    body .speeding-events-page .box-header > .box-title,
    body .speeding-events-page .box-header > h4,
    body .speeding-events-page .box-header > h3,
    body .speeding-events-page h4.speed-title {
        float: none !important;
        width: auto !important;
        flex: 0 1 auto !important;
        text-align: left !important;
        margin: 0 auto 0 0 !important;
        position: static !important;
        transform: none !important;
    }
/* Driving Events - Align section headings to the left */ 
body:has(.severity-title) .box-header:has(.severity-title), body:has(.driving-events-title) .box-header:has(.driving-events-title) {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

body:has(.severity-title) .severity-title, body:has(.driving-events-title) .driving-events-title {
    margin: 0 !important;
    width: auto !important;
    text-align: left !important;
    float: none !important;
}
/* =========================================================
   FIX: Driving Events headings - title LEFT + icon VISIBLE
   ========================================================= */
body .box-header:has(.severity-title), body .box-header:has(.driving-events-title) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 16px 20px !important;
    text-align: left !important;
    background: #CFEDEC !important;
    box-sizing: border-box !important;
}

body .box-header .severity-title, body .box-header .driving-events-title {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
    color: #164E63 !important;
    float: none !important;
}
/* Restore existing Highcharts menu icon */

.highcharts-contextbutton {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

    .highcharts-contextbutton .highcharts-button-symbol {
        stroke: #164E63 !important;
    }
/* Restore existing ApexCharts toolbar and menu */ .apexcharts-toolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

    .apexcharts-menu-icon,
    .apexcharts-toolbar svg {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
/* Events by Severity by Month - left aligned heading */

.severity-month-section > .box-header {
    text-align: left !important;
    position: relative;
}

    .severity-month-section > .box-header .box-title {
        float: left !important;
        text-align: left !important;
    }
    /* Show existing menu controls only */ .severity-month-section > .box-header .box-tools,
    .severity-month-section > .box-header .btn-box-tool {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
/* AutoBoardPack - Events by Severity by Month */ .box-header:has(> h4.speedo-title) {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
}

.box-header > h4.speedo-title {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}



/* AUTOBOARD PACK - EVENTS BY SEVERITY */ /* Fix main turquoise header alignment */

.box:has(> #speedeventsspeedometer) > .box-header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding: 14px 18px !important;
}
    /* Keep heading on the left */ .box:has(> #speedeventsspeedometer) > .box-header > .speedo-title {
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        color: #164E63 !important;
        -webkit-text-fill-color: #164E63 !important;
        font-weight: 600 !important;
    }
/* Show existing Highcharts menu buttons inside the gauges */ #speedeventsspeedometer .highcharts-contextbutton {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

    #speedeventsspeedometer .highcharts-contextbutton .highcharts-button-symbol {
        stroke: #164E63 !important;
    }