/* Service-fee agreements and statements (/reports/fee-agreements, /reports/statements, /reports/statements/open/...). Builds on the ab- artboard classes and the tk- chips;
   everything new is prefixed fe-. Colours and sizes come from the ck- tokens only. */

.fe { max-width: 1440px; }
.fe .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fe-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ck-space-4); margin-bottom: var(--ck-space-4); }
.fe-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ck-primary-hover); }
.fe .fe-title { margin: 0.125rem 0 0.25rem; font-size: 1.75rem; font-weight: 600; line-height: 2.25rem; letter-spacing: normal; }

.fe-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--ck-space-4); align-items: start; }
.fe-stack { display: grid; gap: var(--ck-space-4); }
.fe-panel h2 { margin: 0 0 var(--ck-space-2); font-size: 1.0625rem; font-weight: 600; letter-spacing: normal; }
.fe-panel h3 { margin: var(--ck-space-3) 0 var(--ck-space-1); font-size: 0.9375rem; font-weight: 600; letter-spacing: normal; }

.fe-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-3); margin-bottom: var(--ck-space-4); padding: var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); }
.fe-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8125rem; color: var(--ck-slate); }
.fe-field input, .fe-field select, .fe-field textarea { min-height: var(--ck-control-md); padding: 0 var(--ck-space-2); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-ink); font: inherit; }
.fe-field textarea { min-height: 4.5rem; padding: var(--ck-space-2); resize: vertical; }
.fe-field input:focus-visible, .fe-field select:focus-visible, .fe-field textarea:focus-visible, .fe-row-btn:focus-visible, .fe-check input:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }
.fe-field .fe-help { font-size: 0.75rem; color: var(--ck-slate); }
.fe-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ck-space-3); }
.fe-form .fe-wide { grid-column: 1 / -1; }
.fe-check { display: flex; align-items: center; gap: var(--ck-space-2); font-size: 0.9375rem; }
.fe-fieldset { margin: 0; padding: 0; border: 0; }
.fe-fieldset legend { padding: 0; margin-bottom: var(--ck-space-1); font-size: 0.8125rem; font-weight: 600; color: var(--ck-ink); }
.fe-choices { display: flex; flex-wrap: wrap; gap: var(--ck-space-3); }

.fe-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fe-table th, .fe-table td { padding: 0.4rem var(--ck-space-2); border-bottom: 1px solid var(--ck-border); text-align: left; vertical-align: top; }
.fe-table th { font-size: 0.75rem; font-weight: 700; color: var(--ck-slate); text-transform: none; }
.fe-table .fe-num { text-align: right; white-space: nowrap; }
.fe-table tfoot td { font-weight: 700; border-top: 2px solid var(--ck-ink); border-bottom: 0; }
.fe-table tr.fe-selected td { background: var(--ck-primary-soft); }
.fe-table tr.fe-clickable { cursor: pointer; }
.fe-table tr.fe-clickable:hover td { background: var(--ck-canvas); }
.fe-row-btn { padding: 0; border: 0; background: none; color: var(--ck-primary-hover); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.fe-scroll { overflow-x: auto; }

.fe-lines { display: grid; gap: 0; }
.fe-line { display: flex; justify-content: space-between; gap: var(--ck-space-3); padding: 0.35rem 0; border-bottom: 1px solid var(--ck-border); font-variant-numeric: tabular-nums; }
.fe-line .fe-amt { white-space: nowrap; text-align: right; }
.fe-line.fe-total { font-weight: 700; border-top: 2px solid var(--ck-ink); border-bottom: 0; }
.fe-line .fe-note { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ck-slate); }
.fe-big { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.fe-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ck-space-3); margin-bottom: var(--ck-space-4); }
.fe-tile { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--ck-space-3) var(--ck-space-4); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); box-shadow: var(--ck-shadow-panel); }
.fe-tile b { font-size: 1.375rem; font-variant-numeric: tabular-nums; }

.fe-rows { display: grid; gap: var(--ck-space-2); }
.fe-repeat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: var(--ck-space-2); align-items: end; }

.fe-warn { background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.fe-warn ul, .fe-bad ul { margin: 0; padding-left: 1.1rem; }

.fe-dialog-backdrop { position: fixed; inset: 0; z-index: var(--ck-z-dialog); display: flex; align-items: flex-start; justify-content: center; padding: var(--ck-space-5) var(--ck-space-3); overflow: auto; background: color-mix(in srgb, var(--ck-ink) 40%, transparent); }
.fe-dialog { width: min(760px, 100%); padding: var(--ck-space-4); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); box-shadow: var(--ck-shadow-panel); }
.fe-dialog h2 { margin: 0 0 var(--ck-space-2); font-size: 1.125rem; font-weight: 600; letter-spacing: normal; }

.fe-refs { margin: 0; padding-left: 1.1rem; }
.fe-refs li { margin-bottom: var(--ck-space-2); }

@media (max-width: 900px) {
    .fe-layout { grid-template-columns: minmax(0, 1fr); }
    .fe-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fe-form { grid-template-columns: minmax(0, 1fr); }
    .fe-repeat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}