/* Arboregia CRM — vormgeving.
   Palet en lettertypen komen uit het merkboek, precies zoals de website en de offertepagina.
   Geen enkele kleur daarbuiten; wat hier "lijn" of "vlak" heet is altijd een tint van een merkkleur. */

@font-face{
  font-family:'AcciaPiano';
  src:url('fonts/acciapiano-light.otf') format('opentype');
  font-weight:200 400;      /* buiten dit bereik maakt de browser er zelf vet van — niet doen */
  font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('fonts/plusjakartasans-latin.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap;
}

:root{
  --oxide:#4E1E14;
  --umber:#20130D;
  --clay:#B6906B;
  --zand:#F1E1C8;
  --mist:#EBE9DD;

  --vlak:#F6F4EC;          /* rustige werkvloer, een tint boven mist */
  --kaart:#FFFFFF;
  --tekst:var(--umber);
  --tekst-zacht:#6B5443;
  --lijn:rgba(182,144,107,.42);
  --lijn-zacht:rgba(182,144,107,.22);
  --accent:var(--oxide);
  --op-accent:var(--zand);

  /* Betekeniskleuren staan LOS van het accent: een waarschuwing mag niet als merk lezen.
     Ze zijn wel naar het palet toe getrokken zodat ze er niet uit springen. */
  --goed:#3E6B44;
  --let-op:#8A5A12;
  --stop:#8C2F1E;

  --r:10px;
  --schaduw:0 1px 2px rgba(32,19,13,.06), 0 8px 24px rgba(32,19,13,.06);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --vlak:#1A100B;
    --kaart:#241610;
    --tekst:#F3EADC;
    --tekst-zacht:#C3AC93;
    --lijn:rgba(182,144,107,.34);
    --lijn-zacht:rgba(182,144,107,.16);
    --accent:var(--clay);
    --op-accent:var(--umber);
    --goed:#7FAE83;
    --let-op:#D7A24A;
    --stop:#D9705C;
    --schaduw:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --vlak:#1A100B;
  --kaart:#241610;
  --tekst:#F3EADC;
  --tekst-zacht:#C3AC93;
  --lijn:rgba(182,144,107,.34);
  --lijn-zacht:rgba(182,144,107,.16);
  --accent:var(--clay);
  --op-accent:var(--umber);
  --goed:#7FAE83;
  --let-op:#D7A24A;
  --stop:#D9705C;
  --schaduw:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
/* MOET boven alles staan: een eigen `display` (hieronder krijgt .inlog er een) wint van de
   ingebouwde regel achter het `hidden`-attribuut, en dan blijft een verborgen scherm gewoon staan.
   Dat gebeurde hier ook echt: het inlogscherm bleef over de klantenlijst heen liggen. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--vlak);
  color:var(--tekst);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'AcciaPiano','Lora',Georgia,serif;font-weight:300;margin:0;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- merk ---------- */
.merk{display:flex;align-items:baseline;gap:.5rem}
.merk span{
  font-family:'AcciaPiano','Lora',Georgia,serif;font-weight:300;
  font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
}
.merk em{font-style:normal;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-zacht)}
.merk-groot span{font-size:1.6rem}

/* ---------- inloggen ---------- */
.inlog{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.inlog-kaart{
  width:min(380px,100%);background:var(--kaart);border:1px solid var(--lijn-zacht);
  border-radius:var(--r);box-shadow:var(--schaduw);padding:1.75rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.inlog-uitleg{margin:.15rem 0 1rem;color:var(--tekst-zacht);font-size:.9rem}
label{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-zacht);margin-top:.6rem}
input[type=email],input[type=password],input[type=text],input[type=search],input[type=date],input[type=tel],select,textarea{
  font:inherit;color:inherit;background:var(--vlak);
  border:1px solid var(--lijn);border-radius:8px;padding:.5rem .6rem;width:100%;
}
textarea{resize:vertical;min-height:66px}
.melding{min-height:1.2em;font-size:.85rem;color:var(--stop);margin-top:.5rem}
.melding.ok{color:var(--goed)}

/* ---------- knoppen ---------- */
.knop{
  font:inherit;cursor:pointer;background:transparent;color:inherit;
  border:1px solid var(--lijn);border-radius:999px;padding:.4rem .9rem;
}
.knop:hover{border-color:var(--accent)}
.knop-vol{background:var(--accent);color:var(--op-accent);border-color:var(--accent);margin-top:1.1rem;padding:.55rem 1rem}
.knop-klein{padding:.25rem .65rem;font-size:.82rem}

/* ---------- balk ---------- */
.balk{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;background:var(--oxide);color:var(--zand);
  position:sticky;top:0;z-index:10;
}
.balk .merk em{color:rgba(241,225,200,.7)}
.tabs{display:flex;gap:.35rem}
.tab{
  font:inherit;cursor:pointer;background:transparent;color:rgba(241,225,200,.78);
  border:0;border-radius:999px;padding:.35rem .9rem;
}
.tab.actief{background:rgba(241,225,200,.16);color:var(--zand)}
.balk-rechts{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.balk .knop{border-color:rgba(241,225,200,.45);color:var(--zand)}
.wie{font-size:.82rem;color:rgba(241,225,200,.75)}

main{padding:1.1rem;max-width:1400px;margin:0 auto}
.werkbalk{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.9rem}
.werkbalk h2{font-size:1.25rem}
.werkbalk input[type=search]{max-width:340px}
.rek{flex:1}
.teller{font-size:.85rem;color:var(--tekst-zacht)}
.vink{display:flex;align-items:center;gap:.4rem;text-transform:none;letter-spacing:0;font-size:.85rem;margin:0}

/* ---------- lijst + kaart naast elkaar ---------- */
.split{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:1rem;align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} }

.lijst{display:flex;flex-direction:column;gap:.5rem}
.rij{
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--kaart);border:1px solid var(--lijn-zacht);border-left:3px solid transparent;
  border-radius:var(--r);padding:.65rem .8rem;display:grid;gap:.15rem;
}
.rij:hover{border-color:var(--lijn)}
.rij.actief{border-left-color:var(--accent);box-shadow:var(--schaduw)}
.rij b{font-weight:600}
.rij small{color:var(--tekst-zacht);font-size:.82rem}

.kaart-leeg{
  background:var(--kaart);border:1px dashed var(--lijn);border-radius:var(--r);
  padding:2.5rem 1rem;text-align:center;color:var(--tekst-zacht);
}
.kaart{background:var(--kaart);border:1px solid var(--lijn-zacht);border-radius:var(--r);box-shadow:var(--schaduw);overflow:hidden}
.kaart-kop{padding:1.1rem 1.2rem;border-bottom:1px solid var(--lijn-zacht);display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start}
.kaart-kop h2{font-size:1.5rem}
.kaart-kop .rek{min-width:0}
.gegevens{display:flex;flex-wrap:wrap;gap:.15rem 1.25rem;margin-top:.35rem;color:var(--tekst-zacht);font-size:.9rem}
.blok{padding:1.1rem 1.2rem;border-bottom:1px solid var(--lijn-zacht)}
.blok:last-child{border-bottom:0}
.blok h3{font-size:1.05rem;margin-bottom:.6rem}

/* chips: status en soort, kleur draagt betekenis */
.chip{
  display:inline-block;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.15rem .55rem;border-radius:999px;border:1px solid currentColor;white-space:nowrap;
}
.chip-nieuw{color:var(--accent)}
.chip-bezig{color:var(--let-op)}
.chip-gewonnen{color:var(--goed)}
.chip-verloren{color:var(--stop)}
.chip-stil{color:var(--tekst-zacht)}

/* tijdlijn */
.tijdlijn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.tijdlijn li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;padding:.5rem 0;border-top:1px solid var(--lijn-zacht)}
.tijdlijn li:first-child{border-top:0}
.tl-tijd{font-size:.78rem;color:var(--tekst-zacht);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:.15rem}
.tl-tekst{white-space:pre-wrap;overflow-wrap:anywhere}
.tl-wie{font-size:.78rem;color:var(--tekst-zacht)}
.tl-soort{font-size:.78rem;color:var(--accent);letter-spacing:.04em;text-transform:uppercase}

