/* ============================================================
   Marktverkoop — style.css  (mobile first, snel afrekenen)
   Huisstijl ontleend aan style_bakgezond_site.css:
   donker leisteen + warme crème/tan + goudbruin accent,
   serif-koppen (Source Serif Pro) en dunne hairline-lijntjes.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --donker:      #242E35;   /* hoofdkleur: koppen, knoppen, tekst */
    --donker2:     #36424A;   /* iets lichter (hover) */
    --creme:       #F7EEE3;   /* lichte achtergrond */
    --tan:         #EFDDC7;   /* warm accent */
    --goud:        #C18500;   /* goudbruin accent / lijntjes */
    --groen:       #3a9d5d;   /* beschikbaar / plus (subtiel) */
    --groen-dark:  #2f8049;
    --rood:        #d9534f;   /* min / fout (subtiel) */
    --rood-dark:   #b94843;
    --grijs:       #9D9D9C;
    --lijn:        #bbbbbb5e; /* dunne hairline-rand */
    --lijn2:       #F3F3F3;   /* scheidingslijn in lijsten */
    --tekst:       #242E35;
}

body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--lijn2);
    color: var(--tekst);
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 80px;
}

h1, h2, h3 {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    color: var(--donker);
}

/* ── Scherm 1: markt kiezen ─────────────────────────────────── */
.markt-lijst   { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.leeg-melding  { color: var(--grijs); text-align: center; padding: 10px; }

.markt-knop {
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: var(--donker);
    background: #fff;
    border: 1px solid var(--lijn);
    border-left: 4px solid var(--goud);
    border-radius: 6px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background .2s ease;
}
.markt-knop:hover  { background: var(--creme); }
.markt-knop:active { border-color: var(--goud); }
.markt-knop .m-naam { font-size: 17px; font-weight: 700; font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif; }
.markt-knop .m-meta { font-size: 13px; color: var(--grijs); }

/* Omzet-balk van vandaag (boven de marktlijst) */
.dag-omzet { padding-bottom: 0; }

.nieuwe-markt, .nieuw-product {
    background: #fff;
    margin: 0 14px 14px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nieuwe-markt h2, .nieuw-product h2 { font-size: 16px; }
.nieuwe-markt input, .nieuw-product input {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    color: var(--donker);
    background: #fff;
}
.nieuwe-markt input:focus, .nieuw-product input:focus { outline: none; border-color: var(--goud); }
.nieuwe-markt button, .nieuw-product button {
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--donker);
    border: 1px solid var(--donker);
    border-radius: 6px;
    cursor: pointer;
    transition: background .25s ease;
}
.nieuwe-markt button:hover, .nieuw-product button:hover { background: var(--donker2); }

/* ── Sticky header (donker, met gouden accentlijn) ──────────── */
header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--donker);
    color: #fff;
    border-bottom: 3px solid var(--goud);
    padding: 12px 16px;
}

.kop-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kop-rij h1 { font-size: 20px; color: #fff; }

/* Logo in de donkere kop — wordmark is donker, dus wit maken */
.kop-logo {
    height: 30px;
    width: auto;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
}
#scherm-markt .kop-logo { margin-bottom: 8px; }

.bon-info { font-size: 13px; color: var(--tan); }
.bon-info b { color: #fff; font-size: 15px; }

.totaal-blok { text-align: right; }
.totaal-blok .label { font-size: 12px; color: var(--tan); text-transform: uppercase; letter-spacing: .04em; }
.totaal-blok #totaal { font-size: 26px; font-weight: 800; color: #fff; }

/* Terug-knop / kop-links in de donkere header */
#btn-terug {
    display: inline-block;
    background: none;
    border: none;
    color: var(--tan);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 0 0 4px;
    cursor: pointer;
}
#btn-terug:hover { color: #fff; }

.kop-links { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.kop-links a { color: var(--tan); text-decoration: none; font-size: 13px; font-weight: 600; }
.kop-links a:hover { color: #fff; }

/* ── Knoppen in de kop (nieuwe bon + openen) ────────────────── */
.kop-knoppen { display: flex; gap: 8px; align-items: center; }

#btn-nieuw, #btn-openen {
    flex: 0 0 auto;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    transition: all .2s ease;
}
#btn-nieuw {
    color: #fff;
    background: var(--groen);
    border: 1px solid var(--groen-dark);
}
#btn-nieuw:hover  { filter: brightness(0.96); }
#btn-nieuw:active { background: var(--groen-dark); color: #fff; }

/* Openen = terug naar het bonnenlijstje (zelfde stijl, iets lichter) */
#btn-openen {
    color: var(--donker);
    background: var(--creme);
    border: 1px solid var(--goud);
}
#btn-openen:hover  { filter: brightness(0.97); }
#btn-openen:active { background: var(--goud); color: #fff; }

