/* Service module styles. Loads after styles.css so it can override base
   styles at the same specificity. */

/* ────────────────────────────────────────────────────────
   List view
   ──────────────────────────────────────────────────────── */

/* List/Board view toggle (two ghost icon-buttons; soft-accent active state).
   Shared by service (List ↔ Board) and planning (List ↔ Day). The transparent
   container lets each button read as its own affordance, with the active pill
   tinted using the same --accent-blue-soft pattern that signals "selected"
   elsewhere in the system (kpi--active, filter-chip set, FormSelect open). */
.svc-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 2px;
  background: transparent;
  border-radius: var(--radius-md);
}
.svc-view-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-400);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.svc-view-toggle__btn:hover { color: var(--ink-700); background: var(--surface-alt); }
.svc-view-toggle__btn.is-active,
.svc-view-toggle__btn.is-active:hover {
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
}

/* Status cell (pill + visible lock icon, paired) */
.svc-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.svc-lock-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-lock-mark.is-open   { color: var(--ink-300); }
.svc-lock-mark.is-locked { color: var(--accent-green); }

/* Label chips (lower visual weight than status pills) */
.svc-label-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.svc-label {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}
/* Removable variant — used inside the side-panel Labels accordion */
.svc-label--removable { padding-right: 4px; gap: 6px; }
.svc-label__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: currentColor;
  opacity: 0.55;
  cursor: pointer;
  padding: 0;
  transition: opacity .12s ease, background .12s ease;
}
.svc-label__remove:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* Label picker — anchored under the "+ Label toevoegen" button.
   Two pieces are needed for it to render outside the accordion bounds:
   (1) the picker itself uses position:absolute via .menu, and
   (2) the parent .acc must NOT clip overflow while open. The shared rule
   `.acc { overflow: hidden }` clips by default; .acc--overflow-visible
   below opts out of that for the duration of the picker's visibility. */
.svc-label-picker {
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
}
.acc--overflow-visible { overflow: visible; }

/* ────────────────────────────────────────────────────────
   Detail view
   ──────────────────────────────────────────────────────── */

/* Status + lock cluster in detail-header */
.svc-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.svc-detail-status__pill {
  height: 30px;
  cursor: pointer;
}
/* Small dot in the status menu items, showing the colour of each status */
.svc-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Lock button next to the status pill — primary close/reopen affordance.
   Icon-only by design; the tooltip + co-dependent status pill carry the label. */
.svc-lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.svc-lock-btn:hover {
  color: var(--ink-700);
  border-color: var(--ink-300);
  background: var(--surface-alt);
}
.svc-lock-btn:active { transform: scale(.97); }
.svc-lock-btn.is-locked {
  background: var(--accent-green-soft);
  color: var(--accent-green);
  border-color: rgba(0, 154, 130, 0.22);
}
.svc-lock-btn.is-locked:hover {
  background: #d6efe9;
}

/* Lock confirm modal (uses .modal-card from styles.css for shell) */
.svc-lock-modal {
  padding: 28px 28px 24px;
  text-align: center;
}
.svc-lock-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-green-soft);
  color: var(--accent-green);
  margin: 0 auto 16px;
}
.svc-lock-modal__title {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.svc-lock-modal__body {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.55;
  margin: 0 0 24px;
}
.svc-lock-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Melding section — label outside, editable card below. */
.svc-melding-section {
  margin-top: 32px;
}
.svc-melding-section__label {
  margin-bottom: 10px;
}
/* Melding card — wraps the editable fields in a subtle white-on-white
   container so it reads as the primary block on the paper. Hairline border,
   no shadow — quiet but legible. */
.svc-melding-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 18px 22px 14px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Drag-over state — entire melding card becomes the drop zone for bijlagen.
   Children get pointer-events disabled so dragenter/leave fire on the card
   only, avoiding flicker as cursor passes child boundaries. */
.svc-melding-card.is-dragover {
  border-color: var(--accent-blue);
  border-style: dashed;
  background: var(--accent-blue-soft);
  box-shadow: 0 0 0 4px rgba(13, 53, 160, 0.06);
}
.svc-melding-card.is-dragover * { pointer-events: none; }

/* "Bijgewerkt door X · 2 dagen geleden" — tiny audit line at the bottom
   of the card so the field reads as something that lives + changes.
   No border-top — the small grey text reads as a footnote on its own. */
.svc-melding-meta {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-400);
}

