/* Klanten: contactenlijst, dubbele contacten, partners, offertes, kansen bij klanten, Broodje Bram en omzet importeren.
   Bouwt op core.css; de contactpagina zelf staat in contact.css. Deze pagina's dragen body.klanten-page. */

/* Contactenlijst: omzetbalkje onder het bedrag */
.contact-revenue .share-track { margin-top: 8px; }

/* Tabellen op de iPhone (contacten, partners, offertes, import): elke rij een blok. Naam links, bedrag of actie rechts,
   de rest als korte regel eronder (met het kolomlabel uit data-label). Een lege cel (.c-empty) valt weg.
   Op de laptop gewoon een tabel. */
@media (max-width: 760px) {
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tfoot { display: block; width: 100%; }
  .stack-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline-light); }
  .stack-table tbody tr:last-child { border-bottom: 0; }
  .stack-table tbody tr:hover td { background: none; }
  .stack-table td { display: block; padding: 0; border: 0; text-align: left; }
  .stack-table .c-main { order: 0; flex: 1 1 0; min-width: 0; } /* naam en bedrag op één regel */
  .stack-table .c-side { order: 1; flex: 0 0 auto; margin-left: auto; text-align: right; font-weight: 600; }
  .stack-table tbody tr::before { content: ""; order: 2; flex-basis: 100%; height: 0; } /* regelafbreking na naam en bedrag */
  .stack-table .c-meta { order: 3; flex: 0 1 auto; font-size: 14px; color: var(--charcoal); }
  .stack-table .c-meta[data-label]::before { content: attr(data-label) " "; color: var(--mute); }
  .stack-table .c-side[data-label]::before { content: attr(data-label) " "; font-size: 13px; font-weight: 400; color: var(--mute); }
  .contact-table .c-side[data-label]::before { display: block; } /* contacten: label boven het bedrag, de naam houdt de ruimte */
  .stack-table .c-meta .meta { display: inline; margin: 0 0 0 4px; }
  .stack-table .c-state { flex-basis: 100%; }
  .stack-table .c-empty, .stack-table .col-extra { display: none; }
  .stack-table tfoot tr { border-top: 1px solid var(--hairline-strong); border-bottom: 0; }
  .stack-table tfoot td { border: 0; }
  .stack-table tfoot tr + tr { border-top: 0; padding-top: 0; }
  /* Lijsten met één link per rij (contacten, partners): de hele rij is het tikvlak */
  .row-links tbody tr { position: relative; }
  .row-links tbody .c-main a::after { content: ""; position: absolute; inset: 0; }
}

/* Dubbele contacten: Samenvoegen staat eerst (ook in de broncode, voor Enter), Geen dubbel ernaast */
.duplicate-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.duplicate-choice legend { padding: 0; margin-bottom: 8px; }
.duplicate-option { display: flex; align-items: flex-start; gap: 12px; min-height: 40px; cursor: pointer; }
.duplicate-option input { margin-top: 3px; } /* 3px: optisch gelijk met de eerste tekstregel */
.duplicate-actions { margin-top: 16px; }

/* Cijfers bovenaan (partners, kansen, Broodje Bram): drie naast elkaar */
.partner-stats, .client-stats, .bb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-stats .stat-value .trend { font-weight: 500; }
.client-summary { display: none; }
@media (max-width: 760px) {
  .partner-stats, .bb-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* Partners: korte getallen, dus cijfer links en label ernaast, zodat de lijst eerder in beeld komt */
  .partner-stats .stat { display: grid; grid-template-columns: minmax(48px, auto) minmax(0, 1fr); align-items: center; gap: 0 16px; padding: 12px 16px; }
  .partner-stats dt { grid-column: 2; grid-row: 1; }
  .partner-stats .stat-value { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 24px; }
  .partner-stats .stat-note { grid-column: 2; grid-row: 2; margin-top: 4px; }
  /* Broodje Bram: bedragen en procenten verschillen in lengte; getal onder het label, zodat de labels recht onder elkaar staan */
  .bb-stats .stat { padding: 16px; }
  .bb-stats .stat-value { margin-top: 4px; font-size: 24px; }
  .bb-stats .stat-note { margin-top: 4px; }
  /* Kansen: de drie cijfers als één regel in de kop (.client-summary) */
  .client-stats { display: none; }
  .client-summary { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--charcoal); }
}

