/* Jewelry POS — handgeschreven CSS, geen build-stap, geen framework. */

:root {
    --kleur-tekst: #1f2328;
    --kleur-zacht: #57606a;
    --kleur-rand: #d8dee4;
    --kleur-achtergrond: #f6f8fa;
    --kleur-vlak: #ffffff;
    --kleur-primair: #8a6d3b;
    --kleur-primair-donker: #6b5329;
    --kleur-fout: #b42318;
    --kleur-fout-vlak: #fef3f2;
    --kleur-goed: #067647;
    --kleur-goed-vlak: #ecfdf3;
    --kleur-info-vlak: #eff8ff;
    --kleur-info: #175cd3;
    --rond: 6px;
}

* { box-sizing: border-box; }

/* Een eigen display-regel (bv. .veld--vink) wint het anders van [hidden]. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--kleur-tekst);
    background: var(--kleur-achtergrond);
}

a { color: var(--kleur-primair); }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

/* Kop en navigatie */

.kop {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    background: var(--kleur-vlak);
    border-bottom: 1px solid var(--kleur-rand);
}

.kop__merk {
    font-weight: 600;
    text-decoration: none;
    color: var(--kleur-tekst);
    padding: .9rem 0;
}

.kop__nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }

.kop__link {
    padding: .9rem .7rem;
    text-decoration: none;
    color: var(--kleur-zacht);
    border-bottom: 2px solid transparent;
}

.kop__link:hover { color: var(--kleur-tekst); }
.kop__link.is-actief { color: var(--kleur-tekst); border-bottom-color: var(--kleur-primair); }

.kop__gebruiker { display: flex; align-items: center; gap: .75rem; color: var(--kleur-zacht); }
.kop__gebruiker form { margin: 0; }

.subnav {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--kleur-rand);
}

.subnav__link {
    padding: .5rem .75rem;
    text-decoration: none;
    color: var(--kleur-zacht);
    border-bottom: 2px solid transparent;
}

.subnav__link.is-actief { color: var(--kleur-tekst); border-bottom-color: var(--kleur-primair); }

/* Inhoud */

.inhoud { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }

.uitleg { color: var(--kleur-zacht); max-width: 60ch; margin: 0 0 1.25rem; }

.kaart {
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.adres { color: var(--kleur-zacht); margin: 0; }

.hint { color: var(--kleur-zacht); font-size: .85rem; }

.schema {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
    color: var(--kleur-zacht);
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    padding: .6rem .8rem;
    margin: 0 0 1.25rem;
    overflow-x: auto;
}

/* Uitleg achter een vraagteken */

.uitlegblok { margin: 0 0 1.25rem; }

.uitlegblok__knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--kleur-rand);
    border-radius: 50%;
    background: var(--kleur-vlak);
    color: var(--kleur-zacht);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.uitlegblok__knop::-webkit-details-marker { display: none; }
.uitlegblok__knop:hover { color: var(--kleur-tekst); }
.uitlegblok[open] .uitlegblok__knop { background: var(--kleur-achtergrond); color: var(--kleur-tekst); }

.uitlegblok__inhoud { margin-top: .75rem; }
.uitlegblok__inhoud .uitleg:last-child { margin-bottom: 0; }

/* Meldingen */

.melding {
    padding: .75rem 1rem;
    border-radius: var(--rond);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.melding--gelukt { background: var(--kleur-goed-vlak); border-color: var(--kleur-goed); color: var(--kleur-goed); }
.melding--fout   { background: var(--kleur-fout-vlak); border-color: var(--kleur-fout); color: var(--kleur-fout); }
.melding--info   { background: var(--kleur-info-vlak); border-color: var(--kleur-info); color: var(--kleur-info); }

/* Formulieren */

.formulier { background: var(--kleur-vlak); border: 1px solid var(--kleur-rand); border-radius: var(--rond); padding: 1.25rem; }
.formulier--rij { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }

fieldset { border: 0; border-top: 1px solid var(--kleur-rand); margin: 0 0 1.25rem; padding: 1rem 0 0; }
fieldset:first-of-type { border-top: 0; padding-top: 0; }
legend { font-weight: 600; padding: 0 .5rem 0 0; }

.veldgroep { display: flex; gap: 1rem; flex-wrap: wrap; }

.veld { margin-bottom: 1rem; flex: 1 1 220px; }
.veld--breed { flex: 2 1 320px; }
.veld--smal { flex: 0 0 160px; }
.veld--vink { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; }
.veldgroep--vinkjes { align-items: center; row-gap: .25rem; }
.veldgroep--vinkjes .veld { margin-bottom: .75rem; }

.veld label { display: block; font-weight: 500; margin-bottom: .25rem; }
.veld--vink label { margin: 0; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    font: inherit;
    background: var(--kleur-vlak);
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    /* Safari geeft datumvelden een eigen hoogte en lettertype. */
    min-height: 2.35rem;
    line-height: 1.3;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--kleur-primair);
    outline-offset: -1px;
}

