/* 08-screens-beheer-reporting.css: Beheer, reporting and charts, e-mail template editor, afspraken-lijsten.
   Loaded by base.html, one <link> per file in number order; a later file wins on source order. */

/* ===========================================================================
   Beheer (group beheer-a): users & roles, rights matrix, tenant settings,
   integrations, invitations, sent mail, document sets. Five small additions;
   everything else on those screens reuses the vocabulary above.
   =========================================================================== */

/* "Beheer > this screen", above the page header of a Beheer sub-screen. */
.breadcrumb {
  margin: 0 0 0.85rem;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

/* A status pill parked at the right end of a .form-section__head, e.g. an
   integration's verbonden/verlopen/fout. */
.head-status {
  margin-left: auto;
}

/* A card's heading block: the title, and any secondary action under it.
   Always under, never beside: in a row of cards with titles of different
   lengths, "beside when it fits" puts the action in a different place on each
   card. */
.card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.card-head h3 {
  margin: 0;
}

/* A head in a row of cards whose titles are not all one line long (HEA-441's
   four invitation cards: "Nieuwe kandidaat van leverancier" wraps, the other
   three do not). Every head reserves exactly two title lines and hangs its
   title at the bottom, so the last title line -- and with it every field
   below it -- sits at the same height in all four cards. The reserved height
   is computed over the title's own font, not the card's, or a wrapped title
   overshoots the reservation by a few pixels. */
.card-head--two-lines {
  --card-title-size: 1.17rem;
  --card-title-leading: 1.6;
  justify-content: flex-end;
  min-height: calc(2 * var(--card-title-size) * var(--card-title-leading));
}

.card-head--two-lines h3 {
  font-size: var(--card-title-size);
  line-height: var(--card-title-leading);
}

/* Buttons in the body of a card rather than in the page header, e.g. an
   integration's "Testen - Opnieuw verbinden" pair. */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* A card whose actions sit at its foot, so a row of cards holding different
   numbers of fields still lines its buttons up on one baseline (HEA-420's
   four invitation cards: one of them carries three fields, the others two).
   The card and the form inside it become flex columns; the actions block then
   takes the slack. */
.card--actions-at-foot,
.card--actions-at-foot > form {
  display: flex;
  flex-direction: column;
}

.card--actions-at-foot > form {
  flex: 1;
}

/* Actions too wide to share a row: one above the other, each the full width of
   the card body. A wide secondary with a small primary tucked under its left
   edge reads as an accident; equal widths read as a stack. Use this instead of
   letting .card-actions wrap, which produces exactly that mismatch. */
.card-actions--stacked {
  flex-direction: column;
  align-items: stretch;
  margin-top: auto;
  padding-top: 1rem;
}

.card-actions--stacked > * {
  width: 100%;
  text-align: center;
}

/* The current logo above its upload control (tenant settings). Dashed, so it
   reads as a drop target rather than as a card of its own. */
.logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1rem;
  margin-bottom: 0.9rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-field);
}

.logo-preview img {
  max-height: 5rem;
  width: auto;
}

/* A fourth status colour, for a capability that is readable but not writable.
   #dfe6ef is sampled straight out of HEA-177_rechtenmatrix.png's "alleen
   lezen" pill -- the one place the deck reaches past green/amber/grey. The
   same fill carries "verplicht bij Ja" and the check type on HEA-188 and the
   Recruitment role pill on HEA-178. */
.badge-info {
  background: #dfe6ef;
  color: #1d4e89;
  border: 1px solid rgba(29, 78, 137, 0.2);
}

/* One mail rendered as it arrived, per HEA-205's preview pane: dark brand bar,
   body on the card, one orange CTA, quiet footer. Used by the sent-mail
   archive, and by the e-mail template editor that draws the same thing. */
.mail-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

.mail-preview__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  background: var(--color-surface-strong);
  color: #fff;
  font-weight: 700;
}

