/* TIVO Regie — Analytics-styling (eigen map: analytics/, geserveerd als
   /analytics.css). Zelfde designsysteem als app.css: vlak, hairlines,
   koper gedoseerd, geen schaduwen. Alle klassen hebben het an-voorvoegsel. */

/* ------------------------------------------------------------- filterbalk */
.an-balk { margin-bottom: 8px; }
.an-filters { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.an-veld { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--mist); display: flex; flex-direction: column; gap: 6px; }
.an-veld select {
  font: inherit; text-transform: none; letter-spacing: normal; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 8px 12px; background: var(--surface); min-width: 150px;
}
.an-btw { display: inline-flex; border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden; }
.an-toggle { background: var(--surface); color: var(--mist);
  border: none; padding: 8px 16px; font-weight: 500; }
.an-toggle + .an-toggle { border-left: 1px solid var(--line); }
.an-toggle.actief { background: var(--ink); color: #fff; }
.an-noot { font-size: 13px; color: var(--mist); margin-top: 12px; }

/* ------------------------------------------------------------- blokken */
.an-blok { margin-top: 44px; }
.an-blok h2 { font-size: 20px; font-weight: 700; margin: 6px 0 16px; }
.an-tegels { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.an-tegels.klein { margin-top: 4px; }
.an-tegel { position: relative; background: var(--surface); padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-md); }
.an-tegel-label { font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--mist); }
.an-tegel-groot { font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 26px; color: var(--ink); line-height: 1.25; margin-top: 8px; }
.an-tegels.klein .an-tegel-groot { font-size: 22px; }
.an-tegel-sub { font-size: 13px; color: var(--mist); margin-top: 4px; }
.an-tegel.accent, .an-tegel.win { border-top: 2px solid var(--copper); }
.an-tegel.verlies { border-top: 2px solid var(--ink); }
.an-tegel.open { border-top: 2px solid #8FA8C4; }
.an-tegel.accent .an-tegel-groot { color: var(--copper); }
.an-mist { color: var(--mist); font-weight: 400; }

/* ------------------------------------------------------------- maand-tabel */
.an-tabelwrap { overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius-lg); }
.an-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.an-tabel th { text-align: left; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--mist);
  padding: 12px 16px; background: var(--surface-warm);
  border-bottom: 1px solid var(--line); }
.an-tabel td { padding: 12px 16px; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); }
.an-tabel tr:last-child td { border-bottom: none; }
.an-tabel .an-num { text-align: right; font-family: 'Manrope', sans-serif;
  font-weight: 600; color: var(--ink); white-space: nowrap; }