input:disabled, select:disabled, button:disabled { background: var(--kleur-achtergrond); color: var(--kleur-zacht); cursor: not-allowed; }

.invoer--kort { width: 5rem; }

.veld__fout { color: var(--kleur-fout); font-size: .85rem; margin: .25rem 0 0; }

.formulier__acties { margin-top: 1rem; }

/* Knoppen */

.knop {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    background: var(--kleur-vlak);
    font: inherit;
    cursor: pointer;
}

.knop:hover:not(:disabled) { background: var(--kleur-achtergrond); }

.knop--primair {
    background: var(--kleur-primair);
    border-color: var(--kleur-primair);
    color: #fff;
}

.knop--primair:hover:not(:disabled) { background: var(--kleur-primair-donker); border-color: var(--kleur-primair-donker); }

.knop--leeg { border: 0; background: none; color: var(--kleur-zacht); padding: .25rem .5rem; }
.knop--leeg:hover { text-decoration: underline; background: none; }

/* Tabellen */

.tabel { width: 100%; border-collapse: collapse; background: var(--kleur-vlak); }
.tabel th, .tabel td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--kleur-rand); vertical-align: top; }
.tabel th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--kleur-zacht); }

.tabel--betaalmethodes td:first-child,
.tabel--betaalmethodes th:first-child,
.tabel--betaalmethodes td:last-child,
.tabel--betaalmethodes th:last-child { width: 4rem; text-align: center; }

.rij--geblokkeerd { opacity: .65; }

.methode { display: block; cursor: pointer; font-weight: 400; }
.methode__uitleg { display: block; color: var(--kleur-zacht); font-size: .85rem; }
.methode__blokkade { display: block; color: var(--kleur-fout); font-size: .85rem; margin-top: .25rem; }

.lijst--methodes { list-style: none; margin: 0; padding: 0; }
.lijst--methodes li { padding: .35rem 0; border-bottom: 1px solid var(--kleur-rand); }
.lijst--methodes li:last-child { border-bottom: 0; }

/* Badges */

.badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-rand);
    color: var(--kleur-zacht);
}

.badge--standaard { background: var(--kleur-goed-vlak); border-color: var(--kleur-goed); color: var(--kleur-goed); }
.badge--live { background: var(--kleur-fout-vlak); border-color: var(--kleur-fout); color: var(--kleur-fout); }
.badge--test { background: var(--kleur-info-vlak); border-color: var(--kleur-info); color: var(--kleur-info); }

/* Inloggen */

.pagina-inloggen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.inlogkaart {
    width: 100%;
    max-width: 360px;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    padding: 2rem;
}

.inlogkaart h1 { margin-bottom: 1.5rem; text-align: center; }
.inlogkaart .knop { width: 100%; }

code { background: var(--kleur-achtergrond); padding: .1rem .3rem; border-radius: 3px; font-size: .9em; }

/* Paginakop met acties ernaast */

