/* Esperto Control Center: huisstijl. Fris en licht, wit en koel grijs,
   oranje en blauw als accent, lettertype Inter. Geen donker thema.
   Eerst de telefoon, daarna breder. */

:root {
  --oranje: #f16529;
  --blauw: #3290ce;
  --blauw-donker: #256fa3;
  --achtergrond: #f4f6f9;
  --vlak: #ffffff;
  --rand: #e2e7ee;
  --tekst: #1d2733;
  --gedempt: #66727f;
  --groen: #2c9a66;
  --rood: #d1433f;
  --rood-zacht: #fdeeed;
  --grijs: #b4bdc8;
  --radius: 12px;
  --ruimte: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--blauw-donker); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--blauw);
  outline-offset: 2px;
}

h1, h2 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.375rem; font-weight: 700; }
h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedempt);
}
p { margin: 0; }

.gedempt { color: var(--gedempt); }
.klein { font-size: 0.875rem; }

/* --- Kop ---------------------------------------------------------------- */

.topbar {
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px var(--ruimte);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--tekst);
}
.logo { height: 20px; width: auto; display: block; flex-shrink: 0; }
.brand-name {
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid var(--rand);
}
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.uitloggen { font-size: 0.875rem; color: var(--gedempt); text-decoration: none; padding: 6px 0; }
.uitloggen:hover { color: var(--tekst); text-decoration: underline; }

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-demo { background: #fff1e9; color: #b3430f; }

/* De stip: een kleur per status. Grijs = nog niets aangesloten. */
.stip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stip-grijs { background: var(--grijs); }
.stip-groen { background: var(--groen); }
.stip-rood { background: var(--rood); }

/* --- Pagina en blokken ---------------------------------------------------- */

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--ruimte);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kop { padding: 4px 2px 2px; }

.card {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: var(--ruimte);
}

.blok { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.blok-accent { border-top: 3px solid var(--oranje); }

.rij { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }

.leeg { color: var(--gedempt); font-size: 0.9375rem; }

.melding { padding: 10px 12px; border-radius: 8px; font-size: 0.9375rem; }
.melding-rood { background: var(--rood-zacht); color: #8f2320; }

/* --- Domeintegels --------------------------------------------------------- */

.tegels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
}
.tegel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  min-width: 0;
}
.tegel-naam { font-weight: 500; }
.tegel-status { font-size: 0.8125rem; margin-left: auto; white-space: nowrap; }

/* --- Formulieren ---------------------------------------------------------- */

label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 4px; }

input[type='text'], input[type='password'] {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid #c9d1db;
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst);
}

.btn {
  font: inherit;
  font-weight: 600;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--blauw-donker);
  color: #ffffff;
  cursor: pointer;
}
.btn:hover { background: #1f5d8a; }

/* --- Inloggen ------------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte);
}
.login-box { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box .btn { margin-top: 6px; }
.login-logo { height: 28px; width: auto; align-self: flex-start; }

/* --- Breder dan een telefoon ----------------------------------------------- */

@media (min-width: 560px) {
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .rij-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tegel { flex-wrap: wrap; }
  .tegel-status { margin-left: 20px; flex-basis: 100%; }
  h1 { font-size: 1.5rem; }
}

/* --- Versheid en systeemstatus --------------------------------------------- */

.stip-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -8px; border-radius: 50%; }
.stip-link:hover { background: var(--achtergrond); }
.scheiding { margin: 0 2px; }

