/* style.css — autokosten-vergelijker
   Aesthetiek: strak dashboard. Koel papierwit, inktzwart, één amber
   signaalkleur (als een brandstofmeter). Cijfers in mono voor afleesbaarheid. */

:root {
    --ink:        #16191f;
    --ink-zacht:  #5b6470;
    --ink-licht:  #8b93a0;
    --papier:     #f7f8fa;
    --vlak:       #ffffff;
    --lijn:       rgba(22, 25, 31, 0.10);
    --lijn-sterk: rgba(22, 25, 31, 0.18);
    --amber:      #d9601a;
    --amber-zac:  #fbeee5;
    --teal:       #1d7a6b;
    --rood:       #b3261e;
    --groen:      #1d7a4d;
    --radius:     10px;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --disp: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

/* ---- Kop ---- */
.kop { margin-bottom: 1.75rem; }
.kop h1 {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
}
.lead { color: var(--ink-zacht); margin: 0; max-width: 60ch; }

/* ---- Panelen ---- */
.paneel {
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.paneel h2 {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.aantal {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--papier);
    border: 1px solid var(--lijn);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    color: var(--ink-zacht);
}

.streep { border: none; border-top: 2px dashed var(--lijn-sterk); margin: 1.75rem 0; }

/* ---- Instellingen (boven) ---- */
.instellingen { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end; }

/* ---- Velden ---- */
.veld { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.veld label { font-size: 0.82rem; font-weight: 500; color: var(--ink-zacht); }
.veld .opt { color: var(--ink-licht); font-weight: 400; }
.veld input, .veld select {
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--vlak);
    border: 1px solid var(--lijn-sterk);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    width: 100%;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.veld select { font-family: var(--body); }
.veld input:focus, .veld select:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-zac);
}
.veld--fout input, .veld--fout select { border-color: var(--rood); }
.veld--breed { flex: 1 1 240px; }
.veld--knop { justify-content: flex-end; }

.eenheid { display: flex; align-items: center; gap: 0; border: 1px solid var(--lijn-sterk);
    border-radius: 8px; overflow: hidden; background: var(--vlak); }
.eenheid:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-zac); }
.eenheid input { border: none; border-radius: 0; box-shadow: none !important; }
.eenheid input:focus { box-shadow: none; }
.eenheid span { font-size: 0.8rem; color: var(--ink-licht); padding: 0 0.6rem; white-space: nowrap; }
.eenheid .pre { padding-right: 0; padding-left: 0.6rem; }

.hint { font-size: 0.74rem; color: var(--ink-licht); }
.fout { font-size: 0.76rem; color: var(--rood); }

