/* U6 (impl-plan §11 B2a–B2d): date, amount and file fields; the document editor line grid and summary. Tokens only. */

/* ---- B2a date fields (ui/date-field.js): text field TT.MM.JJJJ, calendar button beside it ---- */
.has-date-field { position: relative; }
.field.has-date-field { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 4px; }
.field.has-date-field > :not(.date-input):not(.date-field-button):not(.date-calendar) { grid-column: 1 / -1; }
.field.has-date-field > .date-input { grid-column: 1; }
.field.has-date-field > .date-field-button { grid-column: 2; }
/* A date field with a «?» term help (Leistungsdatum, Stornodatum): the rule above would put the «?» on a row of
   its own and push the field below its neighbours. Floats keep label and «?» on the first line and the field with its
   calendar button on the second (clear), so the field is as wide as its wider line; hints and messages follow below. */
.field.has-date-field:has(> .term-help-slot) { display: flow-root; }
.field.has-date-field:has(> .term-help-slot) > :is(label, .term-help-slot) { float: left; }
.field.has-date-field:has(> .term-help-slot) > .term-help-slot { margin-left: 4px; }
.field.has-date-field:has(> .term-help-slot) > .date-input { float: left; clear: left; margin-top: 4px; }
.field.has-date-field:has(> .term-help-slot) > .date-field-button { float: left; margin: 4px 0 0 4px; }
.field.has-date-field:has(> .term-help-slot) > :not(label, .term-help-slot, .date-input, .date-field-button, .date-calendar) { display: block; clear: both; padding-top: 4px; }
.input.date-input { width: 128px; max-width: 100%; text-align: left; font-variant-numeric: tabular-nums lining-nums; }
.input.date-input[data-date-field="month"] { width: 104px; }
.input.date-input[aria-invalid="true"] { border-color: var(--error-fg); }
.date-field-button { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; }
.date-field-button:hover { background: var(--bg-hover); color: var(--text-primary); }
.date-field-button:disabled { color: var(--text-disabled); cursor: default; background: transparent; }
.date-field-message { color: var(--error-fg); font-size: var(--text-xs); line-height: var(--lh-xs); }
/* Wins over `.field small` (muted); no own width, so an error never widens the field or reflows its row. */
.field .date-field-message { color: var(--error-fg); width: 0; min-width: 100%; }
.date-field-message[hidden] { display: none; }
.date-calendar { position: absolute; z-index: var(--z-popover); width: 272px; padding: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-2); }
.date-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
.date-calendar-title { margin: 0; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-bold); }
.date-calendar-nav { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; }
.date-calendar-nav:hover { background: var(--bg-hover); color: var(--text-primary); }
.date-calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.date-calendar-grid th { padding: 4px 0; color: var(--text-muted); font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: var(--weight-medium); text-align: center; }
.date-calendar-grid td { height: 32px; padding: 0; border-radius: var(--radius-sm); text-align: center; font-size: var(--text-sm); font-variant-numeric: tabular-nums lining-nums; }
.date-calendar-grid td[data-day] { cursor: pointer; }
.date-calendar-grid td[data-day]:hover { background: var(--bg-hover); }
.date-calendar-grid td[aria-current="date"] { font-weight: var(--weight-bold); box-shadow: inset 0 0 0 1px var(--border-control); }
.date-calendar-grid td[aria-selected="true"] { background: var(--accent); color: var(--text-on-solid); }
.date-calendar-grid td[aria-disabled="true"] { color: var(--text-disabled); cursor: default; background: transparent; }
.date-calendar-grid td:focus { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
/* The selected day is filled with the accent: its focus ring sits outside the cell (on the surface). */
.date-calendar-grid td[aria-selected="true"]:focus { outline-offset: 1px; }
@media (forced-colors: active) {
  .date-calendar-grid td[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .date-calendar-grid td[aria-selected="true"]:focus { outline-color: CanvasText; }
}

/* ---- B2b amount fields (ui/amount-field.js): right-aligned, tabular, muted CHF ---------------- */
input[data-amount], .input.amount-input { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.amount-field { position: relative; display: flex; align-items: center; width: 100%; max-width: 180px; }
.amount-field > .input { max-width: none; padding-right: 40px; }
.amount-unit { position: absolute; right: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-xs); pointer-events: none; }

/* ---- B2d drop zone (ui/drop-zone.js): 88 px, the native input hidden but focusable ------------ */
.drop-zone { position: relative; display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 12px 16px; border: 1px dashed var(--border-control); border-radius: var(--radius); background: var(--bg-subtle); color: var(--text-secondary); cursor: pointer; }
.drop-zone:hover, .drop-zone.is-dragover, .drop-target.is-dragover { border-color: var(--accent); background: var(--petrol-2); }
.drop-zone:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.drop-zone > input[type="file"] { position: absolute; left: 16px; bottom: 12px; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.drop-zone-icon { display: inline-grid; flex: none; color: var(--accent); }
.drop-zone-text { display: grid; gap: 2px; min-width: 0; }
.drop-zone-title { color: var(--text-primary); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-medium); }
.drop-zone .drop-zone-note { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.drop-zone-file { color: var(--text-primary); font-size: var(--text-xs); line-height: var(--lh-xs); overflow-wrap: anywhere; }
.drop-zone-error { color: var(--error-fg); font-size: var(--text-xs); line-height: var(--lh-xs); }
.drop-zone-file[hidden], .drop-zone-error[hidden] { display: none; }

/* ---- B2c document editor (invoice, bill, quote) ---------------------------------------------- */
.field.w-xs { width: 96px; }
.field.w-sm { width: 160px; }
.field.w-md { width: 320px; }
.field.w-lg { width: 480px; }
.editor-form { container: editor / inline-size; }
.editor-main { display: grid; gap: 16px; min-width: 0; align-content: start; }
.editor-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
/* I-08 (27.09.2026): with the «?» beside «Leistungs-/Lieferdatum» the five head fields still share one row at 1920 px in
   French too: 14 px gaps and the due-date hint at most 306 px (the German hint keeps one line). */
.editor-head > .field > small { max-width: 306px; }
.editor-head > .field { flex: 0 0 auto; max-width: 100%; }
.editor-head > .contact-combo { width: 320px; }
@media (min-width: 1000px) {
  #document-form .editor-head { display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(110px, 1fr) repeat(3, minmax(145px, 1fr)); column-gap: 10px; }
  #document-form .editor-head > .field { width: auto; min-width: 0; max-width: none; }
  #document-form .editor-head > .field > .input { max-width: 100%; }
  #document-form .editor-head .input.date-input { width: 115px; }
  #document-form .address-warning { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  #document-form .address-warning-actions { grid-column: 2; grid-row: 1; }
  #document-form .address-warning-detail { grid-column: 1 / -1; grid-row: 2; }
}
.editor-head .combo-hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.editor-head .contact-combo .combo-list { top: calc(100% + 2px); }
.contact-combo { position: relative; }
.contact-combo > .combo-input { padding-right: 40px; }
.contact-picker-button { position: absolute; right: 3px; top: 23px; width: 28px; height: 28px; padding: 0; }
dialog:has(.contact-picker) { width: min(1080px, calc(100vw - 64px)); max-width: none; }
.contact-picker .toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.contact-picker .toolbar > .field:first-child { flex: 1; min-width: 240px; }
.contact-picker .table-wrap { max-height: 52vh; }
.contact-picker th { position: sticky; top: 0; background: var(--bg-subtle); }
.contact-picker-pages { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.contact-picker-pages > span { margin-right: auto; color: var(--text-muted); }
.catalog-picker-control { display: flex; align-items: center; gap: 4px; min-width: 0; }
.catalog-picker-control > .input, .catalog-picker-control > .select { flex: 1; min-width: 0; width: 100%; }
.catalog-picker-trigger { flex: none; width: 28px; height: 28px; padding: 0; }
/* Flattened: the party card, pricing controls and summary are ruled sections, no card in a card. */
.editor-party .party-panel { border: 0; border-top: 1px solid var(--border-hairline); border-radius: 0; background: transparent; overflow: visible; }
.editor-party .party-panel > .section-head { padding: 12px 0 0; }
.editor-party .party-grid { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 8px 0 0; }
.editor-party .party-grid > .field { width: 240px; max-width: 100%; }
.editor-party .party-grid > .field:nth-child(n+3) { width: 320px; }
.editor-party .party-captured { margin-top: 8px; }
.party-disclosure { border-top: 1px solid var(--border-hairline); }
.party-disclosure > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 0; color: var(--text-primary); cursor: pointer; font-weight: var(--weight-medium); }
.party-disclosure > summary::before { content: '›'; font-size: var(--text-lg); }
.party-disclosure[open] > summary::before { content: '⌄'; }
.party-disclosure > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.party-disclosure-meta { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.editor-party .party-disclosure .party-panel { border-top: 0; }
.address-warning-detail > summary { cursor: pointer; font-size: var(--text-xs); }
.address-warning-detail > p { margin: 4px 0; }
.party-language-tag { margin-left: 8px; vertical-align: 2px; font-weight: var(--weight-medium); }
.party-language-tag > strong { font-weight: var(--weight-bold); }
.editor-notes { max-width: 960px; }
.payroll-contract { border: 0; border-top: 1px solid var(--border-hairline); border-radius: 0; padding: 12px 0; background: transparent; }

/* The line grid: one header row, 32 px rows, the description the only flexible column. */
.line-grid { --lg-gap: 6px; --lg-article: 136px; --lg-qty: 60px; --lg-unit: 68px; --lg-price: 104px; --lg-discount: 64px; --lg-vat: 164px; --lg-account: 150px; --lg-amount: 100px; --lg-icon: 28px; min-width: 0; }
.line-grid.is-invoice { --lg-cols: var(--lg-article) minmax(120px, 1fr) var(--lg-qty) var(--lg-unit) var(--lg-price) var(--lg-discount) var(--lg-vat) var(--lg-amount) var(--lg-icon) var(--lg-icon); }
.line-grid.is-bill { --lg-cols: minmax(160px, 1fr) var(--lg-qty) var(--lg-price) var(--lg-discount) var(--lg-vat) var(--lg-amount) var(--lg-icon) var(--lg-icon); }
/* D-13 inline Konto (accountant): narrower columns up to a 1110 px editor, so 1280 px keeps the grid in view.
   MWST keeps its rate visible (160 px); the Konto shows the code, its label is the tooltip. */
.line-grid.has-account { --lg-gap: 4px; --lg-article: 112px; --lg-qty: 56px; --lg-unit: 56px; --lg-price: 96px; --lg-discount: 60px; --lg-vat: 160px; --lg-account: 100px; --lg-amount: 92px; }
.line-grid.is-invoice.has-account { --lg-cols: var(--lg-article) minmax(104px, 1fr) var(--lg-qty) var(--lg-unit) var(--lg-price) var(--lg-discount) var(--lg-vat) var(--lg-account) var(--lg-amount) var(--lg-icon) var(--lg-icon); }
@container editor (min-width: 1110px) {
  .line-grid.has-account { --lg-gap: 6px; --lg-article: 136px; --lg-qty: 60px; --lg-unit: 68px; --lg-price: 104px; --lg-discount: 64px; --lg-vat: 164px; --lg-account: 160px; --lg-amount: 100px; }
  .line-grid.is-invoice.has-account { --lg-cols: var(--lg-article) minmax(120px, 1fr) var(--lg-qty) var(--lg-unit) var(--lg-price) var(--lg-discount) var(--lg-vat) var(--lg-account) var(--lg-amount) var(--lg-icon) var(--lg-icon); }
}
.line-grid.is-bill.has-account { --lg-cols: minmax(160px, 1fr) var(--lg-qty) var(--lg-price) var(--lg-discount) var(--lg-vat) var(--lg-account) var(--lg-amount) var(--lg-icon) var(--lg-icon); }
/* Presentation polish (27.09.2026, I-18): a wider Artikel field on a desktop editor, so «Code oder Name…» and a
   chosen code stay readable; from 1040 px of editor the description keeps more than 200 px. */
@container editor (min-width: 1040px) { .line-grid.is-invoice:not(.has-account) { --lg-article: 176px; } }
.line-grid-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; }
.line-grid-label { margin: 0; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-bold); }
.line-grid-title .price-mode-field { display: flex; align-items: center; gap: 8px; }
.line-grid-title .price-mode-field > label { white-space: nowrap; }
.line-grid-title .price-mode-field > .select { width: 160px; }
.line-grid-title .pricing-mode-help { flex: 1 1 280px; margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
.line-grid-head, .line-grid .line-row { display: grid; grid-template-columns: var(--lg-cols); column-gap: var(--lg-gap); align-items: center; }
.line-grid-head { min-height: 32px; padding: 4px 8px; border: 1px solid var(--border-default); border-bottom-color: var(--border-hairline); border-radius: var(--radius) var(--radius) 0 0; background: var(--bg-subtle); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: var(--weight-medium); }
.line-grid-head > span { min-width: 0; overflow-wrap: normal; hyphens: manual; }
.line-grid-head > .num { text-align: right; }
.line-grid .line-editor { border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--bg-surface); overflow: visible; }
.line-grid .line-row { position: relative; row-gap: 0; min-height: 32px; padding: 2px 8px; border-bottom: 1px solid var(--border-hairline); background: transparent; }
.line-grid .line-row:last-child { border-bottom: 0; }
.line-grid .line-row > .field, .line-grid .line-row > .line-catalog { display: block; grid-column: auto; min-width: 0; }
.line-grid .line-row > .field > label, .line-grid .line-row > .line-catalog > .line-catalog-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.line-grid .line-row > .field > :is(.input, .select), .line-grid .line-row > .line-catalog > .input { width: 100%; max-width: none; height: var(--control-sm); min-height: var(--control-sm); padding: 3px 6px; font-size: var(--text-sm); line-height: var(--lh-sm); }
.line-grid .line-row > .field > .select { padding-right: 24px; background-position: right 6px center; }
.line-grid .line-row > .line-catalog .combo-list { min-width: 440px; }
.line-grid .line-catalog > .input { text-overflow: ellipsis; }
.line-grid .line-row .input.is-zero { color: var(--text-muted); }
.line-grid .line-amount { min-width: 0; overflow: hidden; color: var(--text-primary); text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); line-height: var(--lh-sm); font-variant-numeric: tabular-nums lining-nums; }
.line-grid .line-row > .line-remove { grid-row: 1; grid-column: -2 / -1; width: var(--control-sm); height: var(--control-sm); }
.line-grid .line-row > .line-details { grid-row: 2; grid-column: 1 / -1; min-width: 0; }
.line-grid .line-details > summary { position: absolute; top: 2px; right: calc(8px + var(--lg-icon) + var(--lg-gap)); display: block; width: var(--control-sm); height: var(--control-sm); min-height: 0; margin: 0; padding: 0; border-radius: var(--radius-sm); background: var(--icon-chevron) center / 12px no-repeat; list-style: none; cursor: pointer; }
.line-grid .line-details > summary::-webkit-details-marker { display: none; }
.line-grid .line-details > summary::before { content: none; }
.line-grid .line-details > summary:hover { background-color: var(--bg-hover); text-decoration: none; }
.line-grid .line-details[open] > summary { transform: rotate(180deg); margin: 0; }
.line-grid .line-details-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 6px 0 8px; }
.line-grid .line-details-body > .line-account { width: 280px; max-width: 100%; }
.line-grid .line-details-body > .input-vat-controls { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding-top: 0; }
.line-grid .input-vat-controls > .field { width: 180px; }
.line-grid .input-vat-controls > .field:nth-child(2) { width: 112px; }
.line-grid .input-vat-controls > .field:nth-child(3) { width: 300px; }
.line-grid .input-vat-controls > .input-vat-reason { flex: 1 1 240px; width: auto; max-width: 480px; }
.line-grid > .input-vat-help { margin: 0 0 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-xs); max-width: 120ch; }
.line-grid .line-row.is-new { animation: u6-new-line 900ms ease-out 1; }
@keyframes u6-new-line { from { background-color: var(--stone-3); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .line-grid .line-row.is-new { animation: none; } }
.line-grid .line-add { margin-top: 8px; }
.line-grid .pricing-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-top: 12px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--border-hairline); border-radius: 0; background: transparent; }
.line-grid .pricing-controls > .field { width: 200px; }
.line-grid .pricing-controls > .field:nth-child(3) { width: 140px; }
.combo-badge.is-open { background: var(--neutral-bg); color: var(--neutral-fg); }

