/*
 * The components of Bartels Werkt: buttons, chips, tables, cards, lists,
 * forms and overlays. Each component has a Twig macro in
 * templates/_components/ and an example on /design-system.
 *
 * The class names do not reuse Bootstrap names (.btn, .card, .table,
 * .form-control): EasyAdmin styles those, and a shared name would restyle
 * every EasyAdmin button and table. Values come from tokens.css.
 */

/* ---------- Layout inside the surface ---------- */
.layout-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.layout-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.stack {
    display: grid;
    gap: 18px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .layout-two,
    .layout-totals {
        grid-template-columns: minmax(0, 1fr);
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.muted-text {
    color: var(--muted);
    font-size: 12.5px;
}

/* ---------- Buttons ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--surface-2);
    color: var(--text);
}

.button .ic {
    width: 16px;
    height: 16px;
}

.button--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.button--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--on-primary);
}

.button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--primary);
}

.button--ghost:hover {
    background: var(--primary-soft);
    color: var(--primary-hover);
}

.button--sm {
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
}

.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.button--primary:disabled:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.button:disabled:hover,
.button[aria-disabled="true"]:hover {
    background: var(--surface);
}

/* An action that is not in the build yet: dashed, muted, with the label. */
.button--planned,
.button--planned[aria-disabled="true"] {
    border-style: dashed;
    color: var(--muted);
    opacity: 1;
}

/* A disabled button says why, right below it. */
.button-with-reason {
    display: inline-grid;
    gap: var(--space-1);
    justify-items: start;
}

.button-with-reason__reason {
    color: var(--muted);
    font-size: var(--text-xs);
}

.button-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Chips and labels ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px var(--space-2);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.chip--ok { background: var(--ok-soft); color: var(--ok-text); }
.chip--warn { background: var(--warn-soft); color: var(--warn-text); }
.chip--info { background: var(--info-soft); color: var(--info-text); }
.chip--danger { background: var(--danger-soft); color: var(--danger-text); }
.chip--off { background: var(--off-soft); color: var(--off-text); }

/* The "gepland" label on an action that is not in the demo build. */
.planned-label {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    margin-left: var(--space-2);
    border-radius: 6px;
    background: var(--off-soft);
    color: var(--off-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: middle;
}

.button .planned-label {
    margin-left: 2px;
}

/* ---------- Week strip ---------- */
.week-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0;
    padding: var(--space-1) 2px;
    list-style: none;
}

.week-strip__item {
    flex: 1 1 60px;
    min-width: 60px;
}

.week-strip__week {
    display: grid;
    gap: var(--space-1);
    padding: 9px 6px var(--space-2);
    border-radius: var(--radius-tab);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-align: center;
    text-decoration: none;
}

a.week-strip__week:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.week-strip__week--current {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.week-strip__week--empty {
    background: transparent;
    border-style: dashed;
    color: var(--muted);
}

.week-strip__label {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.week-strip__amount {
    font-size: var(--text-sm);
    font-weight: 800;
    white-space: nowrap;
}

.week-strip__amount--concept {
    color: var(--muted);
    font-weight: 600;
}

.week-strip__note {
    margin-top: -3px;
    color: var(--muted);
    font-size: 11px;
}

.week-strip__dot {
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-radius: 50%;
}

.week-strip__dot--ok { background: var(--ok); }
.week-strip__dot--warn { background: var(--warn); }
.week-strip__dot--info { background: var(--info); }
.week-strip__dot--danger { background: var(--danger); }
.week-strip__dot--off { background: var(--off); }

.week-strip-legend {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

/* ---------- Tables ---------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.data-table th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.data-table tbody tr:hover td {
    background: var(--surface-2);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table .data-table__num {
    text-align: right;
    white-space: nowrap;
}

.data-table__strong {
    font-weight: 700;
}

.data-table__link {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.data-table__link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.data-table__sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
}

.data-table__code {
    color: var(--text-soft);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.data-table__concept {
    color: var(--muted);
    font-weight: 600;
}

.data-table .data-table__actions {
    text-align: right;
    white-space: normal;
}

.data-table__actions .button {
    margin: 2px 0 2px var(--space-1);
}

.data-table tfoot td {
    background: var(--surface-2);
    border-top: 2px solid var(--border);
    border-bottom: 0;
    font-weight: 800;
}

.data-table tfoot .data-table__sub {
    font-weight: 600;
}

/* The weeks table: fixed columns so the rows line up at 1440px. */
.data-table--weeks {
    table-layout: fixed;
}

.data-table--weeks .col-week { width: 126px; }
.data-table--weeks .col-lines { width: 72px; }
.data-table--weeks .col-open { width: 112px; }
.data-table--weeks .col-amount { width: 100px; }
.data-table--weeks .col-status { width: 150px; }
.data-table--weeks .col-last { width: 138px; }
.data-table--weeks .col-actions { width: 236px; }

/* The price list and the booking codes: fixed columns, the text column takes the rest. */
.data-table--price-list,
.data-table--booking-codes {
    table-layout: fixed;
}

.data-table--price-list .col-post { width: 72px; }
.data-table--price-list .col-unit { width: 96px; }
.data-table--price-list .col-amount { width: 110px; }
.data-table--price-list .col-code { width: 260px; }
.data-table--price-list .col-actions { width: 132px; }
.data-table--booking-codes .col-code { width: 180px; }
.data-table--booking-codes .col-lines { width: 110px; }
.data-table--booking-codes .col-actions { width: 132px; }

/* The contract data: the longest key ("Standaard boekingscode") sets the column. */
.contract-details .key-values {
    grid-template-columns: minmax(140px, max-content) 1fr;
}

/* The filter of a list: the search, a switch and the button on one line. */
.list-filter {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* The split table: source registration left, billing right, control last. */
.split-table {
    table-layout: fixed;
}

.split-table .col-day { width: 84px; }
.split-table .col-booked { width: 64px; }
.split-table .col-post { width: 196px; }
.split-table .col-code { width: 128px; }
.split-table .col-amount { width: 112px; }
.split-table .col-status { width: 116px; }
.split-table .col-actions { width: 136px; }

.split-table td {
    overflow-wrap: anywhere;
}

.split-table .split-table__group {
    padding: 7px 14px;
    border-bottom: 1px solid var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary-hover);
    font-size: 11.5px;
    letter-spacing: 0.05em;
}

.split-table .split-table__group--source {
    border-bottom-color: var(--border-strong);
    background: var(--off-soft);
    color: var(--text-soft);
}

.split-table .split-table__sep {
    border-left: 2px solid var(--border-strong);
}

/* The description and the post wrap to two lines at most, so rows keep
   their height. */
.split-table__post {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.split-table__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
}

.split-table__who {
    display: inline-block;
    min-width: 28px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--off-soft);
    color: var(--text-soft);
    font-size: var(--text-xs);
    font-weight: 800;
    text-align: center;
}

.split-table__post--proposed {
    color: var(--primary);
}

/* The calculation may wrap: "niet op de bijlage" is wider than the column,
   and the amount cell itself does not wrap. */
.split-table .split-table__calc {
    color: var(--muted);
    font-size: 12.5px;
    white-space: normal;
}

.split-table .chip {
    white-space: normal;
    line-height: 1.35;
    padding: 3px 9px 3px var(--space-2);
}

.split-table .data-table__actions {
    padding-right: 14px;
}

.split-table .data-table__actions .button {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
}

.split-table .data-table__actions > * + * {
    margin-top: 6px;
}

.split-table__planned {
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}

/* ---------- Cards ---------- */
.content-card {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.content-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.content-card__title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 800;
}

.content-card__meta {
    color: var(--muted);
    font-size: var(--text-sm);
}

.content-card__tools {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-left: auto;
}

.content-card__body {
    padding: 18px;
}

.content-card__body--flush {
    padding: 0;
}

/* ---------- Page head inside the content ---------- */
.page-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.page-head__main {
    flex: 1;
    min-width: 0;
}

.page-head__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.page-head__meta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 13.5px;
}

.page-head__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex: none;
    margin-left: auto;
    padding-top: var(--space-1);
}

/* ---------- Lists ---------- */
.key-values {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 6px var(--space-3);
    margin: 0;
    font-size: 13.5px;
}

.key-values dt {
    margin: 0;
    color: var(--muted);
    white-space: nowrap;
}

.key-values dd {
    margin: 0;
    font-weight: 700;
}

.todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.todo-list__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.todo-list__row:last-child {
    border-bottom: 0;
}

.todo-list__badge {
    display: grid;
    place-items: center;
    width: 56px;
    height: 38px;
    border-radius: var(--radius-tab);
    font-size: var(--text-sm);
    font-weight: 800;
    white-space: nowrap;
}

.todo-list__badge--ok { background: var(--ok-soft); color: var(--ok-text); }
.todo-list__badge--warn { background: var(--warn-soft); color: var(--warn-text); }
.todo-list__badge--info { background: var(--info-soft); color: var(--info-text); }
.todo-list__badge--danger { background: var(--danger-soft); color: var(--danger-text); }
.todo-list__badge--off { background: var(--off-soft); color: var(--off-text); }

.todo-list__title {
    font-weight: 700;
}

.todo-list__sub {
    color: var(--muted);
    font-size: 12.5px;
}

.note {
    padding: var(--space-3) 14px;
    border: 1px solid var(--warn-line);
    border-radius: var(--radius-tab);
    background: var(--warn-soft);
    color: var(--warn-text);
    font-size: var(--text-sm);
}

.note__title {
    font-weight: 800;
}

/* The green "klaar" moment: nothing is open, the week can be made final.
   The text takes --ok-text: --ok on --ok-soft is below 4.5:1. */
.note--ok {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok-text);
}

/* A fact without a task, such as the final version of a week. */
.note--info {
    border-color: var(--primary-line);
    background: var(--info-soft);
    color: var(--info-text);
}

/* Tabs inside a card: Open / Akkoord / Alle weken, or the parts of a price list. */
.page-tabs {
    display: flex;
    gap: 2px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border);
}