/* Empty-state copy when the melding is locked + a field is unfilled. */
.svc-melding-empty {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-400);
}
/* Title slot — bigger so it sits in the same vertical space as the
   real onderwerp would. Same italic + ink-400 treatment as the body
   empty state so they read as a family. */
.svc-melding-empty--title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  padding: 6px 0;
}

/* Same treatment for the artikelen list when locked + empty. */
.svc-items-empty {
  margin: 18px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-400);
}

/* Melding (complaint) body — onderwerp + omschrijving.
   Melding is the most important field on a service, so the empty state
   needs presence: a big, full-width headline-ish onderwerp and a tall
   omschrijving textarea. */
.svc-melding-onderwerp {
  margin-top: 0;
  margin-bottom: 14px;
}
.svc-melding-onderwerp .editable-text {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  margin-left: -10px;
  margin-right: -10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.svc-melding-onderwerp .editable-text:hover {
  background: var(--surface-alt);
  border-color: transparent;
}
.svc-melding-onderwerp .editable-text:focus {
  background: var(--surface);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent-blue-soft);
  outline: none;
}
.svc-melding-onderwerp .editable-text:empty:not(:focus)::before {
  font-weight: 500;
  font-size: 17px;
  font-style: normal;
  color: var(--ink-400);
}

.svc-melding-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
/* Reusable multiline contentEditable for fields on the service paper
   (Melding's omschrijving + Reden). Renders as a <div contentEditable>
   so it inherits no <textarea> native chrome — both fields look like
   identical twins in resting, hover, and focus states. */
.svc-paper-multiline {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  margin-left: -12px;
  margin-right: -12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  outline: 0;
  cursor: text;
  white-space: pre-wrap;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.svc-paper-multiline:hover {
  background: var(--surface-alt);
  border-color: transparent;
}
.svc-paper-multiline:focus {
  background: var(--surface);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--accent-blue-soft);
}
.svc-paper-multiline:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: var(--ink-400);
  font-style: normal;
  pointer-events: none;
}
/* Read-only paragraph (locked melding with content) */
.svc-melding-readonly {
  margin: 0;
  padding: 10px 12px;
  margin-left: -12px;
  margin-right: -12px;
  white-space: pre-wrap;
}

/* Multi-line EditableText wrapper — block, full width.
   The textarea also has cols="50" as an intrinsic-width floor in case
   width:100% is ever swallowed by a parent layout quirk. */
.editable-text-multiline-wrap {
  display: block;
  width: 100%;
}
.editable-help {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-400);
  line-height: 1.5;
}

/* Multi-line EditableText — uses a real <textarea> for predictable sizing
   and a native ::placeholder (contentEditable spans/divs collapse to ~0
   width when empty across browsers, no CSS hack reliably fixes it). */
.editable-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 6px;
  resize: none;
  overflow: hidden;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  outline: none;
  white-space: pre-wrap;
  cursor: text;
  min-height: 1.6em;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.editable-textarea:hover {
  border-color: var(--border);
  background: white;
}
.editable-textarea:focus {
  border-color: var(--accent-blue);
  background: white;
  box-shadow: 0 0 0 2px rgba(13, 53, 160, 0.1);
}
.editable-textarea::placeholder {
  color: var(--ink-300);
  font-style: italic;
}

/* Read-only multiline (rendered as a span when readOnly) */
.editable-text--multiline.editable-text--readonly {
  display: block;
  width: 100%;
  margin: 0;
  white-space: pre-wrap;
}

/* Single-line empty-state placeholder for contentEditable spans */
.editable-text:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: var(--ink-300);
  font-style: italic;
  pointer-events: none;
}

/* InlineSelect — fluid variant fills its container (default sizing-to-content
   stays the right pick for inline contexts like info-block rows). */
.inline-select-wrap--fluid { display: block; width: 100%; }
.inline-select-wrap--fluid .inline-select { width: 100%; justify-content: space-between; }

/* InlineCombo — same hover/focus chrome as EditableText + a chevron-only
   button on the right that opens the preset menu. Free typing or pick. */