/* ---- Knoppen ---- */
.knop {
    font-family: var(--body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--vlak);
    border: 1px solid var(--lijn-sterk);
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: background 0.12s, transform 0.05s, border-color 0.12s;
}
.knop:hover { background: var(--papier); border-color: var(--ink-licht); }
.knop:active { transform: scale(0.98); }
.knop--primair {
    background: var(--amber); color: #fff; border-color: var(--amber);
    font-weight: 600;
}
.knop--primair:hover { background: #c15314; border-color: #c15314; }
.knop--klein { padding: 0.4rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }
.knop--icoon {
    width: 30px; height: 30px; padding: 0; font-size: 1.2rem; line-height: 1;
    color: var(--ink-licht); border-color: var(--lijn);
}
.knop--icoon:hover { color: var(--rood); border-color: var(--rood); background: #fdeceb; }

/* ---- Auto-formulier ---- */
.auto-form { display: flex; flex-direction: column; gap: 1.1rem; }
.auto-form__rij { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-end; }
.auto-form__rij > .veld { flex: 1 1 140px; }
.kenteken-rij { display: flex; gap: 0.4rem; }
.kenteken-rij input { text-transform: uppercase; }

/* ---- Meldingen ---- */
.melding { border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.melding--ok  { background: #e7f4ee; color: var(--groen); border: 1px solid #bfe3cf; }
.melding--let { background: var(--amber-zac); color: #9a4310; border: 1px solid #f1cdb0; }

/* ---- Lijst-tabel ---- */
table { width: 100%; border-collapse: collapse; }
.lijst th, .lijst td, .detail th, .detail td {
    text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--lijn);
    font-size: 0.88rem;
}
.lijst thead th, .detail thead th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-licht); font-weight: 500; border-bottom: 1px solid var(--lijn-sterk);
}
.lijst .num, .detail .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.lijst tbody tr:hover { background: var(--papier); }
.c-check, .c-actie { width: 1%; white-space: nowrap; }
.c-check input { width: 17px; height: 17px; accent-color: var(--amber); cursor: pointer; }
.auto-naam { font-weight: 500; }
.kenteken-badge {
    font-family: var(--mono); font-size: 0.7rem; background: #fdf3d6; color: #6a5200;
    border: 1px solid #e7d59a; border-radius: 4px; padding: 0.05rem 0.35rem; margin-left: 0.4rem;
    letter-spacing: 0.06em;
}
.brandstof-badge {
    font-size: 0.74rem; border-radius: 5px; padding: 0.12rem 0.45rem; font-weight: 500;
    background: var(--papier); border: 1px solid var(--lijn);
}
.b-benzine    { background: #fbeee5; color: #9a4310; border-color: #f1cdb0; }
.b-diesel     { background: #eef0f4; color: #41495a; border-color: #d4d8e0; }
.b-elektrisch { background: #e7f4ee; color: var(--groen); border-color: #bfe3cf; }
.b-lpg        { background: #f0eaf6; color: #5e3a86; border-color: #ddccef; }
.b-hybride    { background: #e7eef7; color: #2b4f7a; border-color: #c5d6ea; }

.leeg { color: var(--ink-licht); font-style: italic; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Resultaat ---- */
.resultaat { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn-sterk); }
.resultaat__kop { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.resultaat__kop h2 { margin: 0; }
.resultaat__sub { color: var(--ink-zacht); margin: 0; font-size: 0.9rem; }

.legenda { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1rem; font-size: 0.78rem; color: var(--ink-zacht); }
.legenda__item { display: flex; align-items: center; gap: 0.35rem; }
.vlak { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.balken { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; }
.balk-rij { display: grid; grid-template-columns: 180px 1fr 150px; align-items: center; gap: 0.8rem; }
.balk-rij__naam { font-size: 0.86rem; font-weight: 500; display: flex; align-items: center; gap: 0.35rem; }
.ster { color: var(--amber); }
.balk-rij__bar { display: flex; height: 26px; border-radius: 5px; overflow: hidden; min-width: 2px; background: var(--papier); }
.seg { height: 100%; }
.balk-rij__bedrag { text-align: right; font-family: var(--mono); font-size: 0.9rem; }
.balk-rij__bedrag .pm { color: var(--ink-licht); font-size: 0.74rem; }
.balk-rij__bedrag .delta { display: block; font-size: 0.74rem; color: var(--rood); }
.balk-rij__bedrag .delta--best { color: var(--groen); }
.balk-rij--best .balk-rij__naam { color: var(--ink); }

.detail { margin-top: 0.5rem; }
.detail .totaal { font-weight: 600; color: var(--ink); }
.detail tbody tr:hover { background: var(--papier); }

/* ---- Voet ---- */
.voet { color: var(--ink-licht); font-size: 0.78rem; text-align: center; margin-top: 1.5rem; }
.voet p { margin: 0; }

/* ---- Responsief ---- */
@media (max-width: 720px) {
    .balk-rij { grid-template-columns: 1fr; gap: 0.3rem; }
    .balk-rij__bedrag { text-align: left; }
    .lijst, .detail { display: block; overflow-x: auto; white-space: nowrap; }
    .instellingen { flex-direction: column; align-items: stretch; }
    .veld--knop { justify-content: stretch; }
    .knop--primair { width: 100%; }
}