/* Hola Impact HQ — één stijlbestand, geen framework.
   Merkkleuren: warm oranje #FFA500, gold #D18A00, aqua #4FD3D7, ink #111621. */

:root {
  --papier: #fbfaf6;
  --wit: #ffffff;
  --lijn: #e7e2d8;
  --ink: #111621;
  --grijs: #4a525a;
  --licht: #8b939b;
  --warm: #ffa500;
  --gold: #d18a00;
  --aqua: #4fd3d7;
  --aqua-diep: #23a8ad;
  --goed: #0f9d58;
  --slecht: #d93025;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* dvh in plaats van vh: op iPhone telt vh de adresbalk mee die er soms niet is,
   waardoor het inlogscherm net buiten beeld begint. */
body.midden { display: flex; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; padding: 20px; }

h1 { font-size: 22px; margin: 4px 0 18px; letter-spacing: -0.02em; }
h2 { font-size: 30px; margin: 0; letter-spacing: -0.02em; }

.merk { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }

.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 22px; }
.kaart.smal { width: 100%; max-width: 340px; }

label { display: block; font-size: 12px; font-weight: 700; color: var(--licht); margin: 12px 0 5px; }

input, select, textarea {
  /* 16px is geen smaakkeuze: onder die grens zoomt iOS het hele scherm in zodra
     je in een veld tikt, en dan sta je scheef op je notitieveld tijdens een
     gesprek. Erft daarom niet van body (15px). */
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--papier); border: 1px solid var(--lijn); border-radius: 10px;
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--warm); }
textarea { resize: vertical; }