.melding-grijs { background: #eef1f5; color: #46525f; }
.melding a { color: inherit; font-weight: 500; white-space: nowrap; }
.tekst-rood { color: #a82c28; }

.blok-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blok-kop form { margin: 0; }

.btn-klein { padding: 8px 12px; font-size: 0.875rem; }
.btn-rustig { background: var(--vlak); color: var(--blauw-donker); border: 1px solid #c9d1db; }
.btn-rustig:hover { background: var(--achtergrond); }

.statuslijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.statusregel {
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.statusregel form { margin: 0; }
.statusregel-kop { display: flex; align-items: center; gap: 8px; }
.statusregel-naam { font-weight: 600; }
.statusregel-stand { margin-left: auto; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.stand-groen { color: #1f7a4f; }
.stand-rood { color: #a82c28; }
.stand-grijs { color: var(--gedempt); }

.feiten { margin: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); font-size: 0.9375rem; }
.feiten dt { font-size: 0.8125rem; color: var(--gedempt); }
.feiten dd { margin: 0; overflow-wrap: anywhere; }

@media (min-width: 760px) {
  .feiten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Hoofdmenu --------------------------------------------------------------- */

.tabs { border-top: 1px solid var(--rand); }
.tabs-inner { max-width: 1040px; margin: 0 auto; padding: 0 var(--ruimte); display: flex; gap: 4px; }
.tab {
  padding: 10px 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gedempt);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:first-child { margin-left: -12px; }
.tab:hover { color: var(--tekst); }
.tab.aan { color: var(--tekst); border-bottom-color: var(--oranje); }

/* --- Doelen ------------------------------------------------------------------ */

.kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kruimel { color: var(--gedempt); margin-bottom: -6px; padding: 0 2px; }
.h2-bij { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.nu { font-weight: 500; text-transform: none; letter-spacing: 0; color: #b3430f; margin-left: 4px; }
.groot { font-size: 1.125rem; font-weight: 600; }
a.btn { display: inline-block; text-decoration: none; text-align: center; }

.voortgang { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.9375rem; }
.voortgang-rood .voortgang-tekst { color: #a82c28; font-weight: 500; }
.voortgang-groen .voortgang-tekst { color: #1f7a4f; font-weight: 500; }
.voortgang-toelichting { font-weight: 400; }
.groot .voortgang { font-size: inherit; }

.balk { display: inline-block; width: 72px; height: 8px; border-radius: 999px; background: #e6ebf1; overflow: hidden; flex-shrink: 0; }
.balk-vulling { display: block; height: 100%; background: var(--blauw); border-radius: 999px; }
.voortgang-groen .balk-vulling { background: var(--groen); }
.voortgang-rood .balk-vulling { background: var(--rood); }
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; }
.w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; }
.w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; }
.w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; }
.w-100 { width: 100%; }

.doeltitel { font-weight: 600; color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.doeltitel:hover { text-decoration: underline; }
.domein { font-size: 0.8125rem; color: var(--gedempt); }

/* Blok op de startpagina */
.doelrijen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.doelrij { display: grid; gap: 4px 16px; grid-template-columns: minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--rand); font-size: 0.9375rem; }
.doelrij:first-child { border-top: 0; padding-top: 2px; }
.doelrij:last-child { padding-bottom: 0; }
.doelrij-hoofd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doelrij-maand, .doelrij-week { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.doelrij-label { color: var(--gedempt); font-size: 0.8125rem; min-width: 76px; padding-top: 1px; }
.maanddoel { color: var(--tekst); text-decoration: none; }
.maanddoel:hover { text-decoration: underline; }
.maanddoel-rood, .maanddoel-rood .gedempt { color: #a82c28; }
.maanddoel-groen { color: #1f7a4f; }

/* Boom op de pagina Doelen */
.doelboom { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doelboom .doelboom { margin: 8px 0 0 6px; padding-left: 12px; border-left: 2px solid var(--rand); }
.doelknoop { min-width: 0; }
.niveau-kwartaal { border: 1px solid var(--rand); border-radius: 8px; padding: 12px; }
.doelregel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.doelregel .voortgang { margin-left: auto; }
.niveau-maand > .doelregel .doeltitel, .niveau-week > .doelregel .doeltitel { font-weight: 500; }
.is-vervallen > .doelregel .doeltitel { text-decoration: line-through; color: var(--gedempt); }
.toevoegen { display: inline-block; margin-top: 8px; font-size: 0.875rem; text-decoration: none; padding: 4px 0; }
.toevoegen:hover { text-decoration: underline; }

/* Formulier */
.formulier { display: flex; flex-direction: column; gap: 14px; }
.veld { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; gap: 0; }
.veld-smal { max-width: 200px; }
.veldrij { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
legend { font-size: 0.875rem; font-weight: 500; margin-bottom: 4px; padding: 0; }
select, input[type='date'] {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid #c9d1db;
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst);
  min-height: 46px;
}
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 12px; border: 1px solid #c9d1db; border-radius: 8px; font-weight: 400; font-size: 0.9375rem; cursor: pointer; }
.keuze:has(input:checked) { border-color: var(--blauw); background: #eef6fc; }
details.veld { gap: 12px; }
details.veld > .veld { margin-top: 12px; }
summary { cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--blauw-donker); }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.knoppen form { margin: 0; }
[hidden] { display: none !important; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; background: #eef1f5; padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }

.feiten-1 { grid-template-columns: minmax(0, 1fr) !important; }

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; }
.log li { display: flex; flex-direction: column; }
.log-wanneer { font-size: 0.8125rem; color: var(--gedempt); }

@media (min-width: 560px) {
  .veldrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log li { flex-direction: row; gap: 12px; }
  .log-wanneer { min-width: 120px; padding-top: 2px; }
}

@media (min-width: 760px) {
  .doelrij { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2fr); align-items: start; }
  .doelrij-maand, .doelrij-week { flex-direction: column; }
  .doelrij-label { min-width: 0; }
}

/* --- Brandt of kost geld en maandtaken ---------------------------------------- */

.blok-brandt { border-left: 3px solid var(--rood); }
.brandlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.brandregel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rand); }
.brandregel:first-child { border-top: 0; padding-top: 0; }
.brandregel:last-child { padding-bottom: 0; }
.brandregel form { margin: 0; flex-shrink: 0; }
.brandregel-tekst { min-width: 0; display: flex; flex-direction: column; }
.brandregel-titel { font-weight: 600; overflow-wrap: anywhere; }
.brandregel-detail { font-size: 0.875rem; color: #a82c28; }

.maandtaak-form { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 64px; align-items: end; }
.maandtaak-form .veld-titel { grid-column: 1; }
.maandtaak-form .btn { grid-column: 2; justify-self: end; white-space: nowrap; }
.vinkje { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: 0.9375rem; min-height: 38px; }
.vinkje input { width: 18px; height: 18px; }
.maandtaak-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.maandtaak-voet .rechts { margin-left: auto; }
.linkknop { font: inherit; font-size: 0.875rem; background: none; border: 0; padding: 4px 0; color: var(--blauw-donker); text-decoration: underline; cursor: pointer; }
.linkknop-rood { color: #a82c28; }

@media (min-width: 560px) {
  .maandtaak-form { grid-template-columns: minmax(0, 1fr) 64px auto auto; }
  .maandtaak-form .btn { grid-column: auto; justify-self: start; }
}

/* Een sprong naar een blok (#brandt) mag niet onder de vaste kop eindigen. */
section[id], li[id] { scroll-margin-top: 104px; }

/* --- Todoist: wacht op anderen, afgerond, taken per doel --------------------- */

a.brandregel-titel { color: var(--tekst); text-decoration: none; }
a.brandregel-titel:hover { text-decoration: underline; }

.wachtlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; }
.wachtregel { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wacht-naam { font-weight: 600; overflow-wrap: anywhere; }
.wacht-stil { margin-left: auto; white-space: nowrap; font-size: 0.875rem; color: var(--gedempt); }
.wacht-stil.tekst-rood { color: #a82c28; }

.getal-regel { display: flex; align-items: baseline; gap: 8px; font-size: 0.9375rem; }
.getal { font-size: 1.75rem; font-weight: 700; line-height: 1; white-space: nowrap; }

.taaklijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; }
.taaklijst li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.taaklijst a { color: var(--tekst); overflow-wrap: anywhere; }
.page > .melding { margin: 0; }

/* --- De drie van vandaag ---------------------------------------------------------- */

.h3 { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedempt); }
.drie-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.drie-regel { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.drie-regel form, .voorstel-regel form { margin: 0; flex-shrink: 0; }
.drie-nummer {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--oranje);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drie-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drie-titel { font-weight: 600; color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.drie-titel:hover, .voorstel-titel:hover { text-decoration: underline; }
.is-klaar .drie-titel { text-decoration: line-through; color: var(--gedempt); font-weight: 500; }
.is-klaar .drie-nummer { background: var(--groen); }

.voorstel { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rand); }
.voorstel-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.voorstel-regel { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand); min-width: 0; }
.voorstel-regel:first-child { border-top: 0; padding-top: 0; }
.voorstel-regel:last-child { padding-bottom: 0; }
.voorstel-titel { color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; font-size: 0.9375rem; }
.redenen { display: flex; flex-wrap: wrap; gap: 4px; }
.reden { font-size: 0.75rem; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: #eef1f5; color: #46525f; overflow-wrap: anywhere; }
.reden-deadline { background: #fff1e9; color: #b3430f; }
.reden-urgent { background: var(--rood-zacht); color: #8f2320; }
.reden-geld { background: #e9f6ef; color: #1f7a4f; }
.reden-toezegging { background: #eaf3fb; color: #1f5d8a; }

/* --- Afvinken en verzetten --------------------------------------------------------- */

.taak-acties { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.taak-acties form { margin: 0; }
.drie-regel { flex-wrap: wrap; }
.drie-acties { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-left: 36px; }
.drie-acties > form { margin: 0; }
.verzet { position: relative; }
.verzet > summary { list-style: none; display: inline-block; cursor: pointer; }
.verzet > summary::-webkit-details-marker { display: none; }
.verzet[open] > summary { background: var(--achtergrond); }
.verzet-keuzes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 8px; border: 1px solid var(--rand); border-radius: 8px; background: #fafbfc; }
.verzet-datum { display: flex; gap: 6px; align-items: center; }
.verzet-datum input[type='date'] { width: auto; min-height: 36px; padding: 6px 8px; font-size: 0.875rem; }
.taak-met-acties { flex-direction: column; align-items: stretch !important; gap: 6px !important; padding-bottom: 8px; border-bottom: 1px solid var(--rand); }
.taak-met-acties:last-child { border-bottom: 0; padding-bottom: 0; }
.taak-tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.brandregel .taak-acties { flex-shrink: 0; }

/* --- Team (Jira) ------------------------------------------------------------------- */

.tellers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.teller { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 8px; text-decoration: none; color: var(--tekst); min-width: 0; }
.teller:hover { background: var(--achtergrond); }
.teller-naam { font-size: 0.8125rem; color: var(--gedempt); line-height: 1.3; }
.teller-oranje { border-color: #f6c3a8; background: #fff7f2; }
.teller-oranje .getal { color: #b3430f; }
.teller-rood { border-color: #f1b9b7; background: var(--rood-zacht); }
.teller-rood .getal { color: #a82c28; }

.bezig { display: flex; flex-direction: column; gap: 10px; }
.bezig-persoon { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bezig-naam { font-weight: 600; font-size: 0.9375rem; }
.bezig-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.9375rem; }
.bezig-lijst a { color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.bezig-lijst a:hover { text-decoration: underline; }
.ticket-sleutel { font-size: 0.8125rem; color: var(--gedempt); white-space: nowrap; }

@media (min-width: 760px) {
  .bezig-persoon { flex-direction: row; gap: 16px; }
  .bezig-naam { flex: 0 0 150px; }
  .bezig-lijst, .bezig-persoon .taaklijst { flex: 1; min-width: 0; }
}

/* --- Finance-tegel ------------------------------------------------------------------ */

.tegel-finance { flex-direction: column; align-items: stretch; gap: 10px; grid-column: 1 / -1; padding: 12px; }
.tegel-kop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tegel-finance .tegel-status { margin-left: auto; flex-basis: auto; }
a.tegel-naam { color: var(--tekst); text-decoration: none; }
a.tegel-naam:hover { text-decoration: underline; }
.geldrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.geld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.geld .getal { font-size: 1.5rem; white-space: nowrap; }
.getal.tekst-rood { color: #a82c28; }

/* --- Te factureren ------------------------------------------------------------------- */

.klantlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.klantregel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--rand); }
.klant-naam { font-weight: 600; overflow-wrap: anywhere; }
.klant-bedrag { font-weight: 600; white-space: nowrap; text-align: right; }
.klant-detail { grid-column: 1 / -1; }
.niet-gekoppeld { display: flex; align-items: baseline; gap: 8px; font-size: 0.9375rem; padding: 4px 12px; }
.niet-gekoppeld .stip { position: relative; top: 1px; }

/* --- Rapporten van de geplande taken -------------------------------------------------- */

.regels { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 0.9375rem; }
.actielijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.actie { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.actie form { margin: 0; flex-shrink: 0; }
.vink {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid #9aa6b3;
  background: var(--vlak);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vink:hover { border-color: var(--blauw); }
.vink-aan { background: var(--groen); border-color: var(--groen); }
.actie-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; font-size: 0.9375rem; }
.actie-titel { color: var(--tekst); overflow-wrap: anywhere; }
a.actie-titel { text-decoration: underline; text-decoration-color: #b4bdc8; }
.actie.is-klaar .actie-titel { text-decoration: line-through; color: var(--gedempt); }
.ritme-form { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.ritme-form .btn { justify-self: start; }
.statusregel-kop .stip, .blok-kop .stip { flex-shrink: 0; }

@media (min-width: 560px) {
  .ritme-form { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 90px auto; }
}

/* --- Agenda en de rapportblokken op de startpagina -------------------------------------- */

.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; }
.afspraak { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.afspraak-tijd { flex: 0 0 44px; font-weight: 600; font-variant-numeric: tabular-nums; }
.afspraak-tekst { min-width: 0; overflow-wrap: anywhere; }
.afspraak-tekst a { color: var(--tekst); }
.afspraak.is-geweest { color: var(--gedempt); }
.afspraak.is-geweest .afspraak-tijd { font-weight: 500; }

/* --- Balans ----------------------------------------------------------------------------- */

.tellerrij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tellerrij form { margin: 0; }
.tikknop {
  width: 100%;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  min-height: 56px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst);
  cursor: pointer;
  text-align: left;
}
.tikknop:hover { background: var(--achtergrond); }
.tikknop:active { background: #e9eef4; }
.tik-naam { font-size: 0.8125rem; color: var(--gedempt); max-width: 100%; line-height: 1.25; hyphens: auto; overflow-wrap: anywhere; }
.tikknop { justify-content: space-between; height: 100%; }
.tellerrij li, .tellerrij form { display: flex; }
.tellerrij form { flex: 1; }
.tik-stand { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.tikknop.is-gehaald { border-color: #a9d8c0; background: #eef8f2; }
.tikknop.is-gehaald .tik-stand { color: #1f7a4f; }
.streef-form { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
.btn:disabled { opacity: 0.45; cursor: default; }

@media (min-width: 760px) {
  .tellerrij { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Een tegel met een langere status (Development) breekt af in plaats van buiten beeld te lopen. */
.tegel { flex-wrap: wrap; }
.tegel-naam { flex-shrink: 0; }
.tegel-status { white-space: normal; text-align: right; min-width: 0; }
@media (min-width: 760px) {
  .tegel-status { text-align: left; }
  .tegel-finance .tegel-status { text-align: right; }
}