.tabel{width:100%;border-collapse:collapse;font-size:.9rem}
.tabel th{text-align:left;font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-zacht);padding:.35rem .5rem .35rem 0}
.tabel td{padding:.4rem .5rem .4rem 0;border-top:1px solid var(--lijn-zacht);vertical-align:top}
.tabel .geld{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabel-wrap{overflow-x:auto}

.form-rij{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.form-rij textarea{flex:1;min-width:220px}
.form-rij input[type=text]{flex:1;min-width:180px}
.taakregel{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem 0;border-top:1px solid var(--lijn-zacht)}
.taakregel:first-child{border-top:0}
.taakregel.klaar .taak-tekst{text-decoration:line-through;color:var(--tekst-zacht)}
.taak-datum{font-size:.8rem;color:var(--tekst-zacht);font-variant-numeric:tabular-nums;white-space:nowrap}
.taak-datum.rood{color:var(--stop);font-weight:600}
.leeg{color:var(--tekst-zacht);font-size:.9rem}

/* ---------- whatsapp ---------- */
.wa-gesprek{
  display:flex;flex-direction:column;gap:.4rem;max-height:340px;overflow-y:auto;
  padding:.6rem;background:var(--vlak);border:1px solid var(--lijn-zacht);border-radius:8px;
}
.wa-bericht{max-width:80%;padding:.45rem .65rem;border-radius:12px;border:1px solid var(--lijn-zacht)}
.wa-in {align-self:flex-start;background:var(--kaart);border-bottom-left-radius:3px}
.wa-uit{align-self:flex-end;background:var(--zand);color:var(--umber);border-bottom-right-radius:3px}
.wa-tekst{white-space:pre-wrap;overflow-wrap:anywhere}
.wa-voet{font-size:.72rem;color:var(--tekst-zacht);margin-top:.15rem}
.wa-uit .wa-voet{color:rgba(32,19,13,.6)}
.wa-uitleg{font-size:.85rem;margin-top:.6rem}
.wa-open{color:var(--goed)}
.wa-dicht{color:var(--tekst-zacht)}

/* ---------- venster ---------- */
dialog{
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--kaart);color:var(--tekst);
  box-shadow:var(--schaduw);padding:1.3rem;width:min(640px,94vw);
}
dialog::backdrop{background:rgba(32,19,13,.5)}
dialog h2{font-size:1.35rem;margin-bottom:.4rem}
.veldenraster{display:grid;grid-template-columns:1fr 1fr;gap:.15rem .9rem}
.veldenraster .breed{grid-column:1 / -1}
@media (max-width:560px){ .veldenraster{grid-template-columns:1fr} }
.venster-knoppen{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}
.venster-knoppen .knop-vol{margin-top:0}

@media (prefers-reduced-motion: no-preference){
  .rij,.knop{transition:border-color .12s ease, box-shadow .12s ease}
}