/* Offertes: per status aantal, balk en bedrag. Elke rij is ook het tabblad, daarom geen knoppen in de filterbalk.
   Kleur per status (--bar), gelijk aan de stip in de tabel: open inkt, concept lichtgrijs, geaccepteerd cobalt (nu
   factureren), gefactureerd teal (gehaald), afgewezen grijs. Het actieve tabblad houdt zijn kleur; de rij zelf licht op. */
.estimate-money .panel-head { margin-bottom: 8px; }
.status-row { --bar: var(--ink); }
.status-row[data-status="concept"] { --bar: var(--faint); }
.status-row[data-status="geaccepteerd"] { --bar: var(--primary); }
.status-row[data-status="gefactureerd"] { --bar: var(--accent-teal); }
.status-row[data-status="afgewezen"] { --bar: var(--stone); }
.status-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.status-row { display: grid; grid-template-columns: 300px minmax(0, 1fr) 96px; align-items: center; gap: 16px; min-height: 40px; margin: 0 -12px; padding: 4px 12px; border-radius: var(--r-md); text-decoration: none; transition: background .18s var(--ease); }
.status-row:hover { background: var(--surface-soft); }
.status-row:hover .status-bar-name { text-decoration: underline; text-underline-offset: 3px; }
.status-row.is-active { background: var(--surface-soft); }
.status-row.is-active .status-bar-name { font-weight: 600; }
.status-bar-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.status-bar-name { font-weight: 500; }
.status-bar-label .meta { display: inline; margin: 0; }
.status-bar-track { height: 12px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.status-row.is-active .status-bar-track, .status-row:hover .status-bar-track { background: var(--surface-card); }
.status-bar { display: block; height: 100%; min-width: 4px; border-radius: var(--r-full); background: var(--bar); }
.status-row .num { text-align: right; font-weight: 600; }
.status-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hairline-light); }
.status-all .num { grid-column: 3; }
.estimate-invoiced { margin-top: 8px; }
@media (max-width: 760px) {
  /* iPhone: twee tegels per rij (status en aantal, daaronder het bedrag), zodat de eerste offerte op het eerste scherm staat */
  .status-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .status-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; min-height: 0; margin: 0; padding: 8px 12px; border: 1px solid var(--hairline-light); }
  .status-row.is-active { border-color: var(--ink); }
  .status-bar-label { display: contents; }
  .status-bar-name { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
  /* zonder balk draagt een stip de kleur, dezelfde als in de tabel (concept: een open rondje) */
  .status-row[data-status] .status-bar-name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bar); box-sizing: border-box; }
  .status-row[data-status="concept"] .status-bar-name::before { background: transparent; border: 1px solid var(--stone); }
  .status-row .count { grid-column: 2; grid-row: 2; }
  .status-row .num { grid-column: 1; grid-row: 2; text-align: left; }
  .status-bar-label .meta, .status-bar-track { display: none; }
  .status-all { margin: 0; padding: 0; border: 0; }
}

/* Kansen bij klanten: eerst bellen, daarna een kaart per klant */
.client-calls [id] { scroll-margin-top: 72px; } /* de pil Eerst bellen linkt hierheen; niet onder de balk op de iPhone */
.client-calls .panel-head { margin-bottom: 4px; }
.client-call-list { list-style: none; margin: 0; padding: 0; }
.client-call { padding: 16px 0; border-top: 1px solid var(--hairline-light); }
.client-call:first-child { border-top: 0; padding-top: 8px; }
.client-call:last-child { padding-bottom: 0; }
.client-call-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.client-call-head form { margin: 0; }
.client-call-name { font: 500 18px/1.3 var(--font-display); }
.client-call-name a { text-decoration: none; }
.client-call-name a:hover { text-decoration: underline; }
.client-call-reason { margin-top: 8px; padding: 12px 16px; border-radius: var(--r-md); background: var(--tint-warm); }