/* ── Startmelding ───────────────────────────────────────────── */
#start-melding {
    text-align: center;
    color: var(--grijs);
    padding: 50px 24px;
    font-size: 16px;
}

/* ── Productenraster ────────────────────────────────────────── */
#producten {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px;
}

/* iPad (portret) en breder: 3 tegels naast elkaar */
@media (min-width: 600px) {
    #producten { grid-template-columns: repeat(3, 1fr); }
}
/* iPad landschap / groot scherm: 4 naast elkaar */
@media (min-width: 1000px) {
    #producten { grid-template-columns: repeat(4, 1fr); }
}

.tegel {
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tegel.actief { border-color: var(--goud); box-shadow: 0 0 0 2px rgba(193,133,0,.18); }

.tegel .naam  { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--donker); }
.tegel .prijs { font-size: 14px; color: var(--grijs); }

.tel-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.tel-rij button {
    width: 46px;
    height: 46px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: filter .2s ease;
}
.btn-min  { background: var(--rood);  border-color: var(--rood-dark); opacity: .2; }
.btn-plus { background: var(--groen); border-color: var(--groen-dark); }
/* Min pas vol-rood zodra het product in de bon zit */
.tegel.actief .btn-min { opacity: 1; }
.tel-rij button:active { filter: brightness(.88); }

.tel-rij .aantal {
    font-size: 22px;
    font-weight: 800;
    min-width: 28px;
    text-align: center;
    color: var(--donker);
}

/* ── Huidige bon (regels) ───────────────────────────────────── */
#bon-blok {
    background: #fff;
    margin: 0 14px 14px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 14px;
}
#bon-blok h2 { font-size: 16px; margin-bottom: 8px; }

#bon-regels { list-style: none; }
#bon-regels li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lijn2);
    font-size: 15px;
}
#bon-regels li:last-child { border-bottom: none; }
#bon-regels .leeg { color: var(--grijs); justify-content: center; }

.r-aantal { font-weight: 700; min-width: 34px; color: var(--goud); }
.r-naam   { flex: 1; }
.r-prijs  { color: var(--grijs); font-size: 13px; white-space: nowrap; }
.r-sub    { font-weight: 700; min-width: 64px; text-align: right; }

/* ── Betaling (contant / pin) ───────────────────────────────── */
#betaal-blok {
    background: #fff;
    margin: 0 14px 14px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 14px;
}
#betaal-blok h2 { font-size: 16px; margin-bottom: 8px; }

.betaal-knoppen { display: flex; gap: 10px; }
.betaal-knop {
    flex: 1;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--donker);
    background: #fff;
    border: 1px solid var(--goud);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
}
.betaal-knop:hover { background: var(--creme); }
.betaal-knop.actief {
    color: #fff;
    background: var(--groen);
    border-color: var(--groen-dark);
}

/* ── Bonnen van de markt (lijst) ────────────────────────────── */
#bonnen-blok {
    background: #fff;
    margin: 14px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 14px;
}
#bonnen-blok h2 { font-size: 16px; margin-bottom: 8px; }

#bonnen-lijst { list-style: none; }
#bonnen-lijst li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lijn2);
    font-size: 15px;
}
#bonnen-lijst li:last-child { border-bottom: none; }
#bonnen-lijst .leeg { color: var(--grijs); justify-content: center; }

.bon-rij { cursor: pointer; transition: background .15s ease; }
.bon-rij:hover  { background: var(--creme); }
.bon-rij:active { background: var(--lijn2); }
.b-nr     { font-weight: 700; min-width: 56px; color: var(--goud); }
.b-tijd   { color: var(--grijs); min-width: 46px; }
.b-aantal { flex: 1; color: var(--grijs); }
.b-totaal { font-weight: 700; color: var(--donker); }

/* ── Popup: bon bekijken ────────────────────────────────────── */
#popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(36,46,53,.55);
    z-index: 50;
}
#bon-popup {
    position: fixed;
    z-index: 51;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--lijn);
    border-top: 4px solid var(--goud);
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.popup-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.popup-kop h3 { font-size: 20px; }
#popup-sluit {
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    border: 1px solid var(--lijn);
    background: var(--creme);
    border-radius: 6px;
    cursor: pointer;
    color: var(--donker);
}
.popup-tijd { font-size: 13px; color: var(--grijs); margin-bottom: 8px; }

