:root {
        --dui-card: #fff;
        --dui-border: rgb(3 7 18 / .08);
        --dui-hover: rgb(3 7 18 / .035);
        --dui-muted: var(--gray-500);
        --dui-strong: var(--gray-950);
        --dui-radius: 1rem;              /* cards and sections */
        --dui-radius-md: .7rem;          /* inner panels, segmented switches */
        --dui-radius-control: .5rem;     /* buttons, inputs, list rows */
        --dui-radius-sm: .375rem;        /* small parts */
        --dui-shadow: 0 1px 2px rgb(0 0 0 / .04);
    }
    .dark {
        --dui-card: var(--gray-900);
        --dui-border: rgb(255 255 255 / .08);
        --dui-hover: rgb(255 255 255 / .04);
        --dui-strong: #fff;
        --dui-shadow: 0 1px 0 rgb(255 255 255 / .03) inset;
    }

    /* page title: the size of the dashboard and settings headings, tight */
    .fi-header-heading { font-size: 1.625rem; line-height: 2rem; letter-spacing: -.02em; }
    .fi-header-subheading { font-size: .9375rem; line-height: 1.4; color: var(--gray-500); }
    /* decision 10.02: the head's actions stay on the right, also when a long title or text pushes them to a line of their own */
    @media (min-width: 640px) { .fi-header > .fi-header-actions-ctn { margin-inline-start: auto; } }
    @media (max-width: 639px) { .fi-header-heading { font-size: 1.375rem; line-height: 1.75rem; } }

    /* cards: sections, tables, list tabs, widgets: one surface */
    .fi-section:not(.fi-section-not-contained):not(.fi-aside),
    .fi-section.fi-aside > .fi-section-content-ctn,
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat {
        border-radius: var(--dui-radius);
        background-color: var(--dui-card);
        box-shadow: var(--dui-shadow), 0 0 0 1px var(--dui-border);
    }
    .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-compact { border-radius: var(--dui-radius, .85rem); }
    .fi-section-header-heading { font-size: .9375rem; font-weight: 650; letter-spacing: -.005em; }
    .fi-section-header-description { font-size: .8125rem; }
    .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn,
    .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer,
    .fi-ta-ctn .fi-ta-header, .fi-ta-header-toolbar, .fi-ta-footer, .fi-ta-filter-indicators,
    .fi-ta-table > tbody, .fi-ta-table > thead, .fi-ta-row { border-color: var(--dui-border) !important; }
    .fi-ta-table > tbody > tr + tr, .fi-ta-table > :is(thead, tbody) { border-color: var(--dui-border) !important; }

    /* tables: column names in small capitals like the sidebar areas, a soft row hover */
    .fi-ta-table > thead > tr, .fi-ta-table > thead > tr > th { background-color: transparent; }
    .fi-ta-header-cell, .fi-ta-header-cell .fi-ta-header-cell-sort-btn {
        font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500);
    }
    .dark .fi-ta-header-cell, .dark .fi-ta-header-cell .fi-ta-header-cell-sort-btn { color: var(--gray-400); }
    .fi-ta-header-cell { padding-block: .65rem; }
    /* every list of the app (13.11.2026): the same line height for a one-line record, values in the middle of the line,
       figures in tabular numbers and headings on one line, so a list of costs sits like the list of vehicles. A record
       with two lines (title and note) is as much taller as its second line */
    .fi-ta-table > tbody > tr { height: 3.25rem; }
    .fi-ta-table > tbody > tr > td { vertical-align: middle; }
    .fi-ta-table > tbody .fi-ta-text { padding-block: .5rem; }
    .fi-ta-table .fi-ta-cell { font-variant-numeric: tabular-nums; }
    .fi-ta-table .fi-ta-header-cell { white-space: nowrap; }
    .fi-ta-row.fi-clickable:hover, .fi-ta-row:hover { background-color: var(--dui-hover); }
    .fi-ta-row.fi-selected { background-color: color-mix(in oklab, var(--primary-500) 6%, transparent); }

    /* The bar above a list (10.11.2026). It must not look like the search in the top bar a few centimetres above it: the
       list's own search stands on the left, without a frame, and names the list ("Rechnungen durchsuchen"); "Filter"
       and "Spalten" are quiet named buttons on the right; the filter count shows only when a filter is set. */
    .fi-ta-header-toolbar { gap: .5rem; padding-block: .5rem; padding-inline: .75rem; align-items: center; }
    .fi-ta-header-toolbar > div:not(.fi-ta-actions):not(.fi-dropdown) { display: contents; }
    .fi-ta-header-toolbar > .fi-ta-actions { order: 0; flex: 1 1 auto; min-width: 0; }
    .fi-ta-header-toolbar .fi-ta-search-field { order: -1; flex: 0 1 22rem; min-width: 12rem; }
    .fi-ta-header-toolbar :is(.fi-dropdown, .fi-modal, .fi-ta-filters-trigger-action-ctn) { order: 1; }
    .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp {
        background-color: transparent; box-shadow: none; border-radius: var(--dui-radius-control, .5rem);
        transition: background-color .15s ease-out, box-shadow .15s ease-out;
    }
    .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp:hover { background-color: var(--dui-hover); }
    .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp:focus-within { background-color: var(--dui-hover); box-shadow: inset 0 0 0 1px var(--primary-500); }
    .fi-ta-header-toolbar .fi-ta-search-field .fi-input { font-size: .875rem; }
    .fi-ta-header-toolbar .fi-ta-search-field .fi-input::placeholder { color: var(--gray-500); }
    .dark .fi-ta-header-toolbar .fi-ta-search-field .fi-input::placeholder { color: var(--gray-400); }
    .fi-btn.dl-tool {
        gap: .375rem; padding: .375rem .625rem; background-color: transparent; box-shadow: none; font-size: .8125rem; font-weight: 500;
        color: var(--gray-600); border-radius: var(--dui-radius-control, .5rem);
    }
    .dark .fi-btn.dl-tool { color: var(--gray-300); }
    .fi-btn.dl-tool:hover, .fi-btn.dl-tool[aria-expanded="true"] { background-color: var(--dui-hover); color: var(--dui-strong, var(--gray-950)); }
    .fi-btn.dl-tool > .fi-icon { width: 1rem; height: 1rem; color: currentColor; }
    .fi-btn.dl-tool[data-active="false"] .fi-btn-badge-ctn, .fi-btn.dl-tool[data-active="false"] .fi-badge { display: none; }
    .fi-btn.dl-tool[data-active="true"] { color: var(--primary-600); background-color: color-mix(in oklab, var(--primary-500) 8%, transparent); }
    .dark .fi-btn.dl-tool[data-active="true"] { color: var(--primary-400); }
    .fi-btn.dl-tool .fi-btn-badge-ctn { position: static; transform: none; margin-inline-start: .125rem; }
    @media (max-width: 640px) {
        .fi-ta-header-toolbar .fi-ta-search-field { flex: 1 1 100%; }
    }

    /* columns only for very wide screens (WideScreenColumns): hidden below 137.5rem (2200 px) */
    @media (max-width: 137.49rem) { .fi-ta-table :is(th, td).dl-wide { display: none; } }
    /* columns from 96rem up (WideScreenColumns::roomy): on a laptop the vehicle list fits without scrolling sideways
       and the name gets the room (review 2026-11, M8); columns from 115rem up (::large): a full 1080p screen. Below
       these widths the fixed columns left the vehicle name no room (13.11.2026) */
    @media (max-width: 95.99rem) { .fi-ta-table :is(th, td).dl-roomy { display: none; } }
    /* what a hidden roomy column holds, shown under another value instead (invoice list: the vehicle under the customer) */
    @media (min-width: 96rem) { .dl-narrow { display: none; } }
    .dphone .dl-narrow { display: none; }
    @media (max-width: 114.99rem) { .fi-ta-table :is(th, td).dl-large { display: none; } }

    /* A strip of states (x-status-strip, 10.11.2026): each state a small name above its value, hairlines between them.
       The value is a Filament badge made flat: its icon keeps the colour of the meaning, the text is neutral. */
    .stt { display: flex; flex-wrap: wrap; gap: .5rem 0; min-width: 0; }
    .stt-item { display: grid; gap: .125rem; align-content: start; min-width: 0; padding-inline: .875rem; border-inline-start: 1px solid var(--dui-border); }
    .stt-item:first-child { padding-inline-start: 0; border-inline-start: 0; }
    .stt-label { font-size: .6875rem; line-height: 1rem; color: var(--gray-500); white-space: nowrap; }
    .dark .stt-label { color: var(--gray-400); }
    .stt-value { display: flex; align-items: center; min-width: 0; min-height: 1.25rem; }
    .stt-value .fi-badge { padding: 0; min-height: 0; gap: .3125rem; background: none; box-shadow: none; border-radius: var(--dui-radius-sm, .25rem); font-size: .8125rem !important; line-height: 1.25rem; font-weight: 600; max-width: 100%; }
    .stt-value .fi-badge .fi-badge-label-ctn, .stt-value .fi-badge .fi-badge-label { color: var(--dui-strong, var(--gray-950)); }
    .stt-value .fi-badge > .fi-icon { width: 1rem; height: 1rem; }
    .stt-value button.fi-badge:hover .fi-badge-label, .stt-value button.fi-badge:focus-visible .fi-badge-label { text-decoration: underline; text-underline-offset: 2px; }
    @media (max-width: 640px) {
        .stt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem .75rem; }
        .stt-item, .stt-item:first-child { padding-inline: 0; border-inline-start: 0; }
    }

    /* no typewriter font anywhere: numbers stay aligned with tabular figures */
    .fi-font-mono, [class*="fi-font-mono"] { font-family: inherit !important; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

    /* the tabs above a list (In stock, Customers …): the segmented switch of the dashboard and the task board, on the left */
    /* the entries are found at any depth: tabs of a form or relation manager sit in a list of their own inside the row */
    :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) {
        display: inline-flex; width: max-content; max-width: 100%; margin-inline: 0 auto; padding: 3px; gap: 2px;
        border-radius: calc(var(--dui-seg-item-r) + 3px); background-color: var(--dui-hover); box-shadow: inset 0 0 0 1px var(--dui-border);
    }
    :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item {
        flex: none; padding: .38rem .8rem; border-radius: var(--dui-seg-item-r); font-size: .8125rem; font-weight: 600; color: var(--gray-600); background: none; white-space: nowrap;
    }
    .dark :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item { color: var(--gray-300); }
    :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item .fi-tabs-item-label { color: inherit; }
    :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item:hover { color: var(--gray-950); background: none; }
    .dark :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item:hover { color: #fff; }
    :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item.fi-active {
        background: #fff; color: var(--gray-950); box-shadow: 0 1px 2px rgb(0 0 0 / .14);
    }
    .dark :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item.fi-active { background: rgb(255 255 255 / .14); color: #fff; }
    :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item > .fi-icon { width: 1rem; height: 1rem; color: inherit; }
    /* phones (12.11.2026): the entries become chips that wrap. One outline around two or three rows looked like a
       broken pill, and a row that scrolls sideways hides entries; as chips every entry is in sight and easy to hit */
    @media (max-width: 639px) {
        :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) {
            display: flex; flex-wrap: wrap; width: auto; max-width: 100%; overflow: visible; margin-inline: 0; padding: 0; gap: .375rem;
            border-radius: 0; background: none; box-shadow: none;
        }
        :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item,
        :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item:hover {
            min-height: 2.5rem; padding: .375rem .875rem; background: var(--dui-hover); box-shadow: inset 0 0 0 1px var(--dui-border);
        }
        :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item.fi-active,
        :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item.fi-active:hover { background: var(--gray-950); color: #fff; box-shadow: none; }
        .dark :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item.fi-active,
        .dark :is(:is(.fi-page-content, .fi-resource-relation-manager) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs:not(.fi-vertical) > .fi-tabs:not(.fi-contained), .fi-tabs.fi-page-sub-navigation-tabs) .fi-tabs-item.fi-active:hover { background: #fff; color: var(--gray-950); }
    }

    /* the same switch for pages with their own markup (calendar views …) */
    /* switches and tab rows (08.11.2026): the outline follows the tabs inside it, so the first and last tab sit exactly
       in its curve in every theme (Klar: pills; square themes: square) */
    :root { --dui-seg-item-r: var(--th-btn-radius, var(--dui-radius-control, .5rem)); }
    /* menus (company menu, user menu, ⋮): corners that fit their entries, an edge and a shadow so they stand above the
       page; compact entries */
    .fi-body .fi-dropdown-panel { border-radius: calc(var(--dui-radius-control, .5rem) + 4px); box-shadow: 0 0 0 1px var(--dui-border), 0 12px 32px -10px rgb(0 0 0 / .28); }
    .dark .fi-body .fi-dropdown-panel, .fi-body.dark .fi-dropdown-panel { box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 16px 40px -12px rgb(0 0 0 / .7); }
    .fi-body .fi-dropdown-list { padding: 4px; }
    .fi-body .fi-dropdown-list-item { border-radius: var(--dui-radius-control, .5rem); padding: .4375rem .625rem; }
    .dui-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: calc(var(--dui-seg-item-r) + 3px); background-color: var(--dui-hover); box-shadow: inset 0 0 0 1px var(--dui-border); max-width: 100%; overflow-x: auto; }
    .dui-seg > button, .dui-seg > a {
        all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: none;
        padding: .32rem .75rem; border-radius: var(--dui-seg-item-r); font-size: .8125rem; font-weight: 600; color: var(--gray-600); transition: background-color .15s, color .15s;
    }
    .dark .dui-seg > button, .dark .dui-seg > a { color: var(--gray-300); }
    .dui-seg > :is(button, a):hover { color: var(--gray-950); }
    .dark .dui-seg > :is(button, a):hover { color: #fff; }
    .dui-seg > :is(button, a):is([aria-pressed="true"], .is-on) { background: #fff; color: var(--gray-950); box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
    .dark .dui-seg > :is(button, a):is([aria-pressed="true"], .is-on) { background: rgb(255 255 255 / .14); color: #fff; }
    .dui-seg > :is(button, a):focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
    .dui-seg svg { width: 1.05rem; height: 1.05rem; }

    /* grouped toggle buttons (Leasing / Finanzierung, Rate berechnen / Wunschrate prüfen …): no frame around the group and
       no line between the buttons; the chosen button stands out by its fill */
    .fi-btn-group.fi-fo-toggle-buttons { box-shadow: none; }
    /* light: a button that is not chosen gets a grey surface, so it still reads as a button (dark has its own fill) */
    :root:not(.dark) .fi-btn-group.fi-fo-toggle-buttons > .fi-btn.fi-btn-group-btn[aria-pressed="false"] { background-color: var(--gray-100); }
    :root:not(.dark) .fi-btn-group.fi-fo-toggle-buttons > .fi-btn.fi-btn-group-btn[aria-pressed="false"]:hover { background-color: var(--gray-200); }
    .fi-btn-group.fi-fo-toggle-buttons > .fi-btn.fi-btn-group-btn.fi-btn { box-shadow: none; }

    /* Vehicle list, table view: one line per car, the same row height and the same column widths in every tab (fixed
       layout, widths in per cent so a 1080p and a 1440p screen are filled evenly); long values end with "…"; figures in
       tabular numbers. Below 66rem the table scrolls inside its frame. */
    .dveh-table .fi-ta-table { table-layout: fixed; width: 100%; min-width: 88rem; }
    @media (max-width: 114.99rem) { .dveh-table .fi-ta-table { min-width: 72rem; } } /* without colour and Stammnummer (dl-large) */
    @media (max-width: 95.99rem) { .dveh-table .fi-ta-table { min-width: 58rem; } } /* without days in stock and location as well (dl-roomy) */
    .dveh-table .fi-ta-table > tbody > tr { height: 3.25rem; }
    .dveh-table .fi-ta-table > tbody > tr > td { vertical-align: middle; }
    .dveh-table .fi-ta-table > tbody .fi-ta-text { padding-block: .5rem; }
    .dveh-table .fi-ta-cell { font-variant-numeric: tabular-nums; }
    .dveh-table .fi-ta-cell > .fi-ta-col, .dveh-table .fi-ta-cell .fi-ta-text { min-width: 0; }
    .dveh-table .fi-ta-cell :is(.fi-ta-text-item, .fi-ta-text-item-label) { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dveh-table .fi-ta-header-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* the first and the last column of a list with fixed widths (13.11.2026): the frame's wider padding at both ends
       came out of the column's own width, so a price at the end was cut ("CHF 35'99…") while the same column fitted in
       the middle. Their width now means room for the content, like everywhere else in the line */
    :is(.dveh-table, .dlist) .fi-ta-table > :is(thead, tbody) > tr > :is(th, td):is(:first-of-type, :last-of-type):not(.fi-ta-selection-cell, .fi-ta-actions-header-cell):not(:has(> .fi-ta-actions)) { box-sizing: content-box; }
    .dveh-status, .dveh-colour { display: flex; align-items: center; gap: .5rem; min-width: 0; white-space: nowrap; }
    .dveh-status .fi-badge { flex: none; }
    .dveh-swatch { flex: none; width: .75rem; height: .75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
    .dark .dveh-swatch { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
    .dveh-colour-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .875rem; }
    .dveh-step { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .875rem; color: var(--gray-500); }
    .dark .dveh-step { color: var(--gray-400); }

    /* Vehicle list, tab "Papers" (13.11.2026): what is missing of the purchase and of the sale per car, as words in
       the line; a line may grow to two when several papers are open. The small notice under the page title opens it. */
    .dveh-papers .fi-ta-table { min-width: 63rem; }
    @media (max-width: 104.99rem) { .dveh-papers .fi-ta-table { min-width: 58rem; } }
    .dveh-papers .fi-ta-table > thead > tr > th:last-child { width: 9.5rem; }
    .dveh-papers .dveh-papers-hint { display: none; }
    @media (min-width: 105rem) { .dveh-papers .dveh-papers-hint { display: table-cell; } }
    .vpp-label { display: none; }
    /* on a phone or tablet (papers are often photographed with it), below 80rem: one small card per car instead of a
       table that scrolls sideways: name and status, the file number, what is missing of purchase and sale, the upload */
    @media (max-width: 79.99rem) {
        .dveh-papers .fi-ta-table, .dveh-papers .fi-ta-table > tbody { display: block; width: 100%; min-width: 0; }
        .dveh-papers .fi-ta-table > thead { display: none; }
        .dveh-papers .fi-ta-table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: .25rem; height: auto; padding: .75rem 1rem; }
        .dveh-papers .fi-ta-table > tbody > tr > td { display: block; box-sizing: border-box; width: auto !important; min-width: 0; padding: 0; }
        .dveh-papers .fi-ta-table > tbody > tr > td :is(.fi-ta-col, .fi-ta-text, .fi-ta-actions) { padding: 0; }
        .dveh-papers .fi-ta-cell-vehicle\.make { grid-area: 1 / 1; }
        .dveh-papers .fi-ta-cell-main-status { grid-area: 1 / 2; }
        .dveh-papers .fi-ta-cell-number { grid-area: 2 / 1 / 2 / -1; }
        .dveh-papers .fi-ta-cell-number :is(.fi-ta-text-item, .fi-ta-text-item-label) { font-size: .8125rem; }
        .dveh-papers .fi-ta-cell-papers-purchase { grid-area: 3 / 1 / 3 / -1; }
        .dveh-papers .fi-ta-cell-papers-sale { grid-area: 4 / 1 / 4 / -1; }
        .dveh-papers .fi-ta-table > tbody > tr > td.dveh-papers-hint { grid-area: 5 / 1 / 5 / -1; }
        .dveh-papers .fi-ta-table > tbody > tr > td:has(> .fi-ta-actions) { grid-area: 6 / 1 / 6 / -1; padding-top: .375rem; }
        .dveh-papers .fi-ta-actions { justify-content: flex-start; }
        .dveh-papers .vpp { padding-block: .125rem; }
        .dveh-papers .vpp.is-empty { display: none; }
        .dveh-papers .vpp-label { display: inline; flex: none; width: 4.25rem; font-size: .8125rem; color: var(--gray-500); }
        .dark .dveh-papers .vpp-label { color: var(--gray-400); }
    }
    .dveh-papers .fi-ta-table > tbody > tr > td:has(> .fi-ta-actions) { padding-block: .5rem; }
    .vpp { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-width: 0; padding-inline: .75rem; }
    .vpp .fi-badge { flex: none; max-width: 100%; }
    .vpp-ok { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; font-size: .8125rem; color: var(--gray-500); }
    .vpp-ok .fi-icon { flex: none; width: 1rem; height: 1rem; color: var(--success-600); }
    .vpp-hint { font-size: .8125rem; color: var(--gray-500); }
    .vpp-none { color: var(--gray-400); }
    .dark :is(.vpp-ok, .vpp-hint) { color: var(--gray-400); }
    .dark .vpp-ok .fi-icon { color: var(--success-400); }
    .dark .vpp-none { color: var(--gray-500); }
    .dveh-papers-note { display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; font-size: .875rem; color: var(--gray-600); text-align: start; }
    .dveh-papers-note .fi-icon { flex: none; width: 1rem; height: 1rem; color: var(--warning-600); }
    .dveh-papers-note-link { font-weight: 500; color: var(--primary-600); }
    .dveh-papers-note:hover .dveh-papers-note-link, .dveh-papers-note:focus-visible .dveh-papers-note-link { text-decoration: underline; }
    .dark .dveh-papers-note { color: var(--gray-300); }
    .dark .dveh-papers-note .fi-icon { color: var(--warning-400); }
    .dark .dveh-papers-note-link { color: var(--primary-400); }

    /* Warranty product, "Durations and prices" (13.11.2026): one line per duration with the three amounts equally wide
       (fixed layout; without it the column under the shortest heading cut its amount). Narrow dialogs keep Filament's
       stacked rows. */
    @container (min-width: 36rem) {
        .dwp-durations > table { table-layout: fixed; }
        .dwp-durations > table > thead > tr > th.fi-fo-table-repeater-empty-header-cell { width: 2.75rem; }
        .dwp-durations > table > tbody > tr > td { padding: .5rem .625rem; }
    }

    /* Lists with one line per record (invoices, credit notes, receipts, reminders, 08.11.2026): the same column widths on
       every page of the list (fixed layout, widths in per cent so 1080p and 1440p screens are filled evenly), one row
       height, long values end with "…", figures in tabular numbers; below 64rem the table scrolls in its frame. */
    .dlist .fi-ta-table { table-layout: fixed; width: 100%; min-width: 65rem; }
    .dlist .fi-ta-table > tbody > tr { height: 3.25rem; }
    .dlist .fi-ta-table > tbody > tr > td { vertical-align: middle; }
    .dlist .fi-ta-table > tbody .fi-ta-text { padding-block: .5rem; }
    .dlist .fi-ta-cell { font-variant-numeric: tabular-nums; }
    .dlist .fi-ta-cell > .fi-ta-col, .dlist .fi-ta-cell .fi-ta-text { min-width: 0; }
    .dlist .fi-ta-cell :is(.fi-ta-text-item, .fi-ta-text-item-label) { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dlist .fi-ta-header-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* a column marked wrap() (the customer: the list's identity) keeps its whole value on up to two lines */
    .dlist .fi-ta-cell .fi-ta-text-item.fi-wrapped { white-space: normal; overflow-wrap: break-word; }
    .dlist .fi-ta-cell .fi-badge { max-width: 100%; }
    .dlist .fi-ta-actions { flex-wrap: nowrap; justify-content: flex-end; }
    .dlist .fi-ta-actions-header-cell { width: 6.5rem; }
    .dlist .dlist-tag { margin-inline-start: .375rem; padding: .0625rem .375rem; border-radius: var(--dui-radius-sm, .25rem); background: var(--dui-hover); color: var(--dui-muted); font-size: .75rem; font-weight: 500; }
    .dlist .fi-ta-selection-cell { width: 3rem; }

    /* Contacts (13.11.2026): initials as on a phone's contact list, a circle for a person, a rounded square for a
       company, the name beside it; the address has its own column, so the list uses the width of the screen. */
    .pcn { display: flex; align-items: center; gap: .75rem; min-width: 0; }
    .pcn-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px;
        background: var(--gray-200); color: var(--gray-700); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; line-height: 1; user-select: none; }
    .pcn-av.is-company { border-radius: .5rem; }
    .dark .pcn-av { background: var(--gray-700); color: var(--gray-100); }
    .pcn-name { min-width: 0; font-weight: 500; color: var(--dui-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pcn-list .fi-ta-table { min-width: 60rem; }
    .pcn-list .fi-ta-table > tbody > tr { height: 3.5rem; }
    .pcn-roles { padding: .5rem .75rem; min-width: 0; }
    @media (max-width: 47.99rem) { .pcn-av { width: 2rem; height: 2rem; font-size: .75rem; } .pcn-roles { padding: 0; } }

    /* "Design the contract" (decisions 9.74, 9.76): the styles to start from, the building blocks with their
       settings, and the preview beside them. The preview stays in view while the blocks are worked on; the A4 pages
       are scaled to the column (the frames are 860px wide, scaled from their corner). */
    .ctp-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
    .ctp-side { min-width: 0; }

    .ctp-styles { display: flex; flex-direction: column; gap: .625rem; }
    .ctp-styles-head { display: flex; align-items: baseline; gap: .75rem; }
    .ctp-styles-title { font-size: .875rem; font-weight: 600; color: var(--dui-strong); }
    .ctp-styles-note { font-size: .8125rem; color: var(--dui-muted); }
    .ctp-styles-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
    .ctp-style { display: flex; flex-direction: column; align-items: stretch; gap: .625rem; padding: .75rem; text-align: start;
        border-radius: var(--dui-radius, .75rem); background: var(--dui-card); box-shadow: 0 0 0 1px var(--dui-border);
        transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease; cursor: pointer; }
    .ctp-style:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--dui-border), var(--dui-shadow, 0 4px 12px rgb(0 0 0 / .08)); }
    .ctp-style:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
    .ctp-style.is-current { box-shadow: 0 0 0 2px var(--primary-500); }
    .ctp-style:disabled { cursor: default; }
    .ctp-style-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
    .ctp-style-name { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--dui-strong); }
    .ctp-style-check { width: 1rem; height: 1rem; color: var(--primary-600); }
    .dark .ctp-style-check { color: var(--primary-400); }
    .ctp-style-desc { font-size: .75rem; line-height: 1.4; color: var(--dui-muted); }

    /* the small drawing of a first page: lines and boxes in the text colour, the title line in the accent */
    .ctp-mini { display: flex; flex-direction: column; gap: .3rem; height: 5.5rem; padding: .5rem .625rem; overflow: hidden;
        border-radius: var(--dui-radius-sm, .375rem); background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--dui-border); }
    .dark .ctp-mini { background: rgb(255 255 255 / .04); }
    .ctp-mini span { display: block; }
    .ctp-mini .m-title { width: 45%; height: .3rem; border-radius: 999px; background: var(--primary-500); opacity: .75; }
    .ctp-mini .m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; }
    .ctp-mini .m-grid span, .ctp-mini .m-tiles span { height: .5rem; border-radius: 2px; background: var(--gray-300); }
    .ctp-mini .m-rows span, .ctp-mini .m-list span, .ctp-mini .m-text span { height: .18rem; margin-top: .22rem; border-radius: 999px; background: var(--gray-300); }
    .ctp-mini .m-rows span:nth-child(odd) { width: 100%; } .ctp-mini .m-rows span:nth-child(even) { width: 100%; opacity: .6; }
    .ctp-mini .m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .ctp-mini .m-cols span { height: 1rem; border-radius: 2px; background: linear-gradient(var(--gray-300) 0 .18rem, transparent .18rem .36rem, var(--gray-300) .36rem .54rem, transparent .54rem .72rem, var(--gray-300) .72rem .9rem, transparent .9rem); }
    .ctp-mini .m-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: .5rem; }
    .ctp-mini .m-text span:last-child { width: 70%; }
    .ctp-mini .m-text.dense span { margin-top: .14rem; }
    .ctp-mini .m-line { height: .18rem; width: 85%; border-radius: 999px; background: var(--gray-400); }
    .ctp-mini .m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
    .ctp-mini .m-tiles span:last-child { background: var(--primary-500); opacity: .45; }
    .dark .ctp-mini .m-grid span, .dark .ctp-mini .m-tiles span:not(:last-child), .dark .ctp-mini .m-rows span, .dark .ctp-mini .m-list span, .dark .ctp-mini .m-text span { background: var(--gray-600); }
    .dark .ctp-mini .m-cols span { background: linear-gradient(var(--gray-600) 0 .18rem, transparent .18rem .36rem, var(--gray-600) .36rem .54rem, transparent .54rem .72rem, var(--gray-600) .72rem .9rem, transparent .9rem); }
    .dark .ctp-mini .m-line { background: var(--gray-500); }
    @media (max-width: 39.99rem) {
        .ctp-styles-row { grid-template-columns: 1fr; }
        .ctp-style { flex-direction: row; align-items: center; }
        .ctp-mini { flex: none; width: 4.5rem; height: 4.5rem; }
    }

    /* the building blocks: name, when it is printed, and whether it was adjusted */
    .ctb .ctb-name { font-weight: 500; }
    .ctb-when { margin-inline-start: .625rem; font-size: .75rem; font-weight: 400; color: var(--dui-muted); }
    .ctb-tag { display: inline-flex; align-items: center; margin-inline-start: .5rem; padding: 0 .4rem; min-height: 1.125rem; border-radius: 999px;
        font-size: .6875rem; font-weight: 500; color: var(--primary-700); background: color-mix(in srgb, var(--primary-500) 12%, transparent);
        animation: ctb-in 200ms ease-out; }
    .dark .ctb-tag { color: var(--primary-300); }
    @keyframes ctb-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
    /* on a phone the name needs the room: no drag handle (the arrows move), no icon, "customised" as a dot */
    @media (max-width: 39.99rem) {
        .ctb-when, .ctb .fi-fo-builder-item-header-icon, .ctb .fi-fo-builder-item-header-start-actions li:has(> [x-sortable-handle]) { display: none; }
        .ctb-tag { width: .5rem; min-height: .5rem; height: .5rem; padding: 0; overflow: hidden; font-size: 0; vertical-align: middle; background: var(--primary-500); }
    }
    .ctb .ctb-note { color: var(--dui-muted); font-size: .8125rem; }
    /* the head of the page and the numbering: one quiet card above the blocks (9.79) */
    .ctf-general { padding: .75rem 1rem; border-radius: var(--dui-radius, .75rem); background: var(--dui-card); box-shadow: 0 0 0 1px var(--dui-border); }

    .ctb.ctb-break .ctb-name { color: var(--dui-muted); }
    .ctb .ctb-look .fi-fo-toggle-buttons-btn-ctn { flex-wrap: wrap; }

    /* the preview */
    .ctp { display: flex; flex-direction: column; gap: .5rem; }
    .ctp-bar { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; }
    .ctp-title { font-size: .875rem; font-weight: 600; color: var(--dui-strong); }
    .ctp-note { font-size: .8125rem; color: var(--dui-muted); }
    .ctp-note.is-danger { color: var(--danger-600); }
    .dark .ctp-note.is-danger { color: var(--danger-400); }
    .ctp-lang { margin-inline-start: auto; }
    .ctp-box { position: relative; height: 70vh; min-height: 24rem; overflow: hidden; border-radius: var(--dui-radius); background: var(--gray-200);
        box-shadow: 0 0 0 1px var(--dui-border); }
    .dark .ctp-box { background: var(--gray-800); }
    .ctp-frame { position: absolute; inset: 0 auto auto 0; display: block; border: 0; transform-origin: 0 0; background: transparent;
        opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
    .ctp-frame.is-front { opacity: 1; pointer-events: auto; z-index: 1; }
    /* while the next version is laid out: a thin running bar along the top (a running job) */
    .ctp-progress { position: absolute; inset: 0 0 auto 0; z-index: 2; height: 2px; overflow: hidden; opacity: 0; transition: opacity 120ms ease; }
    .ctp-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--primary-500); animation: ctp-run 900ms ease-in-out infinite; }
    .ctp-box.is-busy .ctp-progress { opacity: 1; }
    @keyframes ctp-run { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
    @media (min-width: 80rem) {
        .ctp-side { position: sticky; top: 5rem; align-self: start; }
        .ctp-box { height: calc(100vh - 13rem); }
    }
    @media (prefers-reduced-motion: reduce) {
        .ctp-style, .ctp-frame, .ctp-progress { transition: none; }
        .ctp-style:hover:not(:disabled) { transform: none; }
        .ctp-progress::before, .ctb-tag { animation: none; }
    }

    /* A contact's profile (13.11.2026): left one card about the person or company (initials, name, roles, the ways
       to reach them, then the filled fields as label and value), right a strip of figures and the lists of what the
       contact did with the garage. Below 64rem one column: who it is, what they did, then the details. */
    .ppf { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
    .ppf-side, .ppf-card, .ppf-stats { border-radius: var(--dui-radius); background: var(--dui-card); box-shadow: var(--dui-shadow), 0 0 0 1px var(--dui-border); }
    .ppf-id { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem 1.25rem 1.25rem; text-align: center; }
    .ppf-av { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin-bottom: .25rem; border-radius: 9999px;
        background: var(--gray-200); color: var(--gray-700); font-size: 1.625rem; font-weight: 600; letter-spacing: .02em; line-height: 1; user-select: none; }
    .ppf-av.is-company { border-radius: 1rem; }
    .dark .ppf-av { background: var(--gray-700); color: var(--gray-100); }
    .ppf-name { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--dui-strong); overflow-wrap: anywhere; }
    .ppf-kind { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: .8125rem; color: var(--dui-muted); }
    .ppf-fav { display: inline-flex; align-items: center; gap: .25rem; color: var(--primary-600); font-weight: 500; }
    .dark .ppf-fav { color: var(--primary-400); }
    .ppf-fav-icon { width: 1rem; height: 1rem; }
    .ppf-reach { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }
    .ppf-details { border-top: 1px solid var(--dui-border); }
    .ppf-grp { padding: 1rem 1.25rem; }
    .ppf-grp + .ppf-grp { border-top: 1px solid var(--dui-border); }
    .ppf-grp-h { margin-bottom: .5rem; font-size: .8125rem; font-weight: 600; color: var(--dui-muted); }
    .ppf-rows { display: flex; flex-direction: column; gap: .5rem; }
    .ppf-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; font-size: .875rem; line-height: 1.4; }
    .ppf-row > dt { color: var(--dui-muted); }
    .ppf-row > dd { font-weight: 500; color: var(--dui-strong); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
    .ppf-link { text-decoration: underline; text-decoration-color: var(--dui-border); text-underline-offset: .2em; }
    .ppf-link:hover { text-decoration-color: currentColor; }
    .ppf-notes { font-size: .875rem; line-height: 1.5; color: var(--dui-strong); overflow-wrap: anywhere; }

    .ppf-body { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
    /* the figures in one card, hairlines between them, also when they wrap */
    .ppf-stats { display: flex; flex-wrap: wrap; gap: 1px; overflow: hidden; background: var(--dui-border); box-shadow: var(--dui-shadow), 0 0 0 1px var(--dui-border); }
    .ppf-stat { flex: 1 1 9rem; padding: 1rem 1.25rem; background: var(--dui-card); }
    .ppf-stat-l { font-size: .8125rem; color: var(--dui-muted); white-space: nowrap; }
    .ppf-stat-v { margin-top: .25rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--dui-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .ppf-stat-v.is-warning { color: var(--warning-700); }
    .dark .ppf-stat-v.is-warning { color: var(--warning-400); }

    .ppf-card { overflow: hidden; }
    .ppf-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem .75rem; }
    .ppf-card-h > h3 { font-size: .9375rem; font-weight: 600; color: var(--dui-strong); }
    .ppf-more { display: block; width: 100%; min-height: 2.5rem; padding: .5rem 1.25rem; border-top: 1px solid var(--dui-border); text-align: start;
        font-size: .8125rem; font-weight: 500; color: var(--primary-600); transition: background-color 150ms ease; }
    .ppf-more:hover { background: var(--dui-hover); }
    .dark .ppf-more { color: var(--primary-400); }
    @media (prefers-reduced-motion: reduce) { .ppf-more { transition: none; } }
    .ppf-card-n { font-size: .8125rem; color: var(--dui-muted); font-variant-numeric: tabular-nums; }
    .ppf-scroll { overflow-x: auto; }
    .ppf-tbl { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .875rem; }
    .ppf-tbl th { padding: .5rem 1.25rem; text-align: start; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
        color: var(--gray-500); background: var(--dui-hover); }
    .dark .ppf-tbl th { color: var(--gray-400); }
    .ppf-tbl td { height: 2.75rem; padding: .375rem 1.25rem; border-top: 1px solid var(--dui-border); color: var(--dui-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .ppf-tbl td:first-child { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
    .ppf-tbl :is(th, td).is-end { text-align: end; }
    .ppf-tbl td.is-muted { color: var(--dui-muted); }
    .ppf-tbl tr.is-link { position: relative; transition: background-color 150ms ease; }
    .ppf-tbl tr.is-link:hover { background: var(--dui-hover); }
    .ppf-row-link::after { content: ''; position: absolute; inset: 0; }
    .ppf-none { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 2.5rem 1.25rem; text-align: center; }
    .ppf-none-icon { width: 1.75rem; height: 1.75rem; margin-bottom: .5rem; color: var(--gray-400); }
    .ppf-none-h { font-size: .9375rem; font-weight: 600; color: var(--dui-strong); }
    .ppf-none-p { max-width: 28rem; font-size: .875rem; color: var(--dui-muted); }
    @media (max-width: 63.99rem) {
        .ppf { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
        /* who it is first, then what they did, the details last */
        .ppf-side { display: contents; }
        .ppf-id, .ppf-details { border-radius: var(--dui-radius); background: var(--dui-card); box-shadow: var(--dui-shadow), 0 0 0 1px var(--dui-border); }
        .ppf-id { order: 1; }
        .ppf-body { order: 2; gap: 1rem; }
        .ppf-details { order: 3; border-top: 0; }
        .ppf-reach .fi-btn { min-height: 2.5rem; }
        .ppf-stat { flex-basis: 8rem; padding: .75rem 1rem; }
    }
    @media (prefers-reduced-motion: reduce) { .ppf-tbl tr.is-link { transition: none; } }

    /* view switches in the page header (table / list / cards / board): one segmented group */
    .fi-header .fi-ac:has(> .dui-seg-item) { gap: .75rem; }
    .fi-ac > .dui-seg-item {
        width: 2.15rem; height: 2.15rem; border-radius: 0; color: var(--gray-500); background-color: var(--dui-hover);
        box-shadow: inset 0 1px 0 var(--dui-border), inset 0 -1px 0 var(--dui-border); padding: 3px;
    }
    .fi-ac > .dui-seg-item { margin: 0 !important; }
    .fi-ac > .dui-seg-item + .dui-seg-item { margin-inline-start: -.75rem !important; }
    .fi-ac > .dui-seg-item:not(.dui-seg-item + .dui-seg-item) { border-start-start-radius: calc(var(--dui-seg-item-r) + 3px); border-end-start-radius: calc(var(--dui-seg-item-r) + 3px); box-shadow: inset 1px 0 0 var(--dui-border), inset 0 1px 0 var(--dui-border), inset 0 -1px 0 var(--dui-border); }
    .fi-ac > .dui-seg-item:not(:has(+ .dui-seg-item)) { border-start-end-radius: calc(var(--dui-seg-item-r) + 3px); border-end-end-radius: calc(var(--dui-seg-item-r) + 3px); box-shadow: inset -1px 0 0 var(--dui-border), inset 0 1px 0 var(--dui-border), inset 0 -1px 0 var(--dui-border); }
    .fi-ac > .dui-seg-item.is-on { color: var(--gray-950); }
    .dark .fi-ac > .dui-seg-item.is-on { color: #fff; }
    .fi-ac > .dui-seg-item.is-on::before { content: ''; position: absolute; inset: 3px; z-index: -1; border-radius: var(--dui-seg-item-r); background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
    .dark .fi-ac > .dui-seg-item.is-on::before { background: rgb(255 255 255 / .14); }
    .fi-ac > .dui-seg-item { position: relative; isolation: isolate; }
    .fi-ac > .dui-seg-item:hover { color: var(--gray-900); }
    .dark .fi-ac > .dui-seg-item:hover { color: #fff; }

    /* tabs inside a card (costs / repair orders / condition …, forms with tabs): the segmented switch at the top of the card */
    .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs {
        width: max-content; max-width: calc(100% - 2rem); margin: 1rem 1rem 0; padding: 3px; gap: 2px; border: 0;
        border-radius: calc(var(--dui-seg-item-r) + 3px); background-color: var(--dui-hover); box-shadow: inset 0 0 0 1px var(--dui-border);
    }
    .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item { flex: none; padding: .32rem .75rem; border-radius: var(--dui-seg-item-r); font-size: .8125rem; font-weight: 600; color: var(--gray-600); background: none; white-space: nowrap; }
    .dark .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item { color: var(--gray-300); }
    .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item .fi-tabs-item-label { color: inherit; }
    .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item > .fi-icon { width: 1rem; height: 1rem; color: inherit; }
    .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item:hover { color: var(--gray-950); background: none; }
    .dark .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item:hover { color: #fff; }
    .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item.fi-active { background: #fff; color: var(--gray-950); box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
    .dark .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs .fi-tabs-item.fi-active { background: rgb(255 255 255 / .14); color: #fff; }
    .fi-sc-tabs.fi-contained:not(.fi-vertical) { border-radius: var(--dui-radius); background-color: var(--dui-card); box-shadow: var(--dui-shadow), 0 0 0 1px var(--dui-border); }
    /* a list inside a card: no second card around it */
    :is(.fi-sc-tabs.fi-contained, .fi-section-content) .fi-ta-ctn { box-shadow: 0 0 0 1px var(--dui-border); }

    /* vehicle file sections with sub-tabs (Sale, Costs & workshop): no card around them; the switch on the left, the cards
       below it across the full width, like the other sections */
    .dealer-settings-tabs .fi-sc-tabs.fi-contained:not(.fi-vertical) { background: none; box-shadow: none; border-radius: 0; }
    .dealer-settings-tabs .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-tabs { margin: 0 0 1rem; max-width: 100%; }
    .dealer-settings-tabs .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-sc-tabs-tab { padding: 0; margin: 0; }
    .dealer-settings-tabs .fi-sc-tabs.fi-contained:not(.fi-vertical) > .fi-sc-tabs-tab .fi-ta-ctn:not(.fi-section-content .fi-ta-ctn) { box-shadow: var(--dui-shadow), 0 0 0 1px var(--dui-border); }
    /* a section that only holds a list (documents of the sale): the list fills the card, no second frame */
    .dealer-flush > .fi-section-content-ctn > .fi-section-content { padding: 0; }
    .dealer-flush .fi-ta-ctn { box-shadow: none !important; border-radius: 0 0 var(--dui-radius) var(--dui-radius); background: none; }

    /* page header buttons: one main button (the right-most solid primary, like "New vehicle"), every other one quiet; accept /
       reject keep their colour as text and icon on a light button instead of a second and third solid colour */
    .fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(.fi-outlined):has(~ .fi-btn.fi-color-primary:not(.fi-outlined)),
    .fi-header-actions-ctn .fi-ac > .fi-btn:is(.fi-color-success, .fi-color-danger, .fi-color-warning, .fi-color-info):not(.fi-outlined) {
        background-color: var(--dui-card); color: var(--color-700, var(--gray-800)); box-shadow: var(--dui-shadow), inset 0 0 0 1px var(--dui-border);
    }
    .fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(.fi-outlined):has(~ .fi-btn.fi-color-primary:not(.fi-outlined)) { color: var(--gray-800); }
    .fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(.fi-outlined):has(~ .fi-btn.fi-color-primary:not(.fi-outlined)) > .fi-icon { color: var(--gray-400); }
    .fi-header-actions-ctn .fi-ac > .fi-btn:is(.fi-color-success, .fi-color-danger, .fi-color-warning, .fi-color-info):not(.fi-outlined) > .fi-icon { color: var(--color-600, currentColor); }
    .fi-header-actions-ctn .fi-ac > .fi-btn:is(.fi-color-success, .fi-color-danger, .fi-color-warning, .fi-color-info):not(.fi-outlined):hover,
    .fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(.fi-outlined):has(~ .fi-btn.fi-color-primary:not(.fi-outlined)):hover { background-color: var(--gray-50); }
    .dark .fi-header-actions-ctn .fi-ac > .fi-btn:is(.fi-color-success, .fi-color-danger, .fi-color-warning, .fi-color-info):not(.fi-outlined) { color: var(--color-300, var(--gray-200)); }
    .dark .fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(.fi-outlined):has(~ .fi-btn.fi-color-primary:not(.fi-outlined)) { color: var(--gray-200); }
    .dark .fi-header-actions-ctn .fi-ac > .fi-btn:is(.fi-color-success, .fi-color-danger, .fi-color-warning, .fi-color-info):not(.fi-outlined):hover,
    .dark .fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(.fi-outlined):has(~ .fi-btn.fi-color-primary:not(.fi-outlined)):hover { background-color: rgb(255 255 255 / .06); }

    /* empty lists: calm, no big grey disc */
    .fi-ta-empty-state-icon-bg, .fi-empty-state-icon-bg { background-color: var(--dui-hover); }

    /* scrollbars (06.11.2026): thin, rounded, in the grey of the surface, no arrows and no track; in the sidebar the
       handle shows only while the pointer is over it. Chrome / Safari / Edge through ::-webkit-scrollbar, Firefox
       through the standard properties (Chrome would let those switch the webkit styles off). */
    ::-webkit-scrollbar { width: .625rem; height: .625rem; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb { background-color: rgb(3 7 18 / .18); border: .1875rem solid transparent; border-radius: 999px; background-clip: padding-box; min-height: 2.5rem; }
    ::-webkit-scrollbar-thumb:hover { background-color: rgb(3 7 18 / .32); }
    ::-webkit-scrollbar-button { display: none; }
    .dark::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb { background-color: rgb(255 255 255 / .16); }
    .dark::-webkit-scrollbar-thumb:hover, .dark ::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / .3); }
    .fi-sidebar-nav::-webkit-scrollbar { width: .5rem; }
    .fi-sidebar-nav::-webkit-scrollbar-thumb { background-color: transparent; border-width: .125rem; }
    .fi-sidebar-nav:hover::-webkit-scrollbar-thumb { background-color: rgb(3 7 18 / .16); }
    .dark .fi-sidebar-nav:hover::-webkit-scrollbar-thumb { background-color: rgb(255 255 255 / .14); }
    @supports not selector(::-webkit-scrollbar) {
        * { scrollbar-width: thin; scrollbar-color: rgb(3 7 18 / .2) transparent; }
        .dark, .dark * { scrollbar-color: rgb(255 255 255 / .18) transparent; }
        .fi-sidebar-nav { scrollbar-color: transparent transparent; }
        .fi-sidebar-nav:hover { scrollbar-color: rgb(3 7 18 / .18) transparent; }
        .dark .fi-sidebar-nav:hover { scrollbar-color: rgb(255 255 255 / .16) transparent; }
    }


/* Text only for phones (e.g. the status line under a name whose columns are shown from md up, banks 9.10). */
.dui-phone-only { display: inline; }
@media (min-width: 768px) { .dui-phone-only { display: none; } }

/* Fields in narrow places (08.11.2026): a chosen value or a placeholder stays on one line and ends with "…" instead
   of breaking ("Wählen Sie eine / Option", "Schwei / z"); a list of several chosen values still wraps its badges.
   Long words in checkbox and radio labels break with a hyphen instead of running out of their column. */
.fi-select-input-btn { min-width: 0; }
.fi-select-input-value-ctn:not(:has(.fi-badge)) { min-width: 0; overflow: hidden; }
.fi-select-input-value-ctn:not(:has(.fi-badge)) > *,
.fi-select-input-placeholder { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(.fi-fo-checkbox-list-option, .fi-fo-radio-label, .fi-fo-toggle-buttons) { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
:is(.fi-fo-checkbox-list-option, .fi-fo-radio-label) :is(div, span) { min-width: 0; }

/* Row icons (08.11.2026, IconRowActions): all grey; a delete shows its red only when pointed at. */
.fi-ta-actions .fi-icon-btn.fi-color-danger:not(:hover):not(:focus-visible) { color: var(--gray-400); }
.dark .fi-ta-actions .fi-icon-btn.fi-color-danger:not(:hover):not(:focus-visible) { color: var(--gray-500); }

/* The search field of the top bar (both panels): a hint that does not fit ends in "…" instead of being cut in the
   middle of a word (review 2026-11, L1). The full text stays the field's accessible name. */
.fi-global-search .fi-input { text-overflow: ellipsis; }
.fi-global-search .fi-input::placeholder { text-overflow: ellipsis; }

/* Lists on a phone (review 2026-11, M6; App\Filament\Support\PhoneRow): below 48rem each record of a table with the
   class "dphone" is a small block: title and amount on the first line, who and the status on the second, one more
   line with its label and the row actions beside it. Columns without a place are not shown. From 48rem up: the table as is. */
@media (max-width: 47.99rem) {
    .dphone .fi-ta-content-ctn, .dphone .fi-ta-content { overflow-x: visible; }
    .dphone .fi-ta-table { display: block; width: 100%; min-width: 0 !important; table-layout: auto; }
    .dphone .fi-ta-table > thead { display: none; }
    .dphone .fi-ta-table > tbody { display: block; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title amount" "sub state" "meta actions";
        column-gap: .75rem; row-gap: .25rem; align-items: center; height: auto; padding: .75rem 1rem;
    }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td { display: none; min-width: 0; padding: 0; width: auto !important; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td :is(.fi-ta-text, .fi-ta-col) { padding: 0; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-title { display: block; grid-area: title; font-weight: 600; color: var(--dui-strong); align-self: start; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-sub { display: block; grid-area: sub; color: var(--dui-muted); }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-amount { display: block; grid-area: amount; justify-self: end; align-self: start; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-state { display: block; grid-area: state; justify-self: end; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-meta { display: flex; align-items: baseline; gap: .375rem; grid-area: meta; font-size: .8125rem; color: var(--dui-muted); }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-meta :is(.fi-ta-text-item, .fi-ta-text-item-label) { font-size: inherit; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-meta::before { content: attr(data-dp-label); flex: none; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-line { display: block; grid-column: 1 / -1; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-line :is(.fi-ta-text-item, .fi-ta-text-item-label, .fi-ta-text-description) { white-space: normal; overflow-wrap: anywhere; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td:is(.dp-line, .dp-meta, .dp-sub):has(.fi-ta-placeholder) { display: none; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td:has(.fi-ta-actions) { display: block; grid-area: actions; justify-self: end; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td:has(.fi-ta-actions):not(:has(.fi-ta-actions > *)) { display: none; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td :is(.fi-ta-text-item, .fi-ta-text-item-label) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .dphone .fi-ta-table > tbody > tr.fi-ta-row > td.dp-sub :is(.fi-ta-text-item, .fi-ta-text-item-label) { color: inherit; }
}

    /* decision 10.00: a form dialog ends like a form page: side actions → cancel → main action, on the right, in the
       order of the code (FormPanels); Filament would lay them out in reverse */
    .fi-modal-footer.fi-align-end .fi-modal-footer-actions { flex-direction: row; justify-content: flex-end; }
    /* phones: the buttons share the width, the main action keeps the last (bottom right) place and the most room */
    @media (max-width: 639px) {
        .fi-modal-footer.fi-align-end .fi-modal-footer-actions > * { flex: 1 1 auto; }
        .fi-modal-footer.fi-align-end .fi-modal-footer-actions > :last-child { flex: 1 1 55%; }
        .fi-modal-footer.fi-align-end .fi-modal-footer-actions .fi-btn { justify-content: center; }
        .fi-modal-footer.fi-align-end .fi-modal-footer-actions > :not(.fi-btn) > .fi-btn { width: 100%; }
    }