.paginakop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.paginakop h1 { margin: 0; }
.paginakop__acties { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.paginakop__acties form { margin: 0; }

/* Zoekbalk */

.zoekbalk {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.zoekbalk .veld { margin-bottom: 0; }

.verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.leeg {
    background: var(--kleur-vlak);
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--rond);
    padding: 2rem;
    text-align: center;
    color: var(--kleur-zacht);
}

.paginering {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem .5rem;
    color: var(--kleur-zacht);
}

/* Definitielijst voor detailgegevens */

.gegevens { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem 1rem; margin: 0; }
.gegevens dt { color: var(--kleur-zacht); }
.gegevens dd { margin: 0; }

.notitie { margin: 0; white-space: pre-wrap; }

@media (max-width: 640px) {
    .gegevens { grid-template-columns: 1fr; gap: .15rem; }
    .gegevens dd { margin-bottom: .6rem; }
}

/* Kengetallen boven een overzicht */

.kengetallen {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.kengetal {
    flex: 1 1 140px;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    padding: .75rem 1rem;
}

.kengetal__label { display: block; color: var(--kleur-zacht); font-size: .8rem; }
.kengetal strong { font-size: 1.15rem; }

.tabel .rechts, .rechts { text-align: right; }
.tabel td.acties { white-space: nowrap; }
.tabel td.acties form { display: inline; }
.tabel td input[type="text"], .tabel td input[type="number"] { min-width: 6rem; }

/* Nummerreeksen */

.reeks__kop { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.reeks__kop h2 { margin: 0; }
.reeks .formulier__acties { margin-top: .5rem; }

.veld__label { display: block; font-weight: 500; margin-bottom: .25rem; }

.voorbeeld {
    display: inline-block;
    padding: .5rem .6rem;
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--rond);
    background: var(--kleur-achtergrond);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Verkoop: totalen en statusbadges */

.totalen {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1.5rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--kleur-rand);
    max-width: 26rem;
    margin-left: auto;
}

.totalen dt { color: var(--kleur-zacht); }
.totalen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.totalen__eind {
    padding-top: .5rem;
    border-top: 1px solid var(--kleur-rand);
    font-weight: 600;
    color: var(--kleur-tekst);
}

.bedrag--negatief { color: var(--kleur-fout); }

.badge--concept      { background: var(--kleur-achtergrond); }
.badge--gefactureerd { background: var(--kleur-info-vlak); border-color: var(--kleur-info); color: var(--kleur-info); }
.badge--betaald      { background: var(--kleur-goed-vlak); border-color: var(--kleur-goed); color: var(--kleur-goed); }

/* Reparatiestatussen */

.badge--open      { background: var(--kleur-achtergrond); }
.badge--klaar     { background: var(--kleur-goed-vlak); border-color: var(--kleur-goed); color: var(--kleur-goed); }
.badge--opgehaald { background: var(--kleur-info-vlak); border-color: var(--kleur-info); color: var(--kleur-info); }

/* Offertestatussen */

.badge--verzonden    { background: var(--kleur-info-vlak); border-color: var(--kleur-info); color: var(--kleur-info); }
.badge--geaccepteerd { background: var(--kleur-goed-vlak); border-color: var(--kleur-goed); color: var(--kleur-goed); }
.badge--afgewezen,
.badge--vervallen    { background: var(--kleur-achtergrond); }

/* Koppelingen */

.koppeling { padding: .75rem 0; border-top: 1px solid var(--kleur-rand); }
.koppeling:first-of-type { border-top: 0; }
.koppeling .formulier--rij { margin-bottom: .35rem; }

.koppeling__status { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.koppeling__status form { margin: 0; }

/* Overzichtsscherm */

.paginakop__bij { color: var(--kleur-zacht); margin: .15rem 0 0; }

.tegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tegel {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
}

.tegel:hover { border-color: var(--kleur-primair); }

.tegel__label { color: var(--kleur-zacht); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.tegel__waarde { font-size: 1.6rem; line-height: 1.2; }
.tegel__bij { color: var(--kleur-zacht); font-size: .85rem; }

.tegel--urgent { border-color: var(--kleur-fout); background: var(--kleur-fout-vlak); }
.tegel--urgent .tegel__waarde,
.tegel--urgent .tegel__bij { color: var(--kleur-fout); }

.kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.kolommen .kaart { margin-bottom: 0; }

.kaart__leeg { color: var(--kleur-zacht); margin: 0; }

.lijst--kort { list-style: none; margin: 0 0 .75rem; padding: 0; }
.lijst--kort li { padding: .5rem 0; border-bottom: 1px solid var(--kleur-rand); }
.lijst--kort li:last-child { border-bottom: 0; }
.lijst--kort__bij { color: var(--kleur-zacht); }

.badge--waarschuwing { background: var(--kleur-fout-vlak); border-color: var(--kleur-fout); color: var(--kleur-fout); }

/* Keuzelijst met een zoekveld erboven (app.js bouwt dit) */

.zoekkeuze { position: relative; }

/* Suggestielijst bij het zoeken */

.veld--breed { position: relative; }

.suggesties {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background: var(--kleur-vlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rond);
    box-shadow: 0 6px 20px rgba(31, 35, 40, .12);
    max-height: 20rem;
    overflow-y: auto;
}

.suggesties__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .45rem .6rem;
    border-radius: var(--rond);
    cursor: pointer;
}

.suggesties__item:hover,
.suggesties__item.is-actief { background: var(--kleur-achtergrond); }

.suggesties__label { font-weight: 500; }

.zoekkeuze .suggesties__item { display: block; }
.suggesties__bij { color: var(--kleur-zacht); font-size: .85rem; white-space: nowrap; }

/* Naam links, adres rechts. Past het adres niet, dan mag het afgekapt worden;
   de naam blijft altijd heel. */
.suggesties__label { flex: 0 1 auto; }
.suggesties__bij { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Op een telefoon is er geen ruimte naast elkaar; dan komt het adres eronder. */
@media (max-width: 640px) {
    .suggesties__item { flex-direction: column; align-items: flex-start; gap: .1rem; }
    .suggesties__bij { white-space: normal; }
}

/* Gebruikersbeheer: het bewerkformulier klapt open via de ankerlink. */

.rij--formulier { display: none; }
.rij--formulier:target,
.rij--formulier.is-open { display: table-row; }

.rij--formulier > td { background: var(--kleur-achtergrond); }

.rij--formulier .velden {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.rij--formulier .veld { margin-bottom: 0; }

.rij--uit td { color: var(--kleur-zacht); }

.zacht { color: var(--kleur-zacht); }

/* ==========================================================================
   Tablet en telefoon

   De juwelier staat met een tablet aan de toonbank en pakt er soms zijn
   telefoon bij. Alles moet dus mee kunnen krimpen: het menu klapt in, velden
   gaan onder elkaar, en tabellen schuiven horizontaal in plaats van de pagina
   scheef te trekken.
   ========================================================================== */

/* Een tabel die niet past schuift binnen zijn eigen omhulsel. app.js zet dat
   omhulsel om elke tabel heen; zonder JavaScript valt de tabel gewoon terug op
   het oude gedrag. */
.tabelomhulsel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Het menu: op een breed scherm staat alles gewoon in de kop (display:
   contents laat nav en gebruiker directe flexkinderen blijven), op een smal
   scherm klapt het paneel open onder de hamburger. */
.kop__hamburger { display: none; }
.kop__paneel { display: contents; }

@media (max-width: 900px) {
    .inhoud { padding: 1rem; }

    .kop { flex-wrap: wrap; gap: .75rem; padding: 0 1rem; }
    .kop__merk { flex: 1; padding: .85rem 0; }

    .kop__hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--kleur-rand);
        border-radius: var(--rond);
        cursor: pointer;
    }

    .kop__streepjes { position: relative; }

    .kop__streepjes,
    .kop__streepjes::before,
    .kop__streepjes::after {
        display: block;
        width: 1.1rem;
        height: 2px;
        background: var(--kleur-tekst);
        content: '';
    }

    .kop__streepjes::before { position: absolute; top: -6px; }
    .kop__streepjes::after  { position: absolute; top: 6px; }

    .kop__schakelaar:focus-visible + .kop__hamburger { outline: 2px solid var(--kleur-primair); }

    .kop__paneel { display: none; width: 100%; padding-bottom: .75rem; }
    .kop__schakelaar:checked ~ .kop__paneel { display: block; }

    .kop__nav { flex-direction: column; gap: 0; }

    .kop__link {
        padding: .75rem .5rem;
        border-bottom: 1px solid var(--kleur-rand);
        border-left: 3px solid transparent;
    }

    .kop__link.is-actief { border-left-color: var(--kleur-primair); border-bottom-color: var(--kleur-rand); }

    .kop__gebruiker { justify-content: space-between; padding-top: .75rem; }

    .subnav { overflow-x: auto; }
    .subnav__link { white-space: nowrap; }
}

@media (max-width: 640px) {
    .inhoud { padding: .75rem; }

    .kaart, .formulier, .zoekbalk { padding: 1rem; }

    /* Op deze breedte past er maar één veld naast elkaar. */
    .veld, .veld--breed, .veld--smal { flex: 1 1 100%; }
    .veld--vink { flex: 1 1 100%; }
    .veldgroep { gap: .35rem; }

    /* 16px voorkomt dat iOS inzoomt zodra je een veld aantikt. */
    input, select, textarea, .knop, button { font-size: 16px; }
    .knop { padding: .6rem 1rem; }

    .paginakop { flex-direction: column; align-items: stretch; }
    .paginakop__acties .knop { flex: 1 1 auto; text-align: center; }

    .zoekbalk .knop { flex: 1 1 auto; }

    .tabel { font-size: .9rem; }
    .tabel th, .tabel td { padding: .5rem .4rem; }

    .kengetal { flex: 1 1 100%; }

    /* Vijf kengetallen onder elkaar vullen op een telefoon het hele scherm, en
       dan staat de lijst waarvoor je de pagina opent onder de vouw. Op een
       lijstpagina zakken ze daarom naar beneden; op een pagina waar de
       kengetallen zelf het onderwerp zijn (het overzicht, het verslag na een
       import) blijven ze staan waar ze staan.

       :has() begrenst dit tot pagina's die er een hebben. Kent de browser het
       niet, dan vervalt de hele regel en staat alles gewoon in de volgorde van
       de pagina — geen kapot scherm, alleen wat meer scrollen. */
    .inhoud:has(.kengetallen--achteraan) { display: flex; flex-direction: column; }
    .kengetallen--achteraan { order: 1; margin: 1.25rem 0 0; }

    .paginering { justify-content: center; }
}