/* Basis styling en variabelen (geïnspireerd op je :root) */
:root {
    --co2-primary: #4CAF50; /* Groen */
    --co2-secondary: #F0F0F0; /* Lichtgrijs */
    --co2-accent: #008080; /* Teal */
    --co2-text-dark: #333;
    --co2-text-light: #f8f9fa;
    --co2-border-color: #dee2e6;
    --co2-card-bg: #ffffff;
    --co2-card-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --co2-radius: 0.5rem;
}

.co2-calculator-container {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--co2-text-dark);
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.co2-card {
    background-color: var(--co2-card-bg);
    border: 1px solid var(--co2-border-color);
    border-radius: var(--co2-radius);
    box-shadow: var(--co2-card-shadow);
    margin-bottom: 1.5rem; /* Ruimte tussen kaarten */
}

.co2-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--co2-border-color);
}

.co2-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.co2-card-description {
    color: #6c757d; /* Muted text color */
    font-size: 0.9rem;
}

.co2-card-content {
    padding: 1.5rem;
}

.co2-input-group {
    margin-bottom: 1.5rem;
}

.co2-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.co2-input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.co2-input-group input[type="number"] {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--co2-border-color);
    border-radius: calc(var(--co2-radius) - 2px); /* Iets kleiner dan kaart */
    box-sizing: border-box; /* Voorkomt dat padding de breedte beïnvloedt */
    font-size: 1rem;
}

/* Grid voor naast elkaar plaatsen (zoals elektra/wagenpark) */
.co2-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 gelijke kolommen */
    gap: 1rem; /* Ruimte tussen grid items */
}

/* Knop styling */
.co2-button {
    background-color: var(--co2-primary);
    color: var(--co2-text-light);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: var(--co2-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.co2-button:hover {
    background-color: #45a049; /* Iets donkerder groen */
}

.co2-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Resultaten styling */

.co2-results-table-wrapper {
    overflow-x: auto; /* Maakt tabel scrollbaar op kleine schermen */
    margin-bottom: 1.5rem;
}

.co2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.co2-table th,
.co2-table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--co2-border-color);
}

.co2-table th {
    font-weight: 600;
    background-color: var(--co2-secondary);
}

.co2-table tr:last-child td {
    border-bottom: none; /* Geen lijn onder de laatste rij (Totaal) */
}

.co2-table td:last-child,
.co2-table th:last-child {
     text-align: right; /* Waarden rechts uitlijnen */
}

/* Chart container */
.co2-chart-container {
    position: relative; /* Nodig voor Chart.js responsiveness */
    height: 300px; /* Vaste hoogte of pas aan */
    width: 100%; /* Volledige breedte */
}


/* Media Queries voor kleinere schermen (optioneel, maar aanbevolen) */
@media (max-width: 600px) {
    .co2-grid-2 {
        grid-template-columns: 1fr; /* Stapel items onder elkaar */
    }
    .co2-card-content {
        padding: 1rem;
    }
     .co2-table th,
     .co2-table td {
         padding: 0.5rem;
     }
}

/* Eventueel styling voor iconen als je SVGs of een font gebruikt */
/* .co2-icon { display: inline-block; width: 1em; height: 1em; margin-left: 0.25em; vertical-align: middle; } */