/* The summary: a sticky bar above the actions (collapsed: the Zahlbetrag line; ≤ 56 px), a
   320 px rail beside the editor when the editor is at least 1360 px wide. */
/* Focus scrolled into view clears the sticky summary bar and the sticky actions (WCAG 2.4.11). */
html:has(.editor-rail) { scroll-padding-bottom: 128px; }
.editor-rail { position: sticky; bottom: calc(var(--control) + 10px + var(--card-pad) + 1px); z-index: var(--z-sticky); display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 8px 0; border-top: 1px solid var(--border-hairline); background: var(--bg-surface); }
.editor-rail-toggle { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: var(--control); padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); line-height: var(--lh-sm); cursor: pointer; }
.editor-rail-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.editor-rail-toggle .ui-icon { transform: rotate(180deg); }
.editor-rail.is-expanded .editor-rail-toggle .ui-icon { transform: none; }
.editor-rail .document-summary { flex: 0 1 420px; width: auto; margin-left: auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
@container editor (max-width: 1359.98px) {
  .editor-rail:not(.is-expanded) .document-summary > :not(.document-summary-total):not(.document-summary-hint) { display: none; }
  .editor-rail:not(.is-expanded) .document-summary-total { margin: 0; padding: 4px 0; border: 0; }
  .editor-rail:not(.is-expanded) .document-summary-hint { padding: 6px 0; }
}
@container editor (min-width: 1360px) {
  .editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 0 24px; }
  .editor-rail { position: sticky; top: calc(var(--topbar-height) + 16px); bottom: auto; display: block; margin: 0; padding: 0; border-top: 0; background: transparent; }
  .editor-rail-toggle { display: none; }
  .editor-rail .document-summary { width: auto; margin: 0; padding: 0 0 0 16px; border: 0; border-left: 1px solid var(--border-hairline); border-radius: 0; }
}

@media print {
  .date-field-button, .date-calendar, .editor-rail-toggle { display: none !important; }
  .drop-zone { display: none !important; }
}