.mail-preview__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  background: #fff;
  color: var(--color-surface-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

.mail-preview__body {
  padding: 1.25rem;
  font-size: 0.9rem;
}

.mail-preview__body p {
  margin: 0 0 0.75rem;
}

.mail-preview__body ul {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.mail-preview__note {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.mail-preview__footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.75rem;
}
/* A card's one-line explanation, between its head and its body. */
.card-intro {
  margin: -0.25rem 0 0.9rem;
}

/* A table cell that must not break mid-value: a date, an amount. Needed where
   a wide table (the invitations list carries nine columns) squeezes a column
   narrower than its content. */
.cell-nowrap {
  white-space: nowrap;
}

/* ===========================================================================
   Reporting (HEA-220 .. HEA-224). Three things the five Management-only
   reports need and nothing else had: a second tab row under the Financials
   tabs, amount tones inside a money table, and the inline SVG charts. The
   charts are drawn in the template from fixture geometry -- no chart library
   and no island; HEA-224's island is a later decision, not this prototype's.
   =========================================================================== */

/* The report switcher sits directly under Financials' own tab row. Without
   this the two rows' collapsed margins leave a gap that reads as a block
   that failed to render. */
.tabs--sub {
  margin-top: -1rem;
}

/* Amount tones inside a money table. The mockups colour the column, not the
   cell's background: an afgedragen kickback is a deduction (negative tone)
   and the nettomarge is the number the reader came for (green), with the
   brutomarge beside it in plain text so the difference stays legible. */
.amount-negative {
  color: var(--color-error);
}

.amount-net {
  color: var(--color-success-fg);
  font-weight: 600;
}

/* The year-total row that closes a month table (HEA-220): tinted, bold, and
   still a <tr> so the columns stay aligned with the months above it. */
.data-table tr.row-total td {
  background: var(--color-bg-accent);
  font-weight: 700;
}

/* A note set under a table inside the same card (HEA-220, HEA-222 both carry
   one explaining what the numbers do and do not include). */
.table-note {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* Chart card: a heading row with its legend on the right, then the SVG. The
   SVG carries a viewBox and scales to the card; every colour comes from a
   token so the charts read as part of the same system as the tables. */
.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.chart-head h2 {
  margin: 0;
  font-size: 1rem;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.chart-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.chart-legend__swatch {
  display: inline-block;
  width: 1.4rem;
  height: 0.65rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-legend__swatch--current {
  background: var(--color-primary);
}

.chart-legend__swatch--previous {
  background: var(--color-primary-soft);
  border: 1px solid rgba(230, 83, 46, 0.35);
}

.chart-legend__swatch--line {
  height: 0;
  border-top: 2px solid var(--color-primary);
}

.chart-legend__swatch--dashed {
  height: 0;
  border-top: 2px dashed var(--color-border-strong);
}

.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.chart__divider {
  stroke: var(--color-border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.chart__axis {
  fill: var(--color-muted);
  font-size: 11px;
}

.chart__value {
  fill: var(--color-primary-hover);
  font-size: 11px;
  font-weight: 600;
}

.chart__bar--current {
  fill: var(--color-primary);
}

.chart__bar--previous {
  fill: var(--color-primary-soft);
}

.chart__band {
  fill: var(--color-primary-soft);
  opacity: 0.6;
}

.chart__line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
}

.chart__line--scenario {
  stroke: var(--color-border-strong);
  stroke-dasharray: 9 6;
}

.chart__dot {
  fill: var(--color-primary);
}

/* Third line on a stat tile: the qualifier under the number ("harde prognose",
   "+ EUR 64.000 waarschijnlijk"). The accent tone marks a scenario figure that
   is not contractually fixed, so it never reads as the hard number (HEA-221). */
.stat__note {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.stat__note--accent {
  color: var(--color-primary-hover);
}

/* Controls pushed to the right end of a .filter-bar: the customer and year
   selects sit opposite HEA-224's metric switcher rather than trailing it. */
.filter-bar__end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* A figure never wraps: "EUR 1.188.200" broken over two lines reads as two
   amounts. Cells only -- the header may still wrap, so a long column name
   does not widen the column past its numbers. */
.data-table td.col-num {
  white-space: nowrap;
}

/* ===========================================================================
   E-mail template editor (beheer-b, HEA-205): a Beheer screen two levels
   deep, with the editor on the left and the mail it produces on the right.
   =========================================================================== */

/* Breadcrumb line above a page header ("Beheer > Templates > Urenverzoek").
   Quieter than .back-link, which is one link back; a Beheer screen sits two
   levels deep and needs the whole trail. */
.crumbs {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.crumbs__sep {
  margin: 0 0.4rem;
}

/* A segmented toggle sitting inside a field grid rather than leading a filter
   bar: the filter version's equal 125px segments would take a third of the
   row for HEA-205's two-option NL/EN and Actief/Inactief switches. Declared
   after .segmented__option span so it wins on source order. */
.segmented--compact span {
  min-width: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
}

/* A placeholder token, in the one place this codebase sets type in mono: the
   variables the editor writes into the subject and body, and the chips that
   insert them. */
.var-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  background: var(--color-bg-accent);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  color: var(--color-text);
}

button.var-chip {
  cursor: pointer;
}

/* The editor's body pane: formatted text on the page, not a control. Sized
   for running copy rather than for form rows, which is what separates it
   from a .card. */
.doc-preview {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  font-size: 0.875rem;
}

.doc-preview p {
  margin: 0 0 0.5rem;
}

/* The mat the rendered mail sits on, so the white mail reads as a message
   rather than as more card. Sampled #ece7dc out of HEA-205 at (1000, 690),
   which is --color-bg-accent, not the lighter page colour. */
.preview-mat {
  background: var(--color-bg-accent);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* The mail itself: the fixed BOLT header bar, the body, a footer rule. */
.mail-preview {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.875rem;
}

.mail-preview__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface-strong);
  color: #fff;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
}

.mail-preview__body {
  padding: 1.1rem 1.25rem;
}

.mail-preview__body p {
  margin: 0 0 0.6rem;
}

.mail-preview__foot {
  border-top: 1px solid var(--color-border);
  margin: 1rem 1.25rem 0;
  padding: 0.7rem 0 1rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* A formatting toolbar leading a form: .filter-bar only carries a top margin,
   which leaves the first field's label sitting on the toolbar's buttons. */
.filter-bar + .field-grid {
  margin-top: 1rem;
}

/* Read-only rows above editable fields in one card (the contract's Afspraken:
   Raamovereenkomst over Betaaltermijn): the info-rows' last rule would sit on
   the field label below it. Give the fields the card's normal gap (HEA-462). */
.info-rows + .field-grid {
  margin-top: 1rem;
}

/* Beheer > Uitnodigingen (core/beheer_invitations.html): its .filter-bar sits
   directly against the .card below with nothing between them, unlike the
   other .filter-bar screens (a "New X" link, a bare .data-table -- both
   carry their own margin already). With the "Filteren" button at the
   selects' 2.75rem height it fills that row edge-to-edge, and without this
   margin the card reads as touching it. */
#invitation-filters {
  margin-bottom: 1rem;
}

/* ===========================================================================
   Beheer > Afspraken-lijsten (HEA-443): the same table renders on three tabs,
   one per list. Fixed columns rather than content-sized ones, so the three
   tabs' columns -- and their action buttons -- land at the same x whatever
   each list's own texts are. Percentages, so the table still fills .page at
   any width.
   =========================================================================== */
.table-options {
  table-layout: fixed;
}

.table-options .col-option {
  width: 43%;
}

.table-options .col-usage {
  width: 13%;
}

.table-options .col-status {
  width: 17%;
}

/* Wide enough for the one row that carries two of the last action
   (Terugzetten + Verwijderen on a withdrawn option nothing uses): at 24% its
   buttons run 6px into the cell's own right padding. Measured at 1440. */
.table-options .col-row-actions {
  width: 27%;
}

/* An action a row cannot offer right now (the first row's "up", the standard
   payment term's "withdraw") keeps its place greyed instead of disappearing:
   a row whose actions shift sideways reads as a different row. */
.action-link:disabled {
  color: var(--color-muted);
  /* Same 0.45 .btn-quiet:disabled uses: --color-muted alone is darker than
     the primary an enabled action-link carries, so the disabled item would
     read as the most prominent one in the row. */
  opacity: 0.45;
  cursor: not-allowed;
}

.action-link:disabled:hover {
  text-decoration: none;
}

/* The rename row: the option's cell becomes an input plus its two actions,
   on the row's own line rather than pushing the row open. */
.inline-edit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Compact enough that the row keeps the height it has at rest: a row that
   grows while you rename it pushes every row below it down. Measured
   against a resting row (52.5px) at 1440. */
.inline-edit input[type] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0.6rem;
}

.inline-edit .btn {
  padding: 0.2rem 0.7rem;
  font-size: 0.8125rem;
}

/* The cell gives back what the input takes, so the row being renamed keeps
   the height of the rows around it (52.5px at 1440, measured). */
.table-options td.is-editing {
  padding-block: 0.7rem;
}

/* The add row under a list's table. Sits inside the card, so it carries the
   gap to the table itself. */
.option-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.option-add input {
  flex: 0 1 22rem;
}

/* The notice-period list writes an option as a number and a unit: a short number field and a
   select as wide as its words, on the add row and on a row being renamed. */
.option-add input.option-amount,
.inline-edit input.option-amount {
  flex: 0 0 6rem;
}

.option-add select,
.inline-edit select {
  flex: 0 0 auto;
  width: auto;
}

/* A select draws 1px more above and below its text than an input does; taking that off its
   padding gives both the same height, so the pair sits on one line top and bottom. */
.option-add select {
  padding-block: calc(0.6rem - 1px);
}

.inline-edit select {
  padding-block: calc(0.2rem - 1px);
}

/* .section-note carries no margin of its own, so under the add row it would
   start exactly at the input's bottom edge. */
.option-add + .section-note {
  margin-top: 0.75rem;
}

/* Audit log: fixed column widths, so the rows do not slide sideways when a
   filter changes what the cells contain. The widths are the ones the
   unfiltered table settles on; only this table is pinned, not .data-table
   everywhere. */
.data-table--audit {
  table-layout: fixed;
}

.audit-col--moment {
  width: 11%;
}

.audit-col--type {
  width: 13.5%;
}

.audit-col--record {
  width: 22.5%;
}

.audit-col--action {
  width: 9%;
}

.audit-col--actor {
  width: 17.5%;
}

.audit-col--description {
  width: 26.5%;
}

/* A fixed layout no longer widens a cell to fit, so the two columns that can
   hold a long unbroken value wrap it instead of pushing past their edge. */
.data-table--audit td {
  overflow-wrap: anywhere;
}

/* The Gebruiker cell reserves its role line on every row, so a row whose actor
   holds no role in this tenant (a former member, a system write) is the same
   height as one that does. */
.audit-actor {
  display: block;
  min-height: 2.875rem;
}

/* A stored or previewed mail, rendered by the send pipeline and shown in a
   sandboxed iframe (HEA-205, HEA-386). The frame is the mail's own document,
   so it carries no page styles; the height fits the house layout of a short
   mail without an inner scroll bar on most. */
.mail-frame {
  display: block;
  width: 100%;
  height: 36rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* The CTA in a stored template, drawn as the button the mail shows
   (HEA-205_emailtemplate_editor.png, the Bewerken pane's orange button). */
.doc-preview a[data-cta] {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* Verzonden mail (HEA-386): fixed columns, as the audit log's, so the table
   keeps its geometry whether it holds rows, one page of them, or none. */
.data-table--sent-mail {
  table-layout: fixed;
}

.data-table--sent-mail td {
  overflow-wrap: anywhere;
}

/* Beheer > E-mailtemplates & systeemteksten: the mail list and the system-text
   list are two tables on one screen, so they share their column edges. */
.template-list-col--name { width: 25%; }
.template-list-col--languages { width: 7%; }
.template-list-col--status { width: 20%; }

/* Beheer > one system text: the NL and EN cards keep the mail editor's rhythm
   (its sibling screen): as close under the page header as the editor's first
   card, and the card heading as close over its first field as "Bewerken" is
   over the toolbar. A card's own top margin (05-forms.css, loaded after the
   grid's reset in 03-layout.css) would add a row on top of the grid's. */
.system-text-cards > .form-section {
  margin-top: 0;
}

.system-text-cards .form-section__head {
  margin-bottom: 0.25rem;
}

.sent-mail-col--select { width: 4%; }
.sent-mail-col--moment { width: 13%; }
.sent-mail-col--type { width: 29%; }
.sent-mail-col--to { width: 24%; }
.sent-mail-col--by { width: 16%; }
.sent-mail-col--language { width: 6%; }
.sent-mail-col--customised { width: 8%; }

/* Verzonden mail's Gegevens card (HEA-386): the card head already sets the
   space above the first row, so its own top padding would double it; the
   first row starts at the head's margin, the rest keep the row rhythm. */
.info-rows--after-head > dt:first-of-type,
.info-rows--after-head > dd:first-of-type {
  padding-top: 0;
}

/* The Klantcontract block's form after its read-only rows or a banner keeps a row's distance from
   the rule above it, as a banner there does (05-forms.css). */
.info-rows + .kc-form,
.info-banner--flush + .kc-form {
  margin-top: 1rem;
}

/* The KC-template choice's own fields (the library pick and the upload) show only while it is
   picked; the server ignores them otherwise. Without that choice the upload is the way in and
   stays. */
.kc-form--choice:has(input[type="radio"][value="template"]:not(:checked)) .kc-form__own {
  display: none;
}

/* The upload's hint is the block's last line before Opslaan: `.page form p` would hang a 1rem
   skirt under it, which escapes the wrapper and doubles the gap to the button. */
.kc-form .field__help {
  margin-bottom: 0;
}

/* "Lopende reminders" (HEA-500): fixed column widths keep the header columns in place whether
   the table holds rows or the empty line. Ontbreekt takes the rest. */
.data-table--running {
  table-layout: fixed;
}

.data-table--running .col-supplier { width: 15rem; }
.data-table--running .col-step { width: 8rem; }
.data-table--running .col-sent { width: 10rem; }
.data-table--running .col-next { width: 22rem; }