.inline-combo {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2px 6px;
  margin: -2px -6px;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.inline-combo:hover { border-color: var(--border); background: white; }
.inline-combo:focus-within {
  border-color: var(--accent-blue);
  background: white;
  box-shadow: 0 0 0 2px rgba(13, 53, 160, 0.1);
}
.inline-combo__input {
  flex: 1 1 auto;
  outline: none;
  min-height: 1.4em;
  cursor: text;
}
.inline-combo__input:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: var(--ink-300);
  font-style: italic;
  pointer-events: none;
}
.inline-combo__caret {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius);
  margin-left: 4px;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.inline-combo:hover .inline-combo__caret,
.inline-combo:focus-within .inline-combo__caret,
.inline-combo__caret.is-open { opacity: 1; }
.inline-combo__caret:hover { color: var(--ink-700); background: var(--surface-alt); }
.inline-combo__menu {
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 180px;
  z-index: 20;
}

/* Origineel order link — matches the unified field hover (soft surface-alt
   block) so it sits in the same family as Behandelaar / order picker. */
.svc-orderref {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  padding: 1px 6px;
  margin: -1px -6px;
  border-radius: var(--radius);
  transition: background-color .12s ease;
}
.svc-orderref:hover {
  background: var(--surface-alt);
}

/* Bijlagen (Melding section) — list of attached images or documents.
   Each bijlage is a card with a thumb, filename, meta and a delete X.
   The trailing card with .svc-bijlage--add doubles as the file picker. */
.svc-bijlagen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.svc-bijlage {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px 10px 10px;
  min-width: 220px;
  background: var(--surface);
}
.svc-bijlage__thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-300);
  flex-shrink: 0;
}
.svc-bijlage__meta { min-width: 0; }
.svc-bijlage__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.svc-bijlage__sub { font-size: 11px; color: var(--ink-400); margin-top: 2px; }
.svc-bijlage__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  color: var(--ink-400);
  cursor: pointer;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.svc-bijlage:hover .svc-bijlage__remove,
.svc-bijlage__remove:focus-visible { opacity: 1; }
.svc-bijlage__remove:hover { color: var(--danger); background: var(--surface-alt); }

/* Icon-only add button — sits at the end of the bijlagen list and matches
   the height of a bijlage card so the row stays tidy. Drag/drop on the
   surrounding melding card is the primary upload affordance; this is the
   click fallback. */
/* Paperclip add — pinned to the top-right of the melding card so its
   position is stable regardless of how many bijlagen are attached.
   Same chrome as other ghost icon buttons in the app. */
.svc-bijlage-add {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.svc-bijlage-add:hover {
  color: var(--accent-blue);
  background: var(--surface-alt);
}

/* Artikelen — flat rows in the offerte items-list rhythm.
   Header strip + rows separated by hairlines, no boxy outer border per row. */
.svc-items {
  border-top: 1px solid var(--border-line);
}
.svc-items-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 160px 24px;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border-line);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.svc-items-head__locatie { text-align: right; }
.svc-items-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 160px 24px;
  gap: 12px;
  padding: 16px 15px;
  border-bottom: 1px solid var(--border-line);
  align-items: start;
  background: white;
  transition: background .12s ease;
}
.svc-items-row:hover { background: var(--surface-muted); }
.svc-items-row:last-child { border-bottom: 0; }
.svc-items-row__locatie {
  text-align: right;
  font-size: 13px;
  color: var(--ink-700);
  display: flex;
  justify-content: flex-end;
}
/* Remove button — fades in on row hover, mirrors the offerte item-remove. */
.svc-items-row__remove {
  appearance: none;
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  color: var(--ink-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}
.svc-items-row:hover .svc-items-row__remove,
.svc-items-row__remove:focus-visible { opacity: 1; }
.svc-items-row__remove:hover {
  color: var(--danger, #dc2626);
  background: var(--surface-alt);
}
/* Config — compact 2-col key/value list, light visual weight */
.svc-item-config {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 3px;
  font-size: 12px;
  line-height: 1.4;
}
.svc-item-config dt { color: var(--ink-400); font-weight: 500; }
.svc-item-config dd { margin: 0; color: var(--ink-700); }


/* ────────────────────────────────────────────────────────
   Side panel — service-specific accordion bodies
   ──────────────────────────────────────────────────────── */

/* Veroorzaker dropdown */
.svc-veroorzaker .inline-select { width: 100%; }
.svc-veroorzaker__hint {
  font-size: 11px;
  color: var(--ink-400);
  margin-top: 8px;
  font-style: italic;
}

/* Notes */
.svc-note {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface);
}
.svc-note__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 4px;
}
.svc-note__head strong { color: var(--ink-700); font-weight: 600; }
.svc-note__remove {
  margin-left: auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-300);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius);
}
.svc-note__remove:hover { color: var(--accent-magenta); background: var(--surface-alt); }
.svc-note__body { font-size: 13px; color: var(--ink-700); line-height: 1.5; }

