@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Colours and shapes follow the mock-ups of 8 October 2026 (docs/Dashboard.jpg, CRM.jpg).
   Sizes follow docs/ui-stijlgids.md (U001): compact rows, small-caps grey headings, single thin
   separators, no card inside a card. The variables below are the only place these sizes live. */
:root {
    --ink: #1f1b17;
    --ink-soft: #3d3730;
    --muted: #7a7064;
    --paper: #f7f4ef;
    --sand: #ece6dc;
    --sand-dark: #e2dacd;
    --surface: #ffffff;
    --line: #d9d0c3;
    --line-soft: #e9e3d9;
    --accent: #b5522a;
    --accent-soft: #f3e4dc;
    --ok: #3f7d4e;
    --warn: #b5522a;
    --radius: 6px;
    --sidebar-width: 220px;

    /* U001 sizes, rows lowered by U018 (A018) */
    --font-size: 14px;
    --row-height: 24px;
    --cell-pad-x: 8px;
    --cell-pad-y: 2px;
    --bar-height: 49px; /* filter bar at the bottom, as high as the user block in the sidebar (U021) */
    --head-size: 12px;
    --head-spacing: 0.05em;
    --section-gap: 16px;
    --card-pad: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: var(--font-size); line-height: 1.4; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .brand-name, .kpi-value { font-family: 'Space Grotesk', sans-serif; }
h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 0 0 8px; }
h3 { font-size: var(--head-size); margin: 0 0 8px; color: var(--muted); letter-spacing: var(--head-spacing); text-transform: uppercase; font-weight: 700; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-width); flex: 0 0 auto; background: var(--sand); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: block; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.brand-name { display: block; font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; }
.brand-sub { display: block; color: var(--muted); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }
.sidebar-nav { padding: 10px 12px; flex: 1 1 auto; overflow-y: auto; }
.nav-heading { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 12px 8px 4px; }
.nav-item { display: block; padding: 7px 10px; border-radius: 6px; font-weight: 500; color: var(--ink-soft); }
a.nav-item:hover { background: var(--sand-dark); }
.nav-item.is-active { background: var(--ink); color: #fff; }
.nav-item.is-planned { color: #a89d90; cursor: default; }
.sidebar-user { border-top: 1px solid var(--line); padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.user-name { flex: 1 1 auto; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form { display: inline; }
.link-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; padding: 0; font-size: .85rem; }
.link-button:hover { color: var(--accent); }

.workspace { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 48px; }
.topbar-title { font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.topbar-title .crumb { color: var(--muted); font-weight: 400; }
.topbar-search input { width: 240px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; background: var(--paper); }
.topbar-search input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.main { padding: var(--section-gap) 20px calc(var(--bar-height) + 24px); }

/* Sub navigation (tabs) */
.subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--section-gap); }
.subnav a { padding: 6px 12px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* Page header */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: var(--section-gap); flex-wrap: wrap; }
.page-header .subtitle { color: var(--muted); margin-left: 10px; font-weight: 400; font-size: .95rem; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2; }
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: #000; }
.btn-danger { color: var(--accent); border-color: var(--accent); }
.btn-danger:hover { background: var(--accent-soft); }
.btn-small { padding: 3px 8px; font-size: .85rem; font-weight: 500; }

/* Cards and grids: one card per section, sections 16px apart, no card inside a card. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
.card + .card { margin-top: var(--section-gap); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-header h2 { margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--section-gap); align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--section-gap); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--section-gap); align-items: start; }

/* KPI tiles */
.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--sand); margin-bottom: var(--section-gap); }
.kpi { padding: 12px 16px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi-label { color: var(--muted); font-size: var(--head-size); font-weight: 700; letter-spacing: var(--head-spacing); text-transform: uppercase; }
.kpi-value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; margin: 4px 0 2px; }
.kpi-note { color: var(--muted); font-size: .85rem; }
.kpi.is-planned .kpi-value { color: #b9ae9f; }

/* Worklists */
.worklist-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--sand); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; min-height: var(--row-height); }
a.worklist-item:hover { background: var(--sand-dark); }
.worklist-item .label { font-weight: 600; }
.worklist-item .sub { color: var(--muted); font-size: .85rem; }
.worklist-item .count { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; }
.worklist-item .count.is-zero, .worklist-item.is-planned .count { color: #b9ae9f; }
.worklist-item.is-planned { opacity: .7; }

/* Tables (U018: 24px rows, 8px/2px cell padding; U001: 12px small-caps grey header) */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; color: var(--muted); font-size: var(--head-size); font-weight: 700; letter-spacing: var(--head-spacing); text-transform: uppercase; padding: var(--cell-pad-y) var(--cell-pad-x); height: var(--row-height); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: var(--cell-pad-y) var(--cell-pad-x); height: var(--row-height); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--paper); }
table.data td.num, table.data th.num { text-align: right; }
table.data a.row-link { font-weight: 600; }
table.data a.row-link:hover { color: var(--accent); }
.table-footer { display: flex; justify-content: space-between; align-items: center; padding: var(--cell-pad-y) var(--cell-pad-x); min-height: var(--row-height); color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line-soft); }
.empty { padding: 20px; color: var(--muted); text-align: center; }