.page-tabs__tab {
    margin-bottom: -1px;
    padding: var(--space-3) 14px;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.page-tabs__tab:hover {
    color: var(--text);
}

.page-tabs__tab--active,
.page-tabs__tab--active:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.page-tabs__count {
    margin-left: 6px;
    color: var(--muted);
    font-size: var(--text-xs);
}

/* ---------- Forms ---------- */
.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.form-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.form-field--wide {
    grid-column: 1 / -1;
}

.form-field__label {
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 700;
}

.form-field__help {
    color: var(--muted);
    font-size: 12.5px;
}

.field-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.field-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.field-input[readonly] {
    background: var(--surface-2);
    color: var(--text-soft);
}

.field-input--select {
    appearance: none;
    padding-right: 36px;
    background: var(--surface) url("../images/select-arrows-bL1UtqW.svg") no-repeat right 12px center / 15px 15px;
}

.field-input-unit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.field-input-unit .field-input {
    flex: 1;
}

.field-input-unit__unit {
    color: var(--muted);
    font-size: var(--text-sm);
}

.field-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.field-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

/* A switch on a real checkbox: the box is hidden, the track shows the state. */
.field-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-soft);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.field-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.field-toggle__track {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--off);
    flex: none;
}

.field-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-knob);
}

.field-toggle input:checked + .field-toggle__track {
    background: var(--primary);
}

