.vehicle-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}


/* Vehicle cards */

#vehicles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}


.vehicle-card {

    background: white;

    border-radius: 14px;

    padding: 25px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.12);

    transition: .2s ease;

}


.vehicle-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);

}


.vehicle-card h3 {

    margin-top:0;

    color:#1d3557;

    font-size:24px;

}


.vehicle-card p {

    line-height:1.8;

    color:#444;

}


.vehicle-card .button {

    display:inline-block;

    margin-top:15px;

    padding:10px 22px;

    border-radius:8px;

    background:#2563eb;

    color:white;

    text-decoration:none;

}


.vehicle-card .button:hover {

    background:#1e40af;

}



/* Add vehicle form */

.vehicle-form {

    background:white;

    padding:30px;

    margin-top:40px;

    border-radius:14px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.12);

}



.vehicle-form label {

    font-weight:600;

    margin-bottom:6px;

    display:block;

}



.vehicle-form input,
.vehicle-form select {


    width:100%;

    padding:12px;

    border-radius:8px;

    border:1px solid #ccc;

    margin-bottom:18px;

    font-size:16px;

}


.vehicle-form button {

    background:#16a34a;

    color:white;

    border:none;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

}


.vehicle-form button:hover {

    background:#15803d;

}


/* Put form fields into columns */

.form-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.vehicle-dashboard-card {
    max-width: 700px;
    margin: 30px auto;
}


.vehicle-info-grid {

    display: grid;

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

    gap: 15px;

    margin-top: 25px;

}



.vehicle-info-grid b {

    color: #555;

}


.vehicle-info-grid div {

    background: #f8f8f8;

    padding: 15px;

    border-radius: 12px;

    border: 1px solid #ddd;

}



.dashboard-links {

    max-width:700px;

    margin:20px auto;

    text-align:center;

}



.dashboard-links .button {

    display:inline-block;

    margin:10px;

    padding:12px 20px;

    background:#2563eb;

    color:white;

    border-radius:10px;

    text-decoration:none;

}



.dashboard-links .button:hover {

    background:#1d4ed8;

}

/* Vehicle dashboard buttons */

.dashboard-actions {

    display:flex;

    justify-content:left;

    gap:15px;

    margin-top:50px;

}


.dashboard-actions .button {

    display:inline-block;

    padding:12px 25px;

    background:#2563eb;

    color:white;

    border-radius:10px;

    text-decoration:none;

}


.dashboard-actions .button:hover {

    background:#1d4ed8;

}

/* Component status colors */

.status {

    display:inline-block;

    padding:3px 10px;

    border-radius:15px;

    font-weight:600;

    color:white;

    font-size:12px;

    min-width:55px;

    text-align:center;

}


/* Health levels */

.status.new {

    background:#6495ED;

}


.status.good {

    background:#32CD32;

}


.status.fair {

    background:#FFD700;

}


.status.poor {

    background:#FA8072;

}


.status.critical {

    background:#FF00FF;

}

/* Components table */

.components-table {

    width:100%;

    border-collapse:collapse;

    table-layout:auto;

}


.components-table th,
.components-table td {

    padding:14px 12px;

    text-align:left;

    vertical-align:middle;

}


/* Give Last Service more room */

.components-table th:last-child,
.components-table td:last-child {

    min-width:220px;

    white-space:normal;

}

.components-table th:nth-child(1),
.components-table td:nth-child(1) {
    min-width:150px;
}


.components-table th:nth-child(2),
.components-table td:nth-child(2) {
    min-width:120px;
}


.components-table th:last-child,
.components-table td:last-child {
    min-width:220px;
}

.components-table th {

    cursor:pointer;

    user-select:none;

    transition: background .2s ease, color .2s ease;

}


.components-table th:hover {

    background:#eef2ff;

    color:#2563eb;

}

.component-selector {

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.12);

}


.component-group {

    margin-bottom:15px;

    border:1px solid #ddd;

    border-radius:12px;

    overflow:hidden;

}


.component-title {

    background:#f1f5f9;

    padding:15px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

}


.component-title:hover {

    background:#e0e7ff;

}


.component-locations {

    display:none;

    padding:15px;

}


.component-location {

    padding:8px;

}


.component-location:hover {

    background:#f8fafc;

}


.selected-service {

    margin-top:15px;

}

.component-single {

    background:white;

    padding:15px;

    margin-bottom:10px;

    border:1px solid #ddd;

    border-radius:12px;

}


.component-single:hover {

    background:#f8fafc;

}

/* Maintenance cards */

#maintenance .card {

    margin-bottom:20px;

    padding:20px;

    border-radius:14px;

}


#maintenance h4 {

    color:#1d3557;

    margin-top:0;

}



#maintenance button {

    margin-top:15px;

}



/* Add maintenance button */

.btn {

    padding:12px 24px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

}



.btn-primary {

    background:#2563eb;

    color:white;

}


.btn-primary:hover {

    background:#1d4ed8;

}


.btn-success {

    background:#16a34a;

    color:white;

}


.btn-success:hover {

    background:#15803d;

}



/* Component selector */

.component-selector {

    background:#f8fafc;

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

}


.component-selector label {

    display:block;

    background:white;

    padding:12px;

    margin-bottom:10px;

    border-radius:10px;

    border:1px solid #ddd;

    cursor:pointer;

}


.component-selector label:hover {

    background:#eef2ff;

}

.other-option {

    display:block;

    background:white;

    padding:12px;

    margin-top:15px;

    border-radius:10px;

    border:1px solid #ddd;

    cursor:pointer;

}


.other-option:hover {

    background:#eef2ff;

}

/* Maintenance report cards */

#maintenance .card {

    background:white;

    border-radius:16px;

    padding:25px;

    margin-bottom:25px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 4px 15px rgba(0,0,0,.10);

}


#maintenance .card:hover {

    transform:translateY(-3px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

}



#maintenance h4 {

    margin-top:0;

    margin-bottom:15px;

    font-size:22px;

    color:#1d3557;

}



#maintenance p {

    line-height:1.8;

    margin-bottom:15px;

}



#maintenance button {

    margin-top:15px;

}