.knop {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--wit); color: var(--grijs);
  border: 1px solid var(--lijn); border-radius: 999px;
  padding: 9px 18px;
  /* Geen dubbeltik-zoom en geen blauwe vlek bij het aantikken. */
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.knop:hover { background: #f6f4ef; }
.knop.hoofd { background: var(--warm); color: var(--ink); border-color: var(--warm); }
.knop.hoofd:hover { background: var(--gold); color: var(--wit); }
.knop.breed { width: 100%; margin-top: 16px; padding: 12px; }
.knop.kaal { border: 0; background: none; color: var(--licht); padding: 8px 10px; }
.knop.kaal:hover { color: var(--ink); background: none; }
.knop[disabled] { opacity: 0.5; cursor: default; }

.fout { color: var(--slecht); font-weight: 600; font-size: 14px; }
.gelukt { color: var(--goed); font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------------------ hoofdscherm */

.omhulsel { max-width: 1180px; margin: 0 auto; padding: 26px 22px 60px; }

.bovenbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.bovenbalk .rechts { text-align: right; font-size: 13px; }
.bovenbalk .rechts strong { font-variant-numeric: tabular-nums; }
.bovenbalk .rechts span { color: var(--licht); }

nav.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
nav.tabs .knop.actief { background: var(--warm); color: var(--ink); border-color: var(--warm); }
nav.tabs .aantal { margin-left: 7px; opacity: 0.6; font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.filters .knop { padding: 6px 15px; font-size: 14px; }
.filters .knop.actief { background: var(--warm); color: var(--ink); border-color: var(--warm); }

.kop { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--licht); margin: 0 0 9px; }

.leeg { border: 1px dashed var(--lijn); border-radius: var(--radius); background: var(--wit); padding: 22px; text-align: center; color: var(--licht); }

/* ------------------------------------------------------------------ bellen */

.bel-indeling { display: grid; gap: 22px; grid-template-columns: 300px 1fr; align-items: start; }
@media (max-width: 900px) { .bel-indeling { grid-template-columns: 1fr; } }

.bellijst { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
.bellijst header { display: flex; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--lijn); }
.bellijst header span:last-child { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; color: var(--licht); }
.bellijst ol { list-style: none; margin: 0; padding: 0; max-height: 68vh; overflow-y: auto; }
.bellijst button {
  display: flex; gap: 11px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--lijn); padding: 11px 15px;
}
.bellijst li:last-child button { border-bottom: 0; }
.bellijst button:hover { background: #faf9f5; }
.bellijst button.actief { background: #fff6e6; }
.bellijst .nr { width: 18px; flex: none; font-size: 12px; color: var(--licht); font-variant-numeric: tabular-nums; }
.bellijst .naam { display: block; font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bellijst .reden { display: block; font-size: 12px; color: var(--licht); }

.bedrijfskaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 24px; }
.bedrijfskaart .titelrij { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 0; }
.chip { border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 650; background: #f2efe8; color: var(--grijs); }
.chip.branche { background: rgba(79, 211, 215, 0.18); color: var(--aqua-diep); }

.belknop {
  display: inline-block; background: var(--warm); color: var(--ink); text-decoration: none;
  border-radius: 999px; padding: 13px 26px; font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.belknop:hover { background: var(--gold); color: var(--wit); }
.geen-nummer { display: inline-block; border: 1px solid #f3c0bb; background: #fdf1f0; color: var(--slecht); border-radius: 999px; padding: 13px 22px; font-weight: 700; font-size: 14px; }
.knoprij { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }

.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lijn); }
@media (max-width: 700px) { .meta { grid-template-columns: 1fr; } }
.meta div { display: flex; justify-content: space-between; gap: 12px; }
.meta dt { color: var(--licht); font-size: 14px; }
.meta dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.haakje { margin: 18px 0 0; background: var(--papier); border-radius: 11px; padding: 14px 16px; font-size: 14px; color: var(--grijs); }

.uitkomsten { display: flex; flex-wrap: wrap; gap: 8px; }
.uitkomsten .knop { padding: 8px 15px; font-size: 14px; }
.uitkomsten .knop .nr { color: var(--licht); font-size: 12px; margin-right: 6px; }
.uitkomsten .knop.goed { border-color: #b7e4c7; background: #f2fbf5; color: #1b7a45; }
.uitkomsten .knop.slecht { border-color: #f3c0bb; background: #fdf1f0; color: #a8281c; }
.uitkomsten .knop.gekozen { border-color: var(--warm); background: #fff6e6; color: var(--gold); box-shadow: inset 0 0 0 1px var(--warm); }

.logrij { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 15px; }
.logrij .duw { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.logrij input[type="date"] { width: auto; }
.vast { background: #fff6e6; color: var(--gold); border-radius: 10px; padding: 10px 14px; font-weight: 650; font-size: 14px; }
.checkrij { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--grijs); }
.checkrij input { width: auto; }

.sneltoetsen { margin: 14px 0 0; font-size: 12px; color: var(--licht); line-height: 1.9; }
kbd { border: 1px solid var(--lijn); background: var(--papier); border-radius: 6px; padding: 2px 7px; font-family: ui-monospace, monospace; font-size: 11px; }

/* ------------------------------------------------------------------ lijsten */

.rijen { display: grid; gap: 8px; }
.rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: 11px; padding: 12px 15px; }
.rij .groei { flex: 1; min-width: 0; }
.rij .naam { font-weight: 650; font-size: 14px; }
.rij .naam a { color: inherit; text-decoration: none; }
.rij .naam a:hover { color: var(--gold); }
.rij .onder { font-size: 12px; color: var(--licht); }
.rij .tel { border: 1px solid var(--lijn); border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 650; text-decoration: none; color: var(--grijs); font-variant-numeric: tabular-nums; }

.blok { margin-bottom: 30px; }
.smalkolom { max-width: 780px; }

table.score { width: 100%; border-collapse: collapse; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; }
table.score th, table.score td { padding: 11px 15px; border-bottom: 1px solid var(--lijn); text-align: left; }
table.score th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--licht); font-weight: 800; }
table.score td.getal, table.score th.getal { text-align: right; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 750; width: 84px; }
table.score tr:last-child td { border-bottom: 0; }
td.wint-tijs { color: var(--gold); }
td.wint-bo { color: var(--aqua-diep); }
td.gelijk { color: var(--licht); }

.melding { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--ink); color: var(--wit); padding: 12px 22px; border-radius: 999px; font-weight: 650; font-size: 14px; z-index: 50; box-shadow: 0 10px 30px rgba(17, 22, 33, 0.22); }
.melding.slecht { background: var(--slecht); }

footer.voet { margin-top: 40px; text-align: center; font-size: 12px; color: var(--licht); }
footer.voet a { color: inherit; }

/* ------------------------------------------------------------------ dossier */

.dosindeling { display: grid; gap: 22px; grid-template-columns: 1fr 380px; align-items: start; }
@media (max-width: 900px) { .dosindeling { grid-template-columns: 1fr; } }

.dosregel { display: flex; gap: 16px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; }
.dosregel:last-child { border-bottom: 0; }
.dosregel span:first-child { color: var(--licht); flex: none; }
.dosregel span:last-child { text-align: right; overflow-wrap: anywhere; }
.dosregel a { color: var(--gold); }

.gesprek { border-left: 3px solid var(--warm); padding: 2px 0 2px 14px; margin-bottom: 18px; }
.gesprek:last-child { margin-bottom: 0; }
.gesprekkop { font-size: 12px; color: var(--licht); }
.gesprekkop .uit { color: var(--gold); font-weight: 700; }
.gesprektekst { margin: 5px 0 0; font-size: 14px; line-height: 1.65; }
.gesprektekst.leegtekst { color: var(--licht); font-style: italic; }

.notikop { margin: 16px 0 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--licht); }
.notikop:first-child { margin-top: 0; }
.notiregel { margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: var(--grijs); }

.tabelrol { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Het afvinkhokje van een taak. Stond eerst als losse stijl in de HTML met
   padding 0, en werd daardoor 26 bij 26 pixels -- net te klein om met een duim
   te raken, en juist dit knopje is er om snel aan te tikken. */
.vink { font-size: 17px; line-height: 1; min-width: 44px; min-height: 44px; padding: 0; }

/* Invulregels (taak toevoegen, kosten noteren). Een datumveld en een knop hebben
   een eigen minimumbreedte die niet meegeeft; het tekstveld ernaast krimpt dan
   als enige, tot er een hokje van zestig pixels overblijft waar je niks in ziet.
   Daarom een ondergrens: past het niet, dan wordt het een nieuwe regel. */
.formrij { gap: 9px; }
.formrij .groei { min-width: 180px; }
.formrij input[type="date"], .formrij select { width: auto; }
.formrij .bedrag { width: 110px; }

/* Datum, begintijd, eindtijd, voor wie. Vier gelijke kolommen, maar minmax(0,1fr)
   in plaats van 1fr: anders duwen de eigen minimumbreedtes van de tijdvelden het
   raster breder dan het scherm en loopt de helft ernaast. */
.tijdrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.tijdrij > * { min-width: 0; }

/* ------------------------------------------------------------------ aanraken */

/* Op een aanraakscherm blijft :hover plakken na een tik: je tikt een knop aan,
   en die blijft daarna oplichten alsof je muis erboven hangt. Op de bellijst
   zag het er dan uit alsof er twee bedrijven geselecteerd waren. */
@media (hover: none) {
  .knop:hover { background: var(--wit); }
  .knop.hoofd:hover { background: var(--warm); color: var(--ink); }
  .knop.kaal:hover { color: var(--licht); }
  .belknop:hover { background: var(--warm); color: var(--ink); }
  .bellijst button:hover { background: none; }
  .bellijst button.actief:hover { background: #fff6e6; }
  .rij .naam a:hover { color: inherit; }
}

/* ------------------------------------------------------------------ telefoon */

/* Dit scherm wordt staand in één hand gebruikt, vaak terwijl de telefoon aan
   het bellen is. Daar gingen drie dingen mis: knoppen kleiner dan een vingertop,
   en een bellijst die het halve scherm pakte vóór je het bedrijf zag. */

@media (max-width: 720px) {
  .omhulsel { padding: 16px 14px calc(30px + env(safe-area-inset-bottom)); }
  h2 { font-size: 24px; }

  /* Het bedrijf waar je nú mee bezig bent staat bovenaan. Op een telefoon is de
     kaart het werkblad; de lijst is waar je uit kiest en die mag eronder. */
  .bel-indeling { gap: 16px; }
  .bel-indeling > div { order: 1; }
  .bel-indeling > .bellijst { order: 2; }
  .bellijst ol { max-height: 60vh; -webkit-overflow-scrolling: touch; }
  .bellijst button { padding: 14px 15px; }

  .bedrijfskaart { padding: 18px 16px; }

  /* Bellen is de hoofdhandeling: volledige breedte, niet te missen. */
  .knoprij { gap: 10px; }
  .belknop, .geen-nummer { display: block; width: 100%; text-align: center; padding: 16px 20px; }
  .knoprij .knop { width: 100%; text-align: center; }

  /* 44px is de maat van een vingertop. Een ondergrens in plaats van per knop aan
     de padding draaien: dan haalt ook een knop met korte tekst het altijd. */
  .knop { padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .knop.kaal { padding: 12px 14px; }
  .filters .knop, .uitkomsten .knop { padding: 12px 16px; font-size: 15px; }
  nav.tabs .knop { padding: 12px 17px; }

  /* Tabs schuiven op één regel in plaats van over drie regels te vallen. */
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 14px; padding: 0 14px 2px; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs .knop { flex: none; }

  /* Een website paste niet op één regel en werd dus "..." — nu breekt hij af. */
  .meta { gap: 10px; margin-top: 16px; padding-top: 14px; }
  .meta dd { white-space: normal; overflow-wrap: anywhere; }

  .logrij { gap: 10px; }
  .logrij .duw { margin-left: 0; width: 100%; gap: 10px; }
  .logrij .duw .knop { flex: 1; }
  .logrij input[type="date"] { width: 100%; }

  /* Sneltoetsen hebben geen betekenis zonder toetsenbord. */
  .sneltoetsen { display: none; }

  .dosregel { flex-direction: column; gap: 2px; }
  .dosregel span:last-child { text-align: left; }

  .rij { padding: 14px 15px; }
  /* Het nummer in de opvolglijst is een belknop, geen label: die moet je met een
     duim kunnen raken zonder op de rij ernaast te drukken. */
  .rij .tel { padding: 10px 16px; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }

  /* Op een telefoon past er niets naast elkaar: alles onder elkaar, volle breedte. */
  .formrij { flex-direction: column; align-items: stretch; }
  .formrij .groei, .formrij .bedrag, .formrij input[type="date"], .formrij select, .formrij .knop { width: 100%; min-width: 0; }

  /* Datum en tijd naast elkaar, de rest eronder -- vier op een rij wordt onleesbaar. */
  .tijdrij { grid-template-columns: 1fr 1fr; }

  table.score th, table.score td { padding: 12px; }

  /* Volle breedte, en boven de thuisbalk van de iPhone. */
  .melding { left: 14px; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; text-align: center; }
}