/* Tags (badges in beige with dark text, U007) */
.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--sand); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tag-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.tag-ok { background: #e3efe5; color: var(--ok); }
.tag-off { background: var(--line-soft); color: var(--muted); }

/* Filters above a list */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filters input[type=search], .filters select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; background: var(--surface); }
.filters label.check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.form-grid .span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font: inherit; background: var(--surface); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field textarea { min-height: 72px; }
.field .help { color: var(--muted); font-size: .8rem; }
.field .errors, .form-errors { color: var(--accent); font-size: .85rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--accent); }
.field-check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.field-check input { width: auto; }
.form-section + .form-section { margin-top: var(--section-gap); }
.form-section h2 { border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; margin-bottom: 10px; }
.form-actions { display: flex; gap: 8px; margin-top: var(--section-gap); }
.form-panel { max-width: 420px; margin: 48px auto; }
.similar-warning { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 12px; font-size: .9rem; margin-top: 6px; }
.similar-warning ul { margin: 4px 0 0 18px; padding: 0; }

/* Detail page */
.dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.dl dt { color: var(--muted); font-size: .85rem; }
.dl dd { margin: 0; }
.subrecord { border-top: 1px solid var(--line-soft); padding: var(--cell-pad-y) 0; min-height: var(--row-height); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.subrecord:first-of-type { border-top: 0; }
.subrecord .title { font-weight: 600; }
.subrecord .meta { color: var(--muted); font-size: .85rem; }
.subrecord.is-inactive { opacity: .55; }
/* A form inside a section is a flat block under a single separator, not a second card (U001). */
.inline-panel { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.inline-panel h2 { margin-bottom: 8px; }
.related-panel .related-item { display: flex; justify-content: space-between; padding: var(--cell-pad-y) 0; border-bottom: 1px solid var(--line-soft); }
.related-panel .related-item:last-child { border-bottom: 0; }
.related-panel .related-item.is-empty { color: #b9ae9f; }
.related-panel .count { font-weight: 700; }
.note { border-left: 3px solid var(--sand-dark); padding: 4px 10px; margin-bottom: 8px; }
.note .note-head { font-size: .85rem; color: var(--muted); }
.note .note-subject { font-weight: 600; }
.note .note-text { white-space: pre-line; }

/* Messages: top of the page, gone after five seconds (static/js/app.js) */
.messages { margin-bottom: 12px; }
.message { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; background: var(--sand); border: 1px solid var(--line); transition: opacity .4s; }
.message.is-fading { opacity: 0; }
.message-success { background: #e3efe5; border-color: #bcd7c2; }
.message-error { background: var(--accent-soft); border-color: var(--accent); }

.htmx-request .htmx-indicator { display: inline; }
.htmx-indicator { display: none; }

@media (max-width: 1100px) {
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi { border-bottom: 1px solid var(--line); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; }
    .grid-2, .grid-4, .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: span 1; }
    .topbar { flex-wrap: wrap; }
    .topbar-search input { width: 100%; }
    .main { padding: 12px 16px 32px; }
    .dl { grid-template-columns: 1fr; }
}

/* Generic lists (apps/kern/listing.py): sortable headers, filter chips, context menu (U002, U003) */
table.data th.sortable a { display: inline-flex; align-items: center; gap: 4px; }
table.data th.sortable a:hover { color: var(--ink); }
table.data th.is-asc a, table.data th.is-desc a { color: var(--ink); }
.sort-arrow { font-size: .6rem; min-width: .6rem; }
.listing-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--sand); border-radius: 14px; padding: 2px 10px; font-size: .85rem; }
.chip a { color: var(--muted); font-weight: 700; }
.chip a:hover { color: var(--accent); }
.chip-opening { background: #e3efe5; }
.context-menu { position: absolute; z-index: 50; min-width: 240px; max-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(31, 27, 23, .15); padding: 6px 0; }
.context-menu[hidden] { display: none; }
.menu-head { padding: 4px 12px 6px; color: var(--muted); font-size: var(--head-size); letter-spacing: var(--head-spacing); text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head strong { color: var(--ink); text-transform: none; letter-spacing: 0; }
.menu-form { display: flex; flex-direction: column; }
.menu-save { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 6px 12px; cursor: pointer; }
.menu-item:hover { background: var(--paper); }
.menu-input { margin: 4px 12px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: inherit; width: calc(100% - 24px); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 12px; }
.menu-row .menu-item { flex: 1 1 auto; width: auto; }
.menu-actions { display: inline-flex; gap: 10px; white-space: nowrap; }
.menu-notice { padding: 6px 12px; font-size: .85rem; }

/* Dashboard per user (U005, U006) */
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-gear { color: var(--muted); font-size: .9rem; line-height: 1; }
.kpi-gear:hover { color: var(--ink); }
a.kpi-value { display: block; }
a.kpi-value:hover { color: var(--accent); }
.kpi-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .85rem; }
.kpi-options label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.kpi-options label.check { flex-direction: row; align-items: center; gap: 6px; }
.kpi-options select { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: inherit; background: var(--surface); }
.kpi-options .form-actions { margin-top: 2px; }
.worklist + .worklist { margin-top: var(--section-gap); }
.customize { margin-bottom: var(--section-gap); }
.customize-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--row-height); border-top: 1px solid var(--line-soft); padding: 2px 0; }
.customize-row:first-of-type { border-top: 0; }
.customize-row.is-off { color: var(--muted); }
.customize-row label.check { display: inline-flex; align-items: center; gap: 8px; }
.customize-actions { display: inline-flex; align-items: center; gap: 4px; }
.customize-actions select { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; background: var(--surface); }

