/* Reset & base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f8f9fa;
    color: #212529;
}
.app-header, .app-nav { text-align: center; }
.app-header h1 {
    font-size: 1.8rem; margin-bottom: 0.3em; color: #2c7be5;
}
.header-sub {
    display: flex; justify-content: center; align-items: center; gap: 0.6em;
    font-size: 0.9em; background: #eef4ff; padding: 0.5em 1em;
    border-radius: 8px; margin-bottom: 1em;
}
.header-sub button { cursor: pointer; border:none; background:none; font-size:1.2rem;}
.header-sub a { color:#2c7be5; text-decoration:none;}

.app-nav { display:flex; justify-content:center; gap:0.4em; margin-bottom:1em; flex-wrap:wrap;}
.app-nav button, .app-nav span {
    padding: 0.6em 1em;
    border-radius: 99px;
    border: none; background:#eef4ff; color:#2c7be5; font-weight:500;
}
.app-nav button.active { background:#2c7be5; color:white; }

/* Dashboard */
.dashboard {
    max-width: 600px;
    margin: 0 auto;
    padding: 1em;
}

.cards-grid { display: grid; gap: 1.4em; }
.card {
    background: white; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 1em;
}
.card h3 { margin-bottom: 0.7em; font-size: 1rem; color:#495057; border-bottom:1px solid #eee; }

.vehicle-list ul { list-style:none; }
.vehicle-menu li button {
    display:block; width:100%; padding:0.6em;
    margin-bottom:0.3em; border-radius:6px;
    background:#eef4ff; color:#2c7be5;
    text-align:left; font-weight:600; cursor:pointer;
    transition:0.2s; border:none;
}
.vehicle-menu li button:hover { background:#2c7be5; color:white; }

.service-row {
    display:flex; justify-content:space-between; align-items:center;
    padding: 0.7em 0.4em;
    margin-bottom:0.6em; border-radius:6px; background:#fff9f0;
}
.service-row.detail-mode { background:#e8f5e9; font-size:0.92em;}
.service-row span { flex:1; }
.actions {
    display:flex; gap:0.3em; margin-left:0.4em;
}
.actions a, .actions button {
    border:none; background:none; cursor:pointer; font-size:1.1rem; padding:0;
}

.btn-add {
    display:block; width:100%; margin-top:0.8em;
    padding:0.6em; border-radius:99px; border: none;
    background:#2c7be5; color:white; font-weight:bold;
}
.btn-cancel { display:inline-block; margin-left:0.8em; color:#dc3545;}

/* Forms */
form label {
    display:block; font-size:0.9em; margin-top:0.6em; margin-bottom:0.2em;
}
form input, form select {
    width:100%; padding:0.5em 0.7em; border-radius:4px;
    border:1px solid #ced4da; font-size:1rem;
}

/* Responsive */
@media (max-width:480px) {
    .dashboard { padding:0.6em; }
    .header-sub { flex-direction:column; gap:0.3em; text-align:center; }
}