/* Bestanden row */
.svc-bestand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-700);
  padding: 6px 8px;
  border-radius: var(--radius);
}
.svc-bestand:hover { background: var(--surface-alt); }
.svc-bestand svg { color: var(--ink-400); }

/* ────────────────────────────────────────────────────────
   Board view (kanban — one column per status)
   Flat layout: no nested cards. Columns are bare regions with a
   coloured top bar + uppercase header; rows inside are separated
   by hairlines and the whole board scrolls with the page (same as
   the list view). Goal: less "card on card on card", more breathing
   room, full content visible.
   ──────────────────────────────────────────────────────── */

/* Board view shares the toolbar .card with the list view so the
   search + filters stay in the same position. The card ends after the
   toolbar (no border-bottom on the toolbar) and the board columns sit
   below on the page background. Mirrors planning's pln-toolbar-only. */
.card.svc-toolbar-only .toolbar { border-bottom: 0; }
.card.svc-toolbar-only { margin-bottom: 12px; }
/* Note: overflow:visible is no longer set here — the shared rule
   `.card:has(.filterbar) { overflow: visible }` handles it. */

.svc-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 16px;
  padding: 20px 16px 16px;
  overflow-x: auto;
  align-items: stretch;
  /* Reach toward the bottom of the viewport so short columns still feel
     anchored. The offset is a rough sum of topbar + page header + KPIs +
     toolbar — not exact, but close enough for the prototype. */
  min-height: calc(100vh - 360px);
}
/* Each status column is its own card; items inside are flat rows. The
   column carries a slightly firmer border + a layered shadow so it sits
   clearly above the page bg without feeling heavy. */
.svc-board-col {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.02),
    0 2px 6px rgba(15, 23, 42, 0.05),
    0 8px 20px rgba(15, 23, 42, 0.04);
  transition: box-shadow .2s ease, border-color .2s ease;
}
/* Subtle lift on hover — applies to the WHOLE column (not its rows).
   Border stays the same colour as resting; the deeper shadow does the
   lift work, no warm/cool colour shift. */
.svc-board-col:hover {
  border-color: var(--border);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.03),
    0 4px 10px rgba(15, 23, 42, 0.07),
    0 14px 28px rgba(15, 23, 42, 0.06);
}
/* Drop target — column under the cursor while dragging a card. Subtle
   accent-blue tint so the user sees where the drop will land. */
.svc-board-col.is-drop-target {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}
/* Card being dragged — fades while in motion. */
.svc-board-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.svc-board-card { cursor: grab; }

.svc-board-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-line);
}
.svc-board-col__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-900);
}
/* Quiet status-colour reference: a small dot beside the title */
.svc-board-col__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.svc-board-col__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-line);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
}
.svc-board-col__body {
  display: flex;
  flex-direction: column;
  /* No max-height: the column grows with content and the page scrolls */
}
.svc-board-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-400);
  padding: 20px 18px;
}

/* Row — a flat clickable region separated from its neighbour by a hairline */
.svc-board-card {
  appearance: none;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-line);
  padding: 14px 18px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background-color .12s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-board-card:last-child { border-bottom: 0; }
.svc-board-card:hover { background: var(--surface-alt); }
.svc-board-card:active { background: var(--surface-alt); }
.svc-board-card__id {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-blue);
  margin-bottom: 2px;
}
.svc-board-card__klant {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
}
.svc-board-card__onderwerp {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.5;
}
.svc-board-card__labels { margin-top: 8px; }

/* ────────────────────────────────────────────────────────
   New-melding flow
   ──────────────────────────────────────────────────────── */

/* Small "concept" tag in the detail header subtitle. */
.detail-header__sub-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-blue);
  background: var(--accent-blue-soft);
  border-radius: var(--radius);
  vertical-align: 2px;
}

/* Wrapper around the KlantPicker when no klant is set yet. Lets the
   picker breathe inside the info-grid cell without competing with
   the surrounding labels. */