.an-tabel td:first-child { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------- klussen */
.an-klussen { display: grid; gap: 16px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.an-klus { border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.an-klus-kop { display: flex; align-items: flex-start; gap: 12px; }
.an-klus-naam { font-weight: 600; color: var(--ink); }
.an-klus-project { font-size: 13px; color: var(--mist); }
.an-klus-bedrag { margin-left: auto; font-family: 'Manrope', sans-serif;
  font-weight: 700; color: var(--ink); white-space: nowrap; }

.an-klus-geld { display: flex; flex-direction: column; gap: 6px; }
.an-geldrij { display: flex; justify-content: space-between; font-size: 13px;
  color: var(--mist); }
.an-geldrij strong { font-family: 'Manrope', sans-serif; color: var(--ink); }
.an-balk-track { height: 10px; background: var(--surface-warm);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.an-balk-fill { height: 100%; border-radius: var(--radius) 0 0 var(--radius);
  transition: width .3s var(--ease); }
.an-waarschuwing { font-size: 13px; color: var(--copper); }
.an-klus-geen-bedrag { font-size: 13px; }

/* termijnen */
.an-termijnen { border-top: 1px solid var(--line); padding-top: 12px; }
.an-termijn-kop { font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--mist); margin-bottom: 8px; }
.an-termijnen ul { list-style: none; }
.an-termijn { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  font-size: 14px; color: var(--ink-soft); }
.an-termijn + .an-termijn { border-top: 1px solid var(--line); }
.an-termijn-oms { flex: 1; }
.an-termijn strong { font-family: 'Manrope', sans-serif; color: var(--ink);
  white-space: nowrap; }
.an-termijn.betaald .an-termijn-oms { color: var(--mist); }
.an-termijn-status { font-size: 12px; color: var(--groen); white-space: nowrap; }
.an-termijn-status.open { color: var(--mist); }
/* Betaaldatum bij de knop: een betaling wordt zelden op de dag zelf afgevinkt.
   Klein en zonder eigen kader, want in negen van de tien gevallen is 'vandaag'
   goed en hoort het veld niet om aandacht te vragen. */
.an-termijn-datum { font-size: 12px; color: var(--mist); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; }
.an-termijn-datum input { border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 3px 6px; font: inherit;
  font-size: 12px; color: var(--ink-soft); }
.an-termijn-datum input:focus-visible { outline: 2px solid var(--copper);
  outline-offset: 0; border-color: var(--copper); }

/* Sluit de som op de projectsom? Stil als het klopt, koper als het niet klopt.
   Deze regel stond alleen op de Analytics-pagina, dus betrapte het CRM een
   schema dat er duizenden naast zat alleen als die tab openging. */
.an-termijn-sluit { font-size: 12.5px; color: var(--mist); margin-top: 8px; }
.an-termijn-sluit.let-op { color: var(--copper); font-weight: 500; }

/* Het gepubliceerde betaalschema als voorstel, dezelfde vorm als het
   planningsvoorstel op de tijdlijn: wat er in het document staat, en twee
   knoppen. */
.an-termijn-voorstel {
  border: 1px solid var(--copper); background: #FBF0E6; color: #7A4212;
  border-radius: var(--radius-md); padding: 12px 14px; margin-top: 12px;
  font-size: 13.5px;
}
.an-termijn-voorstel ul { list-style: none; margin: 8px 0 0; }
.an-termijn-voorstel li { display: flex; gap: 10px; padding: 3px 0; }
.an-termijn-voorstel li span { flex: 1; }
.an-termijn-voorstel .knoppen { display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin-top: 12px; }
.an-termijn-voorstel .an-mist { font-size: 12.5px; margin: 0; }

.an-invoer-hint { font-size: 12px; margin-top: 8px; }
.an-geen-termijnen { font-size: 13px; margin-bottom: 4px; }
.an-t-weg { background: none; border: none; color: var(--mist); font-size: 16px;
  line-height: 1; padding: 2px 4px; }
.an-t-weg:hover { color: var(--ink); }
.knop.klein { padding: 4px 10px; font-size: 12px; }
.an-termijn-vorm { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.an-termijn-vorm input { border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 7px 10px; font: inherit;
  color: var(--ink); }
.an-termijn-vorm input[name=oms] { flex: 2; min-width: 160px; }
.an-termijn-vorm input[name=bedrag] { flex: 1; min-width: 90px; }
.an-termijn-vorm input:focus-visible { outline: 2px solid var(--copper);
  outline-offset: 0; border-color: var(--copper); }

/* mijlpalen + voet */
.an-mijlpalen { display: flex; flex-wrap: wrap; gap: 6px; }
.an-mp { font-size: 12px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); }
.an-mp.ja { color: var(--groen); border-color: #BFE0CF; background: #EFF7F2; }
.an-mp.nee { color: var(--mist); background: var(--surface-warm); }
.an-klus-voet { display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 13px; color: var(--mist);
  border-top: 1px solid var(--line); padding-top: 10px; }
.an-stil { color: var(--copper); }

.an-leeg-klein { color: var(--mist); font-size: 14px; margin-top: 14px; }

/* ------------------------------------------------------------- klein scherm */
@media (max-width: 760px) {
  .an-klussen { grid-template-columns: 1fr; }
  .an-klus-kop { flex-wrap: wrap; }
  /* Een termijnregel heeft vijf delen waarvan drie niet mogen breken; op een
     projectkaart van ~295 pixels liep dat door de overflow:hidden van de kaart
     uit beeld en waren Markeer betaald en de × onbereikbaar. Wrappen dus, en
     de knoppen op aanraakmaat. */
  .an-termijn { flex-wrap: wrap; }
  .knop.klein { min-height: 44px; }
  .an-t-weg { min-height: 44px; min-width: 44px; }
  /* Zelfde iOS-zoomgrens als in app.css. */
  .an-veld select, .an-termijn-datum input, .an-termijn-vorm input { font-size: 16px; }
}