/* ============================================================
   ALCOLOCK ONLINE — MODERN DASHBOARD v3 OVERRIDES
   2026-09-23

   v3:
   - dark company dropdown/select field
   - larger, more visible ALCOLOCK brand on the left
   - add status dots inside vehicle cards, just to the right
     of the left status stripe
   ============================================================ */

/* ========================= COMPANY DROPDOWN ========================= */

#companySelect {
    background: #142035 !important;
    color: #f8fafc !important;

    border: 1px solid #334155 !important;
    border-radius: 8px !important;

    box-shadow: none !important;
}

#companySelect:hover {
    background: #17243a !important;
    border-color: #40516a !important;
}

#companySelect:focus,
#companySelect:focus-visible {
    background: #17243a !important;
    border-color: #4f83ee !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Make option list readable */
#companySelect option {
    background: #0f172a;
    color: #f8fafc;
}

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

#aoBrand {
    margin-right: 16px !important;
    padding-right: 18px !important;
    min-width: max-content;
}

#aoBrand #topLogo {
    height: 40px !important;
    max-width: 205px !important;
}

/* Slightly more room before nav items */
#leftControls {
    gap: 5px !important;
}

/* ========================= STATUS DOTS ========================= */

#vehicleList .vehicle {
    padding-left: 31px !important;
}

/* Keep stripe */
#vehicleList .vehicle::before {
    left: -1px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0 !important;
}

/* New inner dot, just right of stripe */
#vehicleList .vehicle::after {
    content: "";

    position: absolute;

    left: 16px;
    top: 50%;

    width: 12px;
    height: 12px;

    border-radius: 999px;

    transform: translateY(-50%);

    background: #64748b;

    box-shadow:
        0 0 0 2px rgba(255,255,255,0.04),
        inset 0 1px 1px rgba(255,255,255,0.12);
}

/* Dot colors by state */
#vehicleList .vehicle.ui-online::after,
#vehicleList .vehicle.online::after {
    background: #22c55e !important;
}

#vehicleList .vehicle.ui-offline::after,
#vehicleList .vehicle.offline::after {
    background: #94a3b8 !important;
}

#vehicleList .vehicle.ui-warning::after {
    background: #f59e0b !important;
}

#vehicleList .vehicle.ui-alarm::after {
    background: #ef4444 !important;
}

/* Ensure text starts after the dot */
#vehicleList .vehicle .aoVehicleMain,
#vehicleList .vehicle > div:first-child {
    padding-left: 10px;
}

/* Slight balance for the history action */
#vehicleList .aoVehicleActions {
    padding-left: 14px !important;
}

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

@media (max-width: 1450px) {
    #aoBrand #topLogo {
        height: 36px !important;
        max-width: 185px !important;
    }
}

@media (max-width: 1120px) {
    #aoBrand {
        margin-right: 10px !important;
        padding-right: 10px !important;
    }

    #aoBrand #topLogo {
        height: 32px !important;
        max-width: 165px !important;
    }
}