.popup-betaling {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}
.popup-betaling:empty   { display: none; }
.popup-betaling.contant { background: var(--groen);  color: #fff; }
.popup-betaling.pin     { background: var(--donker);  color: #fff; }
.popup-betaling.geen    { background: var(--lijn2); color: var(--grijs); }

#popup-regels { list-style: none; }
#popup-regels li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--lijn2);
    font-size: 15px;
}
#popup-regels li:last-child { border-bottom: none; }
#popup-regels .leeg { color: var(--grijs); justify-content: center; }

.popup-totaal {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--donker);
    text-align: right;
    font-size: 18px;
    font-weight: 800;
    color: var(--donker);
}

/* Acties onder in de popup (wijzigen / verwijderen) */
.popup-acties { display: flex; gap: 8px; margin-top: 14px; }
#popup-wijzig, #popup-verwijder {
    flex: 1;
    padding: 13px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: 1px solid;
    border-radius: 6px;
    cursor: pointer;
}
#popup-wijzig {
    color: var(--donker);
    background: var(--tan);
    border-color: var(--goud);
}
#popup-wijzig:hover  { filter: brightness(0.96); }
#popup-wijzig:active { background: var(--goud); color: #fff; }

#popup-verwijder {
    color: #fff;
    background: var(--rood);
    border-color: var(--rood-dark);
}
#popup-verwijder:hover  { filter: brightness(0.96); }
#popup-verwijder:active { background: var(--rood-dark); }

/* ── Loginscherm ────────────────────────────────────────────── */
.login-box {
    max-width: 360px;
    margin: 80px auto 0;
    background: #fff;
    border: 1px solid var(--lijn);
    border-top: 4px solid var(--goud);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}
.login-box h1 { font-size: 24px; margin-bottom: 16px; }
.login-box input {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    margin-bottom: 10px;
}
.login-box input:focus { outline: none; border-color: var(--goud); }
.login-box button {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--donker);
    border: 1px solid var(--donker);
    border-radius: 6px;
    cursor: pointer;
    transition: background .25s ease;
}
.login-box button:hover { background: var(--donker2); }
.login-fout { color: var(--rood); margin-bottom: 10px; font-weight: 600; }

/* ── Productbeheer (beheer.php) ─────────────────────────────── */
.prod-blok {
    background: #fff;
    margin: 0 14px 14px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 14px;
}
.prod-blok h2 { font-size: 16px; margin-bottom: 8px; }

.prod-rij {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lijn2);
}
.prod-rij:last-child { border-bottom: none; }
.prod-rij .p-naam {
    flex: 1;
    min-width: 0;
    padding: 10px;
    font-size: 15px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    color: var(--donker);
}
.prod-rij .p-prijs {
    width: 80px;
    padding: 10px;
    font-size: 15px;
    text-align: right;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    color: var(--donker);
}
.prod-rij .p-naam:focus, .prod-rij .p-prijs:focus { outline: none; border-color: var(--goud); }
.prod-rij .p-opslaan {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--donker);
    border: 1px solid var(--donker);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.prod-rij .p-opslaan.ok { background: var(--groen); border-color: var(--groen-dark); }

/* ── Admin / overzicht (admin.php) ──────────────────────────── */
.admin-totalen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
}
.tot-kaart {
    flex: 1 1 140px;
    background: #fff;
    border: 1px solid var(--lijn);
    border-top: 4px solid var(--goud);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.tot-kaart .label { font-size: 13px; color: var(--grijs); text-transform: uppercase; letter-spacing: .04em; }
.tot-kaart .bedrag { font-size: 26px; font-weight: 800; color: var(--donker); margin-top: 4px; }
.tot-kaart .sub { font-size: 12px; color: var(--grijs); margin-top: 2px; }
.tot-kaart.contant { border-top-color: var(--groen); }
.tot-kaart.pin     { border-top-color: var(--donker); }

.ov-markt {
    background: #fff;
    margin: 0 14px 14px;
    border: 1px solid var(--lijn);
    border-radius: 6px;
    padding: 16px;
}
.ov-markt h2 { font-size: 17px; }
.ov-markt .ov-meta { font-size: 13px; color: var(--grijs); margin-bottom: 10px; }

.ov-tabel { width: 100%; border-collapse: collapse; }
.ov-tabel td {
    padding: 9px 0;
    border-bottom: 1px solid var(--lijn2);
    font-size: 15px;
}
.ov-tabel tr:last-child td { border-bottom: none; }
.ov-tabel .ov-w   { color: var(--donker); }
.ov-tabel .ov-n   { color: var(--grijs); text-align: right; padding-right: 14px; white-space: nowrap; }
.ov-tabel .ov-b   { text-align: right; font-weight: 700; white-space: nowrap; }
.ov-tabel .ov-tot td { border-top: 2px solid var(--donker); font-weight: 800; padding-top: 11px; }

.leeg-melding { color: var(--grijs); text-align: center; padding: 20px; }