.field-toggle input:checked + .field-toggle__track::after {
    left: 16px;
}

.field-toggle input:focus-visible + .field-toggle__track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.search-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-tab);
    background: var(--surface);
    color: var(--muted);
}

.search-field:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.search-field input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.search-field input:focus {
    outline: none;
}

.search-field input::placeholder {
    color: var(--muted);
}

/* The amount line of the line panel: quantity times price, and the amount. */
.calc-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--text-sm);
}

.calc-line__amount {
    margin-left: auto;
    color: var(--text);
    font-size: var(--text-md);
    font-weight: 800;
}

/* What the mechanic booked, read only, above the billing fields. */
.source-block {
    padding: var(--space-3) 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-tab);
    background: var(--surface-2);
}

.source-block .key-values {
    /* The longest key ("Bedrag volgens oude app") sets the column. */
    grid-template-columns: minmax(96px, max-content) 1fr;
    font-size: var(--text-sm);
}

.section-label {
    margin: 0 0 var(--space-2);
    color: var(--text-soft);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- Overlays ---------- */
.scrim {
    position: absolute;
    inset: var(--space-4) 0 0 var(--rail-width);
    z-index: 5;
    border-radius: var(--radius-surface) 0 0 0;
    background: var(--scrim);
}

.client-chooser {
    position: absolute;
    top: 84px;
    left: var(--space-3);
    z-index: 6;
    width: 400px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-overlay);
}