.klant-empty {
  margin-top: 4px;
}

/* The order picker sits in the narrow Document column — give it enough
   min-width to show its placeholder. */
.svc-order-search { min-width: 240px; }

/* ────────────────────────────────────────────────────────
   Unified field hover/focus on the service paper.
   Every editable field (InlineSelect, InlineCombo, OrderSearch,
   contentEditable) shares the same treatment:
     • rest  — transparent
     • hover — background: surface-alt, border stays transparent
     • focus — background: surface, soft accent ring (no hard border)
   Selects/combos still show a chevron as the dropdown affordance.
   Scoped via .svc-detail-page so it doesn't bleed into offerte.
   ──────────────────────────────────────────────────────── */
/* (Moved to shared/styles.css under .lt-detail-page so planning detail
   gets the same softer hover/focus treatment. Service detail opts in
   via that class on its root .page wrapper.) */

/* Chosen state — order id link + a small pen icon revealed on hover. */
.svc-order-chosen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc-order-chosen__edit {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px;
  border-radius: var(--radius);
  color: var(--ink-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}
.svc-order-chosen:hover .svc-order-chosen__edit,
.svc-order-chosen__edit:focus-visible { opacity: 1; }
.svc-order-chosen__edit:hover {
  color: var(--accent-blue);
  background: var(--surface-alt);
}

/* Service drawer paper fills the body AND extends behind the footer so a
   sparse melding doesn't read as a half-empty card. The footer floats over
   the body (position: absolute, anchored to the .drawer's fixed positioning
   context) which lets the white sheet slide under it. */
.drawer--service .drawer__body {
  /* No bottom padding — the paper goes all the way down. The paper itself
     has internal padding so its content doesn't hide behind the footer. */
  padding-bottom: 0;
}
.drawer--service .drawer__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--surface);
}
.drawer--service .paper-quote {
  min-height: 100%;
  box-sizing: border-box;
  /* Bottom padding clears the floating footer (~64px tall) so content
     never hides under it. */
  padding-bottom: 96px;
  /* The bottom edge sits behind the footer — square it off so we don't
     get a half-radius peeking out. */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Drawer artikel rows — compact list inside the read-only preview. */
.svc-drawer-items {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.svc-drawer-item {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-line);
}
.svc-drawer-item:last-child { border-bottom: 0; }
.svc-drawer-item__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
}
.svc-drawer-item__meta {
  font-size: 11px;
  color: var(--ink-400);
  grid-column: 1 / 2;
}
.svc-drawer-item__locatie {
  font-size: 11px;
  color: var(--ink-500);
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
}

/* Inline order picker — search input + dropdown, mirrors the artikel
   add-row interaction model. */
.svc-order-search {
  position: relative;
}
/* Invisible-until-hover: matches the EditableText pattern. The placeholder
   ghosts as the empty state; on hover or focus the field gets a soft border.
   Padding is tight so the row keeps the same height as the plain text rows
   (Aangemaakt, Behandelaar) above it. */
.svc-order-search__field {
  display: flex;
  align-items: center;
  padding: 1px 6px;
  margin: -1px -6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.svc-order-search__field:hover {
  background: var(--surface-alt);
  border-color: var(--border-line);
}
.svc-order-search__field:focus-within {
  background: var(--surface);
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}
.svc-order-search__field input {
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  /* Inherit from the surrounding info-block__row dd so weight/colour match
     the other rows (Aangemaakt, Behandelaar). */
  font: inherit;
  color: inherit;
  flex: 1;
  min-width: 0;
  padding: 0;
  line-height: inherit;
}
.svc-order-search__field input::placeholder {
  color: var(--ink-400);
  font-weight: 400;
}

.svc-order-search__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 440px;
  max-width: min(520px, 90vw);
  background: var(--surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}
.svc-order-search__result {
  appearance: none;
  text-align: left;
  background: transparent;
  border: 0;
  width: 100%;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  transition: background-color .1s ease;
}
.svc-order-search__result:hover,
.svc-order-search__result.is-focused {
  background: var(--surface-alt);
}
.svc-order-search__id {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-blue);
  font-variant-numeric: tabular-nums;
}
.svc-order-search__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.svc-order-search__klant {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-order-search__meta {
  font-size: 11px;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-order-search__price {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}