.client-card { scroll-margin-top: 72px; }
.client-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.client-head > div { flex: 1 1 360px; min-width: 0; }
.client-head [id] { scroll-margin-top: 96px; }
.client-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.client-title h2 a { text-decoration: none; }
.client-title h2 a:hover { text-decoration: underline; }
.client-title .tint-pill { text-decoration: none; }
.client-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.client-services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.client-trend { font-weight: 600; font-variant-numeric: tabular-nums; }
.client-trend[data-dir="down"] { color: var(--accent-danger); }
.client-trend[data-dir="up"] { color: var(--accent-teal); }
.client-idea-list { list-style: none; margin: 16px 0 0; padding: 0; }
.client-idea-list:empty { display: none; }
.client-idea-list > li { padding: 16px 0; border-top: 1px solid var(--hairline-light); }
.client-idea-list > li:last-child { padding-bottom: 0; }
.client-idea { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.client-idea-text { flex: 1 1 360px; min-width: 0; }
.client-idea-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 500; }
.client-idea-why { margin-top: 4px; max-width: 72ch; color: var(--mute); font-size: 15px; }
.client-idea .meta { margin-top: 4px; }
.client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.client-empty, .client-running { margin-top: 12px; }
@media (max-width: 760px) {
  .client-head-actions .btn, .client-call-head .btn { flex: 1 1 auto; }
  .client-call-reason { padding: 12px; }
}

/* Broodje Bram */
.bb-months .data { min-width: 640px; }
.bb-months .data td .meta { white-space: nowrap; }
.bb-rules li { display: block; }

/* Omzet importeren */
.import-form input[type="file"] { flex: 1 1 260px; }

/* iPhone: tikvlakken van minstens 40px. Core regelt velden, knoplinks, Uitleg en de terug-link; hier wat alleen op deze
   pagina's staat: de pil Eerst bellen (groter tikvlak, zelfde pil) en de melding over dubbele contacten. */