.client-chooser__title {
    margin: 0;
    padding: var(--space-4) 18px 10px;
    font-size: 17px;
    font-weight: 800;
}

.client-chooser .search-field {
    margin: 0 18px 10px;
}

.client-chooser__list {
    margin: 0;
    padding: 6px var(--space-2) 10px;
    list-style: none;
}

.client-chooser__item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: 10px;
    border-radius: var(--radius-tab);
    color: var(--text);
    text-decoration: none;
}

.client-chooser__item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.client-chooser__item--current,
.client-chooser__item--current:hover {
    background: var(--primary-soft);
}

.client-chooser__item > .ic {
    color: var(--muted);
}

/* The crest colour is runtime data per client: --crest on the element. */
.client-chooser__crest {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--crest, var(--rail));
    color: var(--on-primary);
}

.client-chooser__name {
    display: block;
    font-weight: 800;
}

.client-chooser__context {
    color: var(--muted);
    font-size: 12.5px;
}

.client-chooser__context .chip {
    margin-left: 6px;
    padding: 0 var(--space-2);
    font-size: 11px;
    line-height: 1.5;
    vertical-align: middle;
}

.client-chooser__foot {
    margin: 0;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-sm);
}

/* Slide-over panel: one line while the table stays in view. */
.slide-panel {
    position: absolute;
    top: var(--space-4);
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    width: 480px;
    border-left: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}

.slide-panel__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 18px 22px var(--space-3);
    border-bottom: 1px solid var(--border);
}

.slide-panel__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.slide-panel__sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
}

.slide-panel__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.slide-panel__close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.slide-panel__body {
    display: grid;
    flex: 1;
    gap: 18px;
    align-content: start;
    overflow: auto;
    padding: 18px 22px;
}

.slide-panel__foot {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* ---------- Line panel ---------- */
/* The panel of one line over the week page. It is fixed in the viewport,
   so a long week table scrolls behind it and the foot stays in view. */
.line-panel .scrim,
.line-panel .slide-panel {
    position: fixed;
}

/* Above the sticky page top (z-index 10): the panel spans the whole surface. */
.line-panel .scrim {
    z-index: 11;
}

.line-panel .slide-panel {
    z-index: 12;
}

/* The scrim is a link back to the week page; the link itself has no box. */
.line-panel__scrim {
    display: contents;
}

.field-input--area {
    height: auto;
    min-height: 64px;
    padding: var(--space-2) var(--space-3);
    resize: vertical;
}

.form-field__error {
    color: var(--danger-text);
    font-size: 12.5px;
    font-weight: 700;
}

/* ---------- Project pages (until the week page replaces them) ---------- */
.project-intro,
.dashboard-intro {
    max-width: 70ch;
    margin: 0 0 18px;
    color: var(--muted);
}

.project-group,
.project-tabs {
    margin-bottom: 18px;
}

.project-group__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: 800;
}

.project-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
    gap: var(--space-3) var(--space-6);
    margin: 0 0 18px;
}