/* Detail pages with tabs (U008) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--section-gap); }
.tabs a { padding: 6px 12px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }
.tab-panel > * + * { margin-top: var(--section-gap); }
.note-filter { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font: inherit; background: var(--surface); font-size: .85rem; }

/* --- A018: filter row, filter bar, one-sheet detail pages, tab bar, editing on the page ------------- */

/* Filter row under the column headers (U020) */
table.data tr.filter-row th { height: auto; padding: 2px 4px 4px; border-bottom: 1px solid var(--line); background: var(--paper); }
.filter-input { width: 100%; min-width: 48px; border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 6px; font: inherit; font-size: .85rem; background: var(--surface); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.filter-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.filter-input.is-invalid { border-color: var(--accent); background: var(--accent-soft); }
.filter-input::placeholder { color: #b9ae9f; }
.filters-compact { margin-bottom: 6px; }

/* Filter bar at the bottom of the screen, right of the user block (U021) */
.filter-bar { position: fixed; left: var(--sidebar-width); right: 0; bottom: 0; z-index: 40; min-height: var(--bar-height); display: flex; align-items: center; gap: 16px; padding: 6px 16px; background: var(--sand); border-top: 1px solid var(--line); font-size: .85rem; flex-wrap: wrap; }
.filter-bar-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-bar-active { flex: 1 1 auto; }
.filter-bar-label { color: var(--muted); font-size: var(--head-size); letter-spacing: var(--head-spacing); text-transform: uppercase; font-weight: 700; margin-right: 2px; }
.filter-bar .chip { background: var(--surface); border: 1px solid var(--line); }
.filter-bar .chip-opening { background: #e3efe5; border-color: #bcd7c2; }
.chip-saved { padding: 1px 6px; gap: 4px; }
.chip-saved a { color: var(--ink); font-weight: 600; }
.chip-saved.is-current { border-color: var(--ink); }
.chip-saved button { border: 0; background: transparent; cursor: pointer; padding: 0 2px; font: inherit; color: var(--muted); line-height: 1; }
.chip-saved button:hover { color: var(--accent); }
.chip-saved .star.is-on { color: #c89b2c; }
.filter-bar-input { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font: inherit; width: 170px; background: var(--surface); }
.filter-bar .check { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.filter-bar-messages { flex: 1 0 100%; }
.message-inline { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--surface); margin-right: 6px; }
.message-inline.message-error, .message-inline.message-warning { background: var(--accent-soft); }
.message-inline.message-success { background: #e3efe5; }
.menu-reset { border-top: 1px solid var(--line-soft); margin-top: 4px; color: var(--muted); }

/* One sheet per detail page (U019): header, tab bar and sections on one white surface */
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px var(--card-pad) 10px; flex-wrap: wrap; }
.sheet-header h1 .subtitle { color: var(--muted); margin-left: 10px; font-weight: 400; font-size: .95rem; }
.sheet-body { padding: 4px var(--card-pad) var(--card-pad); }
.sheet-section { padding: 10px 0 12px; }
.sheet-section + .sheet-section { border-top: 1px solid var(--line); }
.sheet-section > .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sheet-section > .section-head h2 { margin: 0; font-size: var(--head-size); color: var(--muted); letter-spacing: var(--head-spacing); text-transform: uppercase; font-weight: 700; font-family: 'DM Sans', sans-serif; }
.sheet-columns { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 24px; }
.sheet-columns > .sheet-section + .sheet-section { border-top: 0; }
.sheet-columns > .sheet-section:first-child { border-right: 1px solid var(--line-soft); padding-right: 24px; }
.sub-head { margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: var(--head-size); letter-spacing: var(--head-spacing); text-transform: uppercase; font-weight: 700; }

/* Tab bar (U023): a clear band under the header, active tab white */
.tab-bar { display: flex; gap: 2px; padding: 0 var(--card-pad); background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tab-bar a { padding: 7px 16px; color: var(--ink-soft); font-weight: 600; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; border-radius: 6px 6px 0 0; margin-top: 4px; }
.tab-bar a:hover { background: var(--sand-dark); }
.tab-bar a.is-active { background: var(--surface); border-color: var(--line); border-top: 2px solid var(--accent); color: var(--ink); }
.tab-bar a .count { color: var(--muted); font-weight: 400; margin-left: 4px; }

/* Fields on the page (U026): inputs for editors, the same fields as plain text for everyone else */
.field-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.field-grid label { color: var(--muted); font-size: .85rem; }
.field-grid .field-errors { grid-column: 2; color: var(--accent); font-size: .8rem; }
.edit-input, .field-grid input, .field-grid select, table.edit-table input, table.edit-table select, table.edit-table textarea { width: 100%; border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 6px; font: inherit; background: var(--surface); color: var(--ink); min-height: 24px; }
.field-grid input:focus, .field-grid select:focus, table.edit-table input:focus, table.edit-table select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field-grid input[type=checkbox], table.edit-table input[type=checkbox] { width: auto; min-height: 0; }
.field-grid :disabled, table.edit-table :disabled { border-color: transparent; background: transparent; color: var(--ink); opacity: 1; -webkit-appearance: none; appearance: none; padding-left: 0; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--accent) !important; background: var(--accent-soft); }
table.edit-table { width: 100%; border-collapse: collapse; }
table.edit-table th { text-align: left; color: var(--muted); font-size: var(--head-size); font-weight: 700; letter-spacing: var(--head-spacing); text-transform: uppercase; padding: 2px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.edit-table td { padding: 1px 4px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; height: var(--row-height); }
table.edit-table td.center, table.edit-table th.center { text-align: center; }
table.edit-table tr.is-new td { background: var(--paper); }
table.edit-table tr.is-inactive td { color: var(--muted); }
table.edit-table .cell-errors { color: var(--accent); font-size: .78rem; }
.form-errors-summary { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 10px; margin: 0 var(--card-pad) 8px; font-size: .9rem; }
.btn-save.is-dirty { box-shadow: 0 0 0 3px var(--accent-soft); }
.related-panel a.related-item:hover span:first-child { color: var(--accent); text-decoration: underline; }
.attachment-row a { font-weight: 600; }
@media (max-width: 1100px) {
    .sheet-columns { grid-template-columns: 1fr; }
    .sheet-columns > .sheet-section:first-child { border-right: 0; padding-right: 0; }
}
@media (max-width: 760px) {
    .filter-bar { left: 0; position: static; }
    .field-grid { grid-template-columns: 1fr; }
}
.table-scroll { overflow-x: auto; }
.sheet-body-role:empty { display: none; }
.sheet-body-role .inline-panel { margin: 0 var(--card-pad) 12px; }

/* A018 second batch: inputs keep a usable width in card tables; the + adds a blank row (U028) */
table.edit-table input:not([type=checkbox]):not([type=radio]), table.edit-table select { min-width: 70px; border-color: var(--line); }
table.edit-table input:disabled, table.edit-table select:disabled { border-color: transparent; }
.row-add { border: 1px solid var(--line); background: var(--surface); border-radius: 50%; width: 22px; height: 22px; line-height: 18px; padding: 0; font-weight: 700; color: var(--ink); cursor: pointer; }
.row-add:hover { border-color: var(--ink); background: var(--sand); }

/* Columns per user (U029) */
table.data th[data-col] { cursor: grab; }
table.data th.is-dragging, .column-choices li.is-dragging { opacity: .4; }
.column-choices { list-style: none; margin: 0; padding: 4px 0; max-height: 50vh; overflow-y: auto; }
.column-choices li { display: flex; align-items: center; gap: 6px; padding: 3px 12px; cursor: grab; }
.column-choices li:hover { background: var(--paper); }
.column-choices .check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.drag-handle { color: #b9ae9f; letter-spacing: -3px; font-size: .8rem; }
.columns-actions { padding: 6px 12px; border-top: 1px solid var(--line-soft); }

/* Projects (SPEC-004): status steps under the header, Current/History/All switch */
.status-steps { display: flex; gap: 0; list-style: none; margin: 0 var(--card-pad) 10px; padding: 0; counter-reset: step; flex-wrap: wrap; }
.status-steps li { padding: 3px 14px 3px 18px; background: var(--paper); color: var(--muted); font-size: .85rem; font-weight: 600; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); margin-right: -4px; }
.status-steps li:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); padding-left: 10px; }
.status-steps li.is-done { background: var(--sand); color: var(--ink-soft); }
.status-steps li.is-current { background: var(--ink); color: #fff; }
.status-steps li.is-closed { background: var(--accent); color: #fff; margin-left: 12px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented .seg { padding: 3px 10px; cursor: pointer; font-weight: 600; font-size: .85rem; background: var(--surface); }
.segmented .seg + .seg { border-left: 1px solid var(--line); }
.segmented .seg.is-active { background: var(--ink); color: #fff; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.form-sheet { max-width: 640px; }
.related-row { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.related-row .related-item { flex: 1 1 auto; border-bottom: 0; }
.related-new { font-size: .8rem; color: var(--accent); white-space: nowrap; }
.btn-next { border-color: var(--ink); }

/* Banner (U031): the line under the brand box runs across the page; title, subtitle and actions per screen */
.brand { min-height: var(--banner-height); box-sizing: border-box; }
.banner { display: flex; align-items: center; gap: 16px; min-height: var(--banner-height); padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.banner-main { flex: 1 1 auto; min-width: 0; }
.banner-title { font-weight: 600; display: flex; align-items: baseline; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; }
.banner-title .crumb { color: var(--muted); font-weight: 400; font-family: 'DM Sans', sans-serif; font-size: .95rem; }
.banner-header { margin: 0; align-items: center; }
.banner-header h1 { font-size: 1.3rem; }
.banner-back { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px; font-weight: 600; color: var(--ink-soft); background: var(--paper); white-space: nowrap; }
.banner-back:hover { border-color: var(--ink); color: var(--ink); }
:root { --banner-height: 64px; }

/* Ticks and radio buttons in the beige-brown of the house style instead of the browser blue */
:root { --check: #9c8463; }
input[type=checkbox], input[type=radio] { accent-color: var(--check); }
/* Every input in a card table has a visible frame (also when the browser fills it in) */
table.edit-table input[type=text], table.edit-table input[type=email], table.edit-table input[type=date], table.edit-table input[type=search], table.edit-table input:not([type]), table.edit-table select, table.edit-table textarea, .field-grid input[type=text], .field-grid input[type=email], .field-grid input[type=date], .field-grid select, .field-grid textarea { border: 1px solid var(--line) !important; border-radius: 4px; background-color: var(--surface); }
table.edit-table :disabled, .field-grid :disabled { border-color: transparent !important; background-color: transparent; }
.field-grid textarea { min-height: 60px; font: inherit; padding: 4px 6px; width: 100%; }
.row-remove { border: 1px solid var(--line); background: var(--surface); border-radius: 50%; width: 22px; height: 22px; line-height: 18px; padding: 0; font-weight: 700; color: var(--accent); cursor: pointer; margin-left: 4px; }
.row-remove:hover { border-color: var(--accent); background: var(--accent-soft); }
.field-grid-wide { grid-template-columns: 1fr; }
table.grid-table input { width: 64px !important; min-width: 0 !important; text-align: right; }
table.grid-table td:first-child { white-space: nowrap; font-weight: 600; }

/* Lines of a project (SPEC-005) */
table.lines-table input:not([type=checkbox]):not([type=radio]), table.lines-table select { min-width: 60px; }
table.lines-table td { white-space: nowrap; }
details.calc summary { cursor: pointer; text-decoration: underline dotted; }
details.calc table { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(31,27,23,.15); font-size: .8rem; padding: 4px 8px; }
details.calc table td { border: 0; height: auto; padding: 1px 6px; }
.unlock-form input { border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font: inherit; }
.nowrap { white-space: nowrap; }

/* A021: project lines as two rows (what the line is, then its prices), fields per type */
table.lines-table tbody.line-group { border-bottom: 2px solid var(--line); }
table.lines-table tbody.line-group tr.line-main td { border-bottom: 0; padding-top: 4px; }
table.lines-table tbody.line-group tr.line-prices td { border-bottom: 0; padding-bottom: 6px; background: var(--paper); }
table.lines-table tbody.line-group.is-new tr td { background: var(--paper); }
table.lines-table td.num-input input { max-width: 80px; text-align: right; }
.price-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.price-bar .price-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.price-bar .price-item input { width: 100px; text-align: right; }
.price-bar .price-item.check input { width: auto; }
.price-bar details.calc { display: inline-block; }
.line-group[data-line-type^="kind:"] .for-product-cell > *,
.line-group[data-line-type^="kind:"] .for-finish-cell > *,
.line-group[data-line-type="product:broadloom"] .for-finish-cell > * { visibility: hidden; }
.line-group[data-line-type^="kind:"] .for-product { display: none; }
.line-group:not([data-line-type^="kind:"]) .for-cost { display: none; }

/* A021: Add buttons under a table instead of a + at the end of a row */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }

/* A021: the system's own question when leaving with unsaved changes */
dialog.dialog { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; max-width: 420px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
dialog.dialog::backdrop { background: rgba(29, 29, 31, .35); }
dialog.dialog p { margin: 0 0 8px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--paper); }
tr.is-current-row td { font-weight: 600; }
.price-bar .calc-note { color: var(--accent); white-space: normal; }
/* SPEC-008: the tier of a price-list line and the warnings of the price list under the calculated price */
.line-prices .tier-text { display: block; white-space: normal; }
.line-prices .calc-warning { display: block; color: var(--accent); white-space: normal; }

/* SPEC-006: the third row of a product line with its production orders and the Order block */
table.lines-table tbody.line-group tr.line-order td { border-bottom: 0; padding-bottom: 6px; background: var(--paper); }
.order-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.order-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.order-item.is-stopped { opacity: .65; }
.inline-details { display: inline-block; }
.inline-details > summary { list-style: none; cursor: pointer; display: inline-block; }
.inline-details[open] > summary { margin-bottom: 4px; }
.order-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.order-form label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: 2px; }
.order-form input, .order-form select { border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; min-height: 24px; font: inherit; color: var(--ink); }
.order-form input[inputmode] { width: 80px; text-align: right; }
.tag-warning { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }

/* SPEC-006: Collector take-over */
.take-over-group { margin-bottom: 18px; }
.take-over-group h3 { margin: 0; font-size: .95rem; }
.copy-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 0 4px; cursor: pointer; color: var(--ink-soft); font-size: .8rem; }
.copy-btn.is-copied, [data-copy-table].is-copied { border-color: var(--accent); color: var(--accent); }
.nav-item.nav-sub { padding-left: 28px; font-size: .9em; }
.notice-spaced { margin-bottom: 12px; }

/* A browser extension (password manager) that puts its own element straight into a table row would make it an
   extra cell and shift the columns (screenshot Henk 23-10-2026): only real cells take part in the table. */
table.edit-table tr > :not(td):not(th) { display: none !important; }

/* A022: one line = one block in alternating beige, so everything of a line reads together */
table.lines-table tbody.line-group { border-bottom: 2px solid var(--line); }
table.lines-table select { max-width: 170px; }
.price-calc { font-size: 1.12rem; font-weight: 700; }
.price-total { font-size: 1.02rem; }
.price-bar .currency { color: var(--muted); }
.order-problems { white-space: normal; flex-basis: 100%; }
.order-problems ul { margin: 2px 0 0 18px; padding: 0; color: var(--accent); }
.row-save { border: 1px solid var(--line); background: var(--surface); border-radius: 50%; width: 22px; height: 22px; line-height: 18px; padding: 0; cursor: pointer; color: var(--ink-soft); font-weight: 700; }
.row-save:hover { border-color: var(--ink); background: var(--accent-soft); color: var(--ink); }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--sand); }
.action-bar-end { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spaced-top { margin-top: 8px; }
/* Icons of password managers inside the card tables (LastPass and others): not shown (A022) */
.sheet [data-lastpass-icon-root], .sheet [data-lastpass-root], .sheet com-1password-button, .sheet [data-dashlanecreated] { display: none !important; }

/* A022 proposal A: the lines as a compact table; a summary row per line and a detail that opens */
table.lines-table tbody.line-group { border-bottom: 1px solid var(--line); }
table.lines-table tbody.line-group tr.line-summary td { background: var(--surface); cursor: pointer; padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
table.lines-table tbody.line-group tr.line-summary:hover td { background: var(--paper); }
table.lines-table tbody.line-group tr.line-detail { display: none; }
table.lines-table tbody.line-group.is-open tr.line-detail { display: table-row; }
table.lines-table tbody.line-group.is-open tr.line-summary td { background: var(--paper); font-weight: 500; }
table.lines-table tbody.line-group tr.line-detail td { background: var(--paper); border-bottom: 0; padding: 4px 8px 12px; }
table.lines-table tbody.line-group.is-new tr td { background: var(--paper); }
table.lines-table .chevron { width: 22px; }
.line-toggle { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--ink-soft); transition: transform .15s; line-height: 1; }
tbody.line-group.is-open .line-toggle { transform: rotate(90deg); }
.product-cell strong { display: block; }
.product-cell .sub { display: block; color: var(--muted); font-size: .8rem; }
td.docs .is-off { color: var(--line); text-decoration: line-through; }
.line-detail-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: 16px; }
@media (max-width: 1100px) { .line-detail-grid { grid-template-columns: 1fr; } }
.detail-part h4 { margin: 4px 0 6px; font-size: var(--head-size); color: var(--muted); letter-spacing: var(--head-spacing); text-transform: uppercase; }
.cfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.cfg-field { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--muted); }
.cfg-field input, .cfg-field select { font-size: .9rem; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; min-height: 26px; background: var(--surface); width: 100%; }
.cfg-field.has-error input, .cfg-field.has-error select { border-color: var(--accent); background: var(--accent-soft); }
.price-grid .check { align-self: end; font-size: .85rem; color: var(--ink); }
.price-total-big { font-size: 1.15rem; color: var(--ink); }
.line-group[data-line-type^="kind:"] .cfg-field.for-product,
.line-group[data-line-type^="kind:"] .cfg-field.for-finish,
.line-group[data-line-type="product:broadloom"] .cfg-field.for-finish { display: none; }
.line-group:not([data-line-type^="kind:"]) .cfg-field.for-cost { display: none; }
.line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.order-card { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 6px 10px; margin-bottom: 6px; }
.order-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stopped-orders { margin-bottom: 6px; }
.link-like { text-decoration: underline; cursor: pointer; color: var(--ink-soft); }
.line-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.line-filters-end { margin-left: auto; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 1px 8px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip-attention { color: var(--accent); border-color: transparent; background: var(--accent-soft); }
.field-errors { color: var(--accent); margin: 4px 0 0; }

/* A022: the box around an input in a table cell; an extension's icon element lands inside it, never in the row */
.field-box { display: block; position: relative; min-width: 0; }
.field-box > input, .field-box > select, .field-box > textarea { width: 100%; }
.field-box > :not(input):not(select):not(textarea) { position: absolute !important; left: 0; top: 0; }
.doc-link strong { text-decoration: underline; }

/* SPEC-007: the standard product card uses the type filter of the lines (data-line-type on .line-group) */
.sheet-columns.line-group { display: grid; }
.price-change { margin-top: 16px; }

/* Environment bar (deploy): test and local show a strip on every page; production shows nothing */
.env-bar { position: sticky; top: 0; z-index: 50; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; background: #f0a500; color: #1d1d1f; }
body.env-local .env-bar { background: #d9d9d9; }