@media (max-width: 760px) {
  .klanten-page a.tint-pill { position: relative; }
  .klanten-page a.tint-pill::after { content: ""; position: absolute; inset: -8px -4px; }
  .klanten-page .notice-line a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Broodje Bram: wat er verandert */
.bb-kpi .panel-head { align-items: flex-start; gap: 16px; }
.bb-kpi .data { min-width: 760px; }
.bb-kpi .trend[data-trend=""] { color: var(--mute); font-weight: 500; }
.bb-kpi td.num .meta { white-space: nowrap; }
.bb-periode { display: none; }
.bb-periodes > input:nth-of-type(1):checked ~ .bb-periode-1,
.bb-periodes > input:nth-of-type(2):checked ~ .bb-periode-2,
.bb-periodes > input:nth-of-type(3):checked ~ .bb-periode-3 { display: block; }
.bb-tabs { display: inline-flex; gap: 4px; margin: 4px 0 12px; padding: 4px; border-radius: var(--r-full); background: var(--surface-soft); }
.bb-tabs label { padding: 6px 14px; border-radius: var(--r-full); font-size: 14px; font-weight: 600; color: var(--mute); cursor: pointer; }
.bb-periodes > input:nth-of-type(1):checked ~ .bb-tabs label:nth-child(1),
.bb-periodes > input:nth-of-type(2):checked ~ .bb-tabs label:nth-child(2),
.bb-periodes > input:nth-of-type(3):checked ~ .bb-tabs label:nth-child(3) { background: var(--surface-card); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline-light); }
.bb-periodes > input:focus-visible ~ .bb-tabs { outline: 2px solid var(--primary); outline-offset: 2px; }
.bb-periode-uitleg { margin: 0 0 16px; }
.bb-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bb-tegel { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--hairline-light); border-radius: var(--r-md); background: var(--surface-card); }
.bb-tegel .bb-tegel-label { margin: 0; font: 500 14px/1.4 var(--font-body); color: var(--mute); }
.bb-tegel-waarde { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.bb-tegel-waarde strong { font: 500 28px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bb-tegel-waarde .trend { font-size: 15px; }
.bb-vergelijk { display: grid; gap: 6px; margin-top: auto; }
.bb-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bb-balk { display: block; height: 8px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.bb-balk span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--primary); transform-origin: left center; animation: bar-grow .6s var(--ease) both; }
.bb-rij.oud .bb-balk span { background: var(--faint); }
.bb-rij-waarde { min-width: 5.5em; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.bb-rij.oud .bb-rij-waarde { font-weight: 400; color: var(--mute); }
.bb-tegel-spark { padding-top: 8px; border-top: 1px solid var(--hairline-light); }
.bb-tegel-spark .spark { height: 36px; }
.bb-dagen .bar-track { height: 160px; }
.bb-dagen .bar-fill { width: 38%; }
.bb-dagen .bar-label { font-size: 13px; line-height: 1.25; text-align: center; }
.bb-kpi .revenue-scroll { padding-top: 12px; }
@media (max-width: 1100px) { .bb-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bb-tegels { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bb-tegel-waarde strong { font-size: 24px; }
}


/* Broodje Bram: overige kenmerken, herkomst naast elkaar, laatste bestellingen ingeklapt */
.bb-meer { margin-top: 16px; }
.bb-herkomst { margin-top: 12px; align-items: start; }
.bb-origin-more { margin-top: 8px; }
.bb-origin-more > summary, .bb-laatste > summary { font-size: 15px; font-weight: 500; }
.bb-laatste > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bb-laatste > summary .tile-title { margin: 0; }
.bb-laatste[open] > summary { margin-bottom: 12px; }
.bb-herkomst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.bb-origin .data { width: 100%; min-width: 0; } /* de 640px van .bb-months geldt hier niet: twee tabellen naast elkaar */
.bb-origin .data th, .bb-origin .data td { padding-left: 8px; padding-right: 8px; }
.bb-origin .data th:first-child, .bb-origin .data td:first-child { padding-left: 0; white-space: normal; overflow-wrap: anywhere; }
.bb-origin .data th:last-child, .bb-origin .data td:last-child { padding-right: 0; }
/* Per week: koppen mogen over twee regels, zodat alle kolommen op de laptop passen */
#per-week ~ .scroll-x .data th, .bb-kpi .scroll-x .data thead th { white-space: normal; vertical-align: bottom; }
@media (max-width: 1100px) { .bb-herkomst { grid-template-columns: minmax(0, 1fr); } }

/* Facturatie (billing.html): één regel per klant. Links naam, status en de feiten; rechts één knop.
   Op de iPhone staat de knop onder de feiten. */
.billing-panel { padding-top: 8px; padding-bottom: 8px; }
.billing-list > li.billing-row { align-items: flex-start; gap: 12px 24px; padding: 20px 0; }
.billing-list > li.billing-row:first-child { padding-top: 12px; }
.billing-main { flex: 1 1 auto; min-width: 0; }
.billing-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.billing-title { margin: 0; font: 500 20px/1.25 var(--font-display); letter-spacing: -.01em; }
.billing-when { margin: 4px 0 0; color: var(--mute); font-size: 15px; }
.billing-fact { margin: 8px 0 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.billing-fact .meta { font-size: 14px; }
.billing-warn { padding: 8px 12px; border-radius: var(--r-md); background: var(--tint-warm); color: var(--ink); }
.billing-draft-note { color: var(--charcoal); }
.billing-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; }
.billing-actions form { margin: 0; }
.billing-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 360px; }
.billing-split .help { flex-basis: 100%; text-align: right; font-size: 14px; }
.billing-preview .billing-draft + .billing-draft { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline-light); }
.billing-draft-month { margin: 0 0 8px; font-size: 16px; }
.billing-lines li, .list-rows.billing-lines li { flex-direction: row; flex-wrap: nowrap; font-size: 15px; }
.billing-lines li > .num { flex: none; white-space: nowrap; text-align: right; }
.billing-lines .billing-total { font-weight: 600; border-top-color: var(--hairline-strong); }
.billing-preview .billing-actions { justify-content: flex-start; margin-top: 12px; }
.billing-form .field-group { display: contents; }
.billing-form .field-group[hidden] { display: none; }
@media (max-width: 760px) {
  .billing-list > li.billing-row { flex-direction: column; align-items: stretch; }
  .billing-actions, .billing-split { justify-content: flex-start; max-width: none; }
  .billing-split .help { text-align: left; }
}