/* ==================== static/css/style.css ==================== */
:root { 
    --green: #18a957; 
    --beige: #f5efe6; 
    --dark: #1b1f23; 
    --muted: #666; 
}

body { 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
    margin: 0; 
    color: var(--dark); 
    font-size: 15px; 
}

header { 
    padding: 10px 14px; 
    border-bottom: 1px solid #ddd; 
    display: flex; 
    gap: 10px; 
    align-items: center; 
    justify-content: space-between; 
}

header a { 
    text-decoration: none; 
    color: var(--dark); 
    font-weight: 600; 
    font-size: 14px; 
}

main { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 12px; 
}

table {
    border-collapse: collapse; 
    width: 100%; 
    font-size: 14px; 
}

td, th { 
    border-bottom: 1px solid #eee; 
    padding: 6px 4px; 
    text-align: left; 
}

.row { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
}

.card { 
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    padding: 12px; 
    margin-bottom: 12px; 
}

.vehicle-card { 
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    padding: 12px; 
    margin-bottom: 12px; 
}

.vehicle-card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 8px; 
}

.vehicle-card-actions { 
    display: flex; 
    gap: 6px; 
    flex-wrap: wrap; 
    margin-top: 8px; 
}

.btn { 
    display: inline-block; 
    padding: 6px 10px; 
    border-radius: 6px; 
    border: 1px solid #ddd; 
    background: #fff; 
    text-decoration: none; 
    color: inherit; 
    font-size: 13px; 
    cursor: pointer; 
}

.btn-primary { 
    border-color: #12824b; 
    background: #14a258; 
    color: #fff; 
}

.btn-danger { 
    border-color: #b91c1c; 
    color: #b91c1c; 
}

.btn-sm { 
    padding: 4px 8px; 
    font-size: 12px; 
}

.muted { 
    color: var(--muted); 
    font-size: 12px; 
}

.mono { 
    font-family: ui-monospace, monospace; 
    font-size: 13px; 
}

.status-ok { 
    background: var(--green); 
    color: #fff; 
    padding: 16px; 
    border-radius: 8px; 
}

.status-nok { 
    background: var(--beige); 
    color: #000; 
    padding: 16px; 
    border-radius: 8px; 
}

.big { 
    font-size: 1.5rem; 
    font-weight: 700; 
    letter-spacing: 1px; 
}

.grid { 
    display: grid; 
    grid-template-columns: 1fr auto; 
    gap: 8px; 
    align-items: center; 
}

.badge { 
    display: inline-block; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-size: 11px; 
    font-weight: 600; 
}

.badge-success { 
    background: #dcfce7; 
    color: #166534; 
}

.badge-muted { 
    background: #f3f4f6; 
    color: #6b7280; 
}

form.inline { 
    display: inline; 
}

input[type=text],
input[type=password],
textarea,
select { 
    padding: 6px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    font-size: 14px; 
    width: 100%; 
    box-sizing: border-box; 
}

textarea { 
    min-height: 60px; 
    font-family: inherit; 
}

.error { 
    color: #b91c1c; 
    padding: 8px; 
    background: #fee; 
    border-radius: 6px; 
    margin-bottom: 12px; 
}

.success { 
    color: #166534; 
    padding: 8px; 
    background: #dcfce7; 
    border-radius: 6px; 
    margin-bottom: 12px; 
}

.cols { 
    display: block; 
}

.pagination { 
    display: flex; 
    gap: 6px; 
    justify-content: center; 
    margin: 16px 0; 
    flex-wrap: wrap; 
}

.pagination a, 
.pagination span { 
    padding: 6px 12px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    text-decoration: none; 
    color: inherit; 
}

.pagination .active { 
    background: var(--green); 
    color: #fff; 
    border-color: var(--green); 
}

.checkbox-label { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    cursor: pointer; 
}

.search-box { 
    margin-bottom: 12px; 
}

/* Desktop layout */
@media(min-width: 900px) {
    .cols { 
        display: grid; 
        grid-template-columns: 2fr 1fr; 
        gap: 12px; 
    }
    
    #vehicles-table { 
        display: table; 
    }
    
    .vehicle-card { 
        display: none; 
    }
}

/* Mobile layout */
@media(max-width: 899px) {
    #vehicles-table { 
        display: none; 
    }
    
    .vehicle-card { 
        display: block; 
    }
    
    .card { 
        overflow-x: auto; 
    }
    
    .card table { 
        display: table; 
        font-size: 12px; 
    }
    
    .card table td, 
    .card table th { 
        padding: 4px 2px; 
    }
}

/* Print styles */
@media print { 
    header, 
    .noprint { 
        display: none; 
    }
    
    main { 
        padding: 0; 
    }
}