.project-header dt {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.project-header dd {
    margin: 0;
    font-weight: 700;
}

.attachment-number {
    text-align: right;
    white-space: nowrap;
}

.attachment-nowrap {
    white-space: nowrap;
}

.attachment-code-description,
.attachment-reason {
    display: block;
    color: var(--muted);
}

.attachment-line--needs-check > td {
    background-color: var(--warn-soft);
}

.attachment-line--excluded > td {
    color: var(--muted);
    opacity: 0.7;
}

.attachment-line--corrected > td {
    background-color: var(--info-soft);
}

.attachment-totals__total > th {
    border-top: 2px solid currentColor;
}

.attachment-proposal {
    font-style: italic;
    color: var(--muted);
}

/* The lines table has ten columns: keep it inside its card and compact.
   The datagrid keeps every cell on one line; here text cells wrap. The
   line text also wraps inside a long list of numbers without spaces. */
.attachment-lines-wrap {
    overflow-x: auto;
}

.attachment-lines {
    font-size: var(--text-sm);
}

.attachment-lines td,
.attachment-lines th {
    padding: 0.55rem 0.6rem;
    vertical-align: top;
}

.datagrid.attachment-lines td:not(.attachment-number):not(.attachment-nowrap) {
    white-space: normal;
}

.datagrid.attachment-lines td.attachment-text {
    overflow-wrap: anywhere;
}

.attachment-lines .attachment-code-description {
    max-width: 240px;
    font-size: var(--text-xs);
}

.attachment-lines .attachment-correct {
    white-space: nowrap;
}

/* ---------- Profile: landing page picker ---------- */
.landing-settings-intro {
    max-width: 52ch;
    margin: 0 0 18px;
    color: var(--muted);
}

.landing-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.landing-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.landing-option:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.landing-option:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The highlight follows the checked radio, without JavaScript. */
.landing-option:has(.landing-option-input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.landing-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.landing-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--primary-soft);
    color: var(--primary-hover);
}

.landing-option-label {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--text);
}

.landing-option-check {
    flex: 0 0 auto;
    color: var(--primary-hover);
    opacity: 0;
}

.landing-option:has(.landing-option-input:checked) .landing-option-check {
    opacity: 1;
}

.landing-settings-actions {
    margin-top: 22px;
}

/* ---------- client-switcher: the button that opens the client chooser ---------- */
.client-switcher--button {
    width: calc(100% - 2 * var(--space-3));
    cursor: pointer;
}

.client-switcher--button:hover,
.client-switcher--button[aria-expanded="true"] {
    background: var(--rail-active);
}

.client-switcher__switch {
    display: inline-flex;
    flex: none;
    color: var(--rail-muted);
}

@media (max-width: 1100px) {
    .client-switcher--button {
        width: auto;
    }

    .client-switcher__switch {
        display: none;
    }
}

/* ---------- client-chooser: the live chooser in the shell ---------- */
.client-chooser--fixed {
    position: fixed;
}

.client-chooser__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
}

.client-chooser__close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.client-chooser__close:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* A row is a POST form; its button looks like the row. */
.client-chooser__list form {
    margin: 0;
}

button.client-chooser__item {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.client-chooser__item--current {
    background: var(--primary-soft);
}

.client-chooser__crest {
    font-size: var(--text-xs);
    font-weight: 800;
}

.client-chooser__empty {
    margin: 0;
    padding: 0 18px 12px;
    color: var(--muted);
    font-size: var(--text-sm);
}

/* The scrim of the live shell starts at the collapsed rail. */
@media (max-width: 1100px) {
    .shell > .scrim {
        left: var(--rail-width-collapsed);
    }
}

/* ---------- dashboard and weeks: text in an empty card ---------- */
.dashboard-empty {
    margin: 0;
    color: var(--muted);
}

/* ---------- weeks table: scroll sideways when the surface is narrow ---------- */
.content-card__body:has(> .data-table--weeks) {
    overflow-x: auto;
}

.data-table--weeks {
    min-width: 1060px;
}

/* ---------- Week page ---------- */
/* The week page stacks the head, the lines and the totals with the gap of
   the surface. */
.week-page {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.week-page__empty {
    margin: 0;
    padding: var(--space-4) 18px;
    color: var(--muted);
}

/* The form of "Bijlage definitief maken" sits in the row of head actions. */
.week-finalise {
    display: inline-flex;
    margin: 0;
}