/* =================================================================
   Werkstatt — Swiss Classic (PHP port)
   Tokens + components ported from source/ds/colors_and_type.css
   ================================================================= */

:root {
  /* Brand */
  --devsha-blue:        #0000FF;
  --devsha-blue-deep:   #0A1A8F;
  --devsha-blue-ink:    #0B1640;
  --devsha-blue-hover:  #1A1AFF;
  --devsha-blue-press:  #0000CC;

  /* Neutrals */
  --ds-ink-900: #0B0B14;
  --ds-ink-800: #1A1A24;
  --ds-ink-700: #2C2C38;
  --ds-ink-600: #4A4A56;
  --ds-ink-500: #6B6B78;
  --ds-ink-400: #989898;
  --ds-ink-300: #C4C4CC;
  --ds-ink-200: #E2E2E8;
  --ds-ink-100: #F1F1F4;
  --ds-ink-050: #F7F7FA;
  --ds-paper:   #FFFFFF;

  /* Blue scale */
  --ds-blue-100: #ECECFF;
  --ds-blue-050: #F5F5FF;

  /* Semantic */
  --ds-success: #1F8A5B;
  --ds-warning: #C28A1F;
  --ds-danger:  #C2362C;

  /* Roles */
  --border-1: var(--ds-ink-200);
  --border-2: var(--ds-ink-300);

  /* Typography */
  --font-sans: "Kanit", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, ul, ol, figure, button, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

html, body {
  font-family: var(--font-sans);
  color: var(--ds-ink-900);
  background: var(--ds-ink-050);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--devsha-blue); color: #fff; }

/* =================================================================
   APP SHELL
   ================================================================= */

.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.app-nav {
  background: #fff;
  border-right: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.app-nav__brand {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-nav__brand .logo {
  width: 28px; height: 28px;
  background: var(--devsha-blue);
  display: grid;
  place-items: center;
}
.app-nav__brand .logo span { width: 10px; height: 10px; background: #fff; display: block; }
.app-nav__brand .name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.app-nav__brand .sub  { font-size: 10px; color: var(--ds-ink-500); text-transform: uppercase; letter-spacing: 0.14em; }
/* Stacked layout when a custom logo is set: "Werkstatt" label above, logo below */
.app-nav__brand--stacked {
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 16px;
}
.app-nav__brand-logo {
  display: block;
  max-width: 160px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.app-nav__brand-text { min-width: 0; }

.app-nav__section {
  padding: 16px 0 2px;
}
.app-nav__heading {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-400);
  padding: 0 24px 8px;
}
.app-nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  font-size: 13px; font-weight: 500;
  color: var(--ds-ink-700);
  border-left: 2px solid transparent;
  transition: background var(--dur-2) var(--ease-out);
}
.app-nav__item:hover { background: var(--ds-ink-050); }
.app-nav__item.is-active {
  color: var(--devsha-blue-deep);
  background: var(--ds-blue-050);
  border-left-color: var(--devsha-blue);
}
.app-nav__item svg { flex: none; }

.app-nav__user {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-nav__user .meta { flex: 1; min-width: 0; }
.app-nav__user .name { font-size: 12px; font-weight: 600; }
.app-nav__user .role { font-size: 11px; color: var(--ds-ink-500); }

/* ---- Top bar ---- */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
  height: 64px;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  background: #fff;
  position: sticky; top: 0; z-index: 20;
}
.app-search {
  flex: 1; max-width: 520px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-1);
  padding: 8px 12px;
  background: var(--ds-ink-050);
}
.app-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font: inherit; font-size: 13px; color: var(--ds-ink-900);
}
.app-search input::placeholder { color: var(--ds-ink-500); }
.app-search .kbd {
  font-size: 10px; color: var(--ds-ink-500);
  border: 1px solid var(--border-1); padding: 1px 5px; background: #fff;
}
.app-topbar .spacer { flex: 1; }
.app-topbar .date {
  display: flex; align-items: center; gap: 4px;
  color: var(--ds-ink-500); font-size: 12px;
}
.app-topbar .divider {
  width: 1px; height: 24px; background: var(--border-1);
}

/* ---- Content area ---- */
.app-content {
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 24px;
}
.app-content > .flash {
  padding: 12px 16px;
  background: var(--ds-blue-050);
  border-left: 3px solid var(--devsha-blue);
  font-size: 13px;
}

/* =================================================================
   PRIMITIVES
   ================================================================= */

.eyebrow {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--devsha-blue);
}
.tiny-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
  margin-bottom: 4px;
}
.mono { font-family: var(--font-mono); }
.right { text-align: right; }
.muted { color: var(--ds-ink-500); }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }

/* breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ds-ink-500);
}
.breadcrumb .sep { display: inline-block; width: 12px; height: 12px; }
.breadcrumb .current { color: var(--ds-ink-900); }
.breadcrumb a { color: var(--ds-ink-500); }
.breadcrumb a:hover { color: var(--devsha-blue); }

/* page header */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
}
.page-head h1 {
  font-size: 28px; font-weight: 700;
  color: var(--devsha-blue-deep);
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.page-head .sub { font-size: 13px; color: var(--ds-ink-500); margin-top: 2px; }
.page-head .actions { display: flex; gap: 8px; }

/* pixel marker */
.pixel {
  display: inline-block; width: 8px; height: 8px;
  background: var(--devsha-blue); flex: none;
}
.pixel--green { background: var(--ds-success); }

/* =================================================================
   LICENSE PLATE — Swiss style: white plate, black text, Swiss flag on
   the left, canton arms on the right. Heights are calibrated so the
   plate sits naturally on the row baseline at each size.
   ================================================================= */
.plate {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  background: #fff;
  color: #0B0B14;
  border: 1px solid #0B0B14;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
}
.plate__flag,
.plate__canton {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 3px;
  background: #fff;
  height: 100%;
}
.plate__flag  { border-right: 1px solid var(--border-1); }
.plate__canton { border-left:  1px solid var(--border-1); }
.plate__flag svg, .plate__flag img,
.plate__canton svg, .plate__canton img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 28px;
}
.plate__text {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  color: inherit;
}
.plate--lg { height: 26px; font-size: 13px; }
.plate--lg .plate__text { padding: 0 9px; }
.plate--lg .plate__flag svg, .plate--lg .plate__flag img,
.plate--lg .plate__canton svg, .plate--lg .plate__canton img { max-width: 36px; }
.plate--xl { height: 32px; font-size: 15px; }
.plate--xl .plate__text { padding: 0 11px; }
.plate--xl .plate__flag svg, .plate--xl .plate__flag img,
.plate--xl .plate__canton svg, .plate--xl .plate__canton img { max-width: 44px; }

/* avatar */
.avatar {
  background: var(--devsha-blue-deep);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
  flex: none;
}
.avatar--32 { width: 32px; height: 32px; font-size: 13px; }
.avatar--36 { width: 36px; height: 36px; font-size: 14px; }
.avatar--44 { width: 44px; height: 44px; font-size: 17px; }
.avatar--64 { width: 64px; height: 64px; font-size: 26px; }

/* tags */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.tag--info     { background: #ECECFF; color: #0A1A8F; }
.tag--success  { background: #E5F4EC; color: #0F5A3A; }
.tag--warning  { background: #FBF1DE; color: #7A560F; }
.tag--danger   { background: #FBE6E3; color: #7A1F18; }
.tag--neutral  { background: #F1F1F4; color: #4A4A56; }

/* =================================================================
   STATUS PILL + DROPDOWN (rapport workshop flow)
   ================================================================= */

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: #F1F1F4;
  color: #4A4A56;
  border: 0;
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
}
.status-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex: none;
}
.status-pill__caret {
  display: inline-flex; align-items: center;
  margin-left: 2px; margin-right: -2px;
  opacity: 0.65;
}
.status-pill.is-clickable {
  cursor: pointer;
  transition: filter var(--dur-1) var(--ease-out);
}
.status-pill.is-clickable:hover { filter: brightness(0.94); }

/* 10-status palette — matches rapport_statuses() in helpers.php. */
.status-pill--neutral { background: #F1F1F4; color: #4A4A56; }
.status-pill--blue    { background: #ECECFF; color: #0A1A8F; }
.status-pill--amber   { background: #FBF1DE; color: #7A560F; }
.status-pill--orange  { background: #FFE6CC; color: #A04500; }
.status-pill--teal    { background: #DBF4EE; color: #0F6F5A; }
.status-pill--warning { background: #FCE6B8; color: #5C3E08; }
.status-pill--mint    { background: #E5F4EC; color: #0F5A3A; }
.status-pill--green   { background: #C2EBD4; color: #0A5D32; }
.status-pill--red     { background: #FCEAEA; color: #8C1F1F; }
.status-pill--muted   { background: #F1F1F4; color: #989898; }
.status-pill--muted .status-pill__dot { opacity: 0.5; }

.status-dropdown {
  position: relative;
  display: inline-flex;
}
.status-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border-1);
  box-shadow: 0 8px 24px rgba(11, 11, 20, 0.12);
  padding: 6px 0;
  display: none;
}
.status-dropdown.is-open .status-dropdown__menu { display: block; }
.status-dropdown.is-open [data-status-toggle] { filter: brightness(0.94); }

.status-dropdown__heading {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 4px;
}
.status-dropdown__form { display: block; margin: 0; }
.status-dropdown__item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ds-ink-700);
  transition: background var(--dur-1) var(--ease-out);
}
.status-dropdown__item:hover { background: var(--ds-ink-050); }
.status-dropdown__item.is-current {
  background: var(--ds-ink-050);
  font-weight: 600;
}
.status-dropdown__item .status-pill__dot { width: 10px; height: 10px; }
.status-dropdown__item--neutral .status-pill__dot { background: #4A4A56; }
.status-dropdown__item--blue    .status-pill__dot { background: #0A1A8F; }
.status-dropdown__item--amber   .status-pill__dot { background: #7A560F; }
.status-dropdown__item--orange  .status-pill__dot { background: #A04500; }
.status-dropdown__item--teal    .status-pill__dot { background: #0F6F5A; }
.status-dropdown__item--warning .status-pill__dot { background: #5C3E08; }
.status-dropdown__item--mint    .status-pill__dot { background: #0F5A3A; }
.status-dropdown__item--green   .status-pill__dot { background: #0A5D32; }
.status-dropdown__item--red     .status-pill__dot { background: #8C1F1F; }
.status-dropdown__item--muted   .status-pill__dot { background: #989898; }
.status-dropdown__label { min-width: 0; }
.status-dropdown__check {
  display: inline-flex; align-items: center;
  color: var(--devsha-blue);
}

@media (max-width: 720px) {
  .status-dropdown__menu {
    /* Phone: float left edge of the trigger so the menu doesn't escape the
       screen when the badge sits on the right of a stacked header. */
    left: 0; right: auto;
    min-width: min(260px, 90vw);
  }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-weight: 600; letter-spacing: 0.06em;
  padding: 9px 14px; font-size: 12px;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--sm { padding: 6px 10px; font-size: 11px; gap: 6px; }
.btn--lg { padding: 12px 20px; font-size: 13px; gap: 10px; }
.btn--primary   { background: var(--devsha-blue-deep); color: #fff; border-color: var(--devsha-blue-deep); }
.btn--primary:hover { background: #0B1FA8; }
.btn--electric  { background: var(--devsha-blue); color: #fff; border-color: var(--devsha-blue); }
.btn--electric:hover { background: var(--devsha-blue-hover); }
.btn--secondary { background: #fff; color: var(--ds-ink-900); border-color: var(--border-1); }
.btn--secondary:hover { background: var(--ds-ink-050); }
.btn--ghost     { background: transparent; color: var(--ds-ink-700); }
.btn--ghost:hover { background: var(--ds-ink-050); }
.btn--quiet     { background: var(--ds-ink-050); color: var(--ds-ink-900); }
.btn--quiet:hover { background: var(--ds-ink-100); }
.btn--danger    { background: #fff; color: var(--ds-danger); border-color: var(--ds-danger); }
.btn--danger:hover { background: #FBE6E3; }
.btn--block { width: 100%; }

/* =================================================================
   CARD
   ================================================================= */

.card {
  background: #fff;
  border: 1px solid var(--border-1);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-1);
}
.card__head-left {
  display: flex; align-items: center; gap: 10px;
}
.card__head-left .title { font-size: 14px; font-weight: 600; }
.card__head-left .count { font-size: 11px; color: var(--ds-ink-500); }
.card__head-right a, .card__head-right .link {
  font-size: 12px; color: var(--devsha-blue); font-weight: 600;
}
.card__body { padding: 20px; }
.card__body--p0 { padding: 0; }

/* =================================================================
   TABLES
   ================================================================= */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ds-ink-500);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-1);
  background: var(--ds-ink-050);
}
.tbl th.right { text-align: right; }
.tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  font-size: 13px;
  color: var(--ds-ink-900);
  vertical-align: middle;
}
.tbl td.right { text-align: right; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.linky { cursor: pointer; }
.tbl tbody tr.linky:hover { background: var(--ds-ink-050); }
.tbl td .small { font-size: 11px; color: var(--ds-ink-500); }
.tbl tfoot td {
  background: var(--ds-ink-050);
  font-weight: 700;
}

/* =================================================================
   KPI grid
   ================================================================= */

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.kpi {
  background: #fff;
  border: 1px solid var(--border-1);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.kpi__head { display: flex; align-items: center; gap: 8px; }
.kpi__head .pixel { width: 6px; height: 6px; }
.kpi__label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
}
.kpi__value {
  font-size: 36px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  font-family: var(--font-sans);
}
.kpi__delta { font-size: 12px; color: var(--ds-ink-500); }
.kpi--accent {
  background: var(--devsha-blue-deep);
  color: #fff;
  border-color: var(--devsha-blue-deep);
}
.kpi--accent .kpi__head .pixel { background: var(--devsha-blue); }
.kpi--accent .kpi__label { color: rgba(255,255,255,0.7); }
.kpi--accent .kpi__delta { color: rgba(255,255,255,0.7); }

/* Privacy toggle on a KPI card — small eye icon in the head, click to blur
   the value/delta lines. Reusable via data-hideable="key" on the card and
   data-toggle-hideable="key" on the button. Per-card state persists in
   localStorage so the choice survives page reloads. */
.kpi__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kpi__head .kpi__label { flex: 1; min-width: 0; }
.kpi__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  margin: -4px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--dur-1) var(--ease-out);
}
.kpi__toggle:hover { color: #fff; }
/* On a non-accent (light) card the toggle uses ink color instead */
.kpi:not(.kpi--accent) .kpi__toggle { color: var(--ds-ink-400); }
.kpi:not(.kpi--accent) .kpi__toggle:hover { color: var(--ds-ink-700); }
.kpi__toggle-off { display: none; }

[data-hideable].is-hidden .kpi__toggle-eye { display: none; }
[data-hideable].is-hidden .kpi__toggle-off { display: inline-flex; }
[data-hideable].is-hidden .kpi__value--hideable,
[data-hideable].is-hidden .kpi__delta--hideable {
  filter: blur(10px);
  user-select: none;
  pointer-events: none;
  /* Defensive: keep the same line height so the card doesn't reshape */
}

/* =================================================================
   DASHBOARD specific
   ================================================================= */

.dash-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }

/* Service-Erinnerung — grid of cards each linking to a car whose next_service
   falls inside the reminder window. Status pill at top colours by urgency. */
.dash-service__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
}
.dash-service__item {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-right: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-1) var(--ease-out);
}
.dash-service__item:hover { background: var(--ds-ink-050); }
.dash-service__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.dash-service__date {
  font-size: 12px;
  color: var(--ds-ink-500);
  font-weight: 600;
}
.dash-service__car {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink-900);
}
.dash-service__cust {
  font-size: 11px;
  color: var(--ds-ink-500);
}
.rap-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-1);
  align-items: center;
}
.rap-row:last-child { border-bottom: 0; }
.rap-row__date { font-family: var(--font-mono); font-size: 11px; color: var(--ds-ink-500); }
.rap-row__body { min-width: 0; }
.rap-row__title {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rap-row__sub { font-size: 11px; color: var(--ds-ink-500); }
.rap-row__total {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--devsha-blue-deep);
}
a.rap-row:hover, .rap-row.linky:hover { background: var(--ds-ink-050); }

/* =================================================================
   CALENDAR — month grid with rapports per day
   ================================================================= */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fff;
}
.cal-grid__weekday {
  padding: 10px 12px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ds-ink-500);
  background: var(--ds-ink-050);
  border-right: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.cal-grid__weekday:nth-child(7n) { border-right: 0; }
.cal-cell {
  min-height: 120px;
  padding: 8px;
  background: #fff;
  border-right: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell--other { background: var(--ds-ink-050); }
.cal-cell--other .cal-cell__num { color: var(--ds-ink-400); }
.cal-cell--has  { background: #fff; }

.cal-cell__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  color: var(--ds-ink-700);
  min-height: 22px;
}
.cal-cell__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 12px; font-weight: 600;
  border-radius: 50%;
}
.cal-cell--today .cal-cell__num {
  background: var(--devsha-blue);
  color: #fff;
}
.cal-cell__count {
  font-size: 10px; font-weight: 700;
  color: var(--ds-ink-500);
  background: var(--ds-ink-100);
  padding: 1px 6px;
  border-radius: 999px;
}

.cal-cell__list {
  display: flex; flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.cal-rap {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  padding: 3px 6px;
  background: var(--ds-blue-050);
  border-left: 2px solid var(--devsha-blue);
  color: var(--devsha-blue-deep);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  transition: background var(--dur-1) var(--ease-out);
}
.cal-rap:hover { background: var(--ds-blue-100); }
.cal-rap__plate {
  font-family: var(--font-mono);
  font-weight: 700;
  flex: none;
}
.cal-rap__title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  min-width: 0;
}
.cal-rap--draft,
.cal-rap--pending {
  background: #FBF1DE;
  border-left-color: var(--ds-warning);
  color: #7A560F;
}
.cal-rap--draft:hover,
.cal-rap--pending:hover { background: #F6E6C6; }
.cal-rap--cancelled {
  background: var(--ds-ink-100);
  border-left-color: var(--ds-ink-400);
  color: var(--ds-ink-500);
  text-decoration: line-through;
}
.cal-rap--cancelled:hover { background: var(--ds-ink-200); }

/* Customer & car chips — distinct colors so the three streams stay readable
   when more than one filter is on. */
.cal-rap--cust {
  background: #E8F7EF;
  border-left-color: #0A8F4A;
  color: #0A5D32;
}
.cal-rap--cust:hover { background: #D5F0E0; }
.cal-rap--car {
  background: #FCEAEA;
  border-left-color: #D63131;
  color: #8C1F1F;
}
.cal-rap--car:hover { background: #F8D6D6; }
.cal-rap__icon {
  display: inline-flex; align-items: center; flex: none;
}

/* Filter buttons in the calendar card header. Per-type accent on the dot so
   the user can read the legend at a glance. */
.cal-filters {
  display: inline-flex; gap: 6px;
  flex-wrap: wrap;
}
.cal-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ds-ink-600);
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.cal-filter:hover { background: var(--ds-ink-050); }
.cal-filter__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ds-ink-300);
}
.cal-filter--rap  .cal-filter__dot { background: var(--devsha-blue); }
.cal-filter--cust .cal-filter__dot { background: #0A8F4A; }
.cal-filter--car  .cal-filter__dot { background: #D63131; }
.cal-filter.is-active {
  background: var(--ds-ink-900);
  border-color: var(--ds-ink-900);
  color: #fff;
}
.cal-filter.is-active .cal-filter__dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}

/* CSS-driven filtering: the grid carries one is-show-<kind> class per active
   filter; chips without a matching class are hidden. */
.cal-grid [data-cal-item="rap"]  { display: none; }
.cal-grid [data-cal-item="cust"] { display: none; }
.cal-grid [data-cal-item="car"]  { display: none; }
.cal-grid.is-show-rap  [data-cal-item="rap"]  { display: flex; }
.cal-grid.is-show-cust [data-cal-item="cust"] { display: flex; }
.cal-grid.is-show-car  [data-cal-item="car"]  { display: flex; }

/* Mobile — switch the 7-col grid to a single-column agenda. Each day with at
   least one rapport is shown as a row with date + the list of rapports; days
   without anything collapse to a thin line so the month is still scannable. */
@media (max-width: 720px) {
  .cal-grid {
    grid-template-columns: 1fr;
  }
  .cal-grid__weekday { display: none; }
  .cal-cell {
    min-height: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-right: 0;
  }
  .cal-cell--other { display: none; }
  .cal-cell:not(.cal-cell--has) {
    padding: 6px 14px;
    color: var(--ds-ink-400);
  }
  .cal-cell__head {
    flex-direction: column;
    align-items: stretch;
    flex: none;
    width: 64px;
    min-height: 0;
    gap: 2px;
  }
  .cal-cell__num {
    align-self: flex-start;
  }
  .cal-cell__count {
    align-self: flex-start;
  }
  .cal-cell__list {
    flex: 1;
    min-width: 0;
  }
}

/* =================================================================
   ENTITY HEADER CARD
   ================================================================= */

.entity-head {
  background: #fff;
  border: 1px solid var(--border-1);
  padding: 24px;
  display: flex; gap: 24px;
  align-items: flex-start;
}
.entity-head__body { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.entity-head__name {
  font-size: 28px; font-weight: 700;
  color: var(--devsha-blue-deep);
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.entity-head__grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.entity-head__grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.entity-head__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.entity-head__actions { display: flex; flex-direction: column; gap: 8px; }

.note-callout {
  padding: 10px 14px;
  background: var(--ds-ink-050);
  border-left: 2px solid var(--devsha-blue);
  font-size: 12px;
  color: var(--ds-ink-700);
}

/* car grid (in customer detail) */
.car-grid { display: grid; grid-template-columns: 1fr 1fr; }
.car-grid__cell {
  padding: 20px;
  border-bottom: 1px solid var(--border-1);
  display: flex; gap: 16px; align-items: center;
  cursor: pointer;
}
.car-grid__cell:hover { background: var(--ds-ink-050); }
.car-grid__cell:nth-child(odd) { border-right: 1px solid var(--border-1); }
.car-grid__cell:last-child, .car-grid__cell:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.car-grid__meta { flex: 1; min-width: 0; }
.car-grid__name { font-size: 14px; font-weight: 600; color: var(--devsha-blue-deep); }
.car-grid__sub { font-size: 11px; color: var(--ds-ink-500); }

/* rapport row (car detail) */
.rap-line {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  cursor: pointer;
}
.rap-line:last-child { border-bottom: 0; }
.rap-line:hover { background: var(--ds-ink-050); }
.rap-line__bar { width: 4px; height: 40px; background: var(--devsha-blue); }
.rap-line__title { font-size: 14px; font-weight: 600; color: var(--ds-ink-900); margin-top: 2px; }
.rap-line__meta { font-size: 12px; color: var(--ds-ink-500); margin-top: 2px; }
.rap-line__total {
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 700;
  color: var(--devsha-blue-deep);
  text-align: right;
}

/* =================================================================
   RAPPORT DETAIL
   ================================================================= */

.rapport-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.rapport-head__title { font-size: 30px; font-weight: 700; color: var(--devsha-blue-deep); margin-top: 8px; letter-spacing: -0.01em; }
.rapport-head__tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rapport-head__total {
  font-size: 40px; font-weight: 800;
  color: var(--devsha-blue);
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  line-height: 1;
}
.rapport-head__actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }

.rapport-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.rapport-cols > * { display: flex; flex-direction: column; gap: 16px; }

.next-hint {
  background: #fff;
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--devsha-blue);
  padding: 20px;
}

/* =================================================================
   FORMS
   ================================================================= */

.field { display: flex; flex-direction: column; }
.field__label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
  margin-bottom: 8px;
}
.field__hint { font-size: 11px; color: var(--ds-ink-500); margin-top: 4px; }
.field__error { font-size: 11px; color: var(--ds-danger); margin-top: 4px; }
.field__row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-1); padding: 9px 12px; background: #fff; }
.field__row input, .field__row select {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ds-ink-900);
  font-family: inherit;
}
.field__row input:focus, .field__row select:focus { outline: 0; }
.field__row:focus-within { border-color: var(--devsha-blue); }
.field__row .suffix { font-size: 12px; color: var(--ds-ink-500); }
.field__row .prefix { font-size: 12px; color: var(--ds-ink-500); }
.field--inline { display: grid; grid-template-columns: 1fr; }
.field textarea {
  width: 100%;
  border: 1px solid var(--border-1);
  padding: 12px;
  font: inherit; font-size: 13px;
  color: var(--ds-ink-900);
  min-height: 80px;
  resize: vertical;
  background: #fff;
}
.field textarea:focus { outline: 0; border-color: var(--devsha-blue); }
.field__row input::placeholder, .field textarea::placeholder { color: var(--ds-ink-400); }

.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* mini table for parts/hours in the form */
.mini-tbl { border: 1px solid var(--border-1); }
.mini-tbl__head {
  display: grid;
  grid-template-columns: 1fr 90px 110px 110px 36px;
  padding: 8px 12px;
  background: var(--ds-ink-050);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ds-ink-500);
}
.mini-tbl__head > div:not(:first-child) { text-align: right; }
.mini-tbl__row {
  display: grid;
  grid-template-columns: 1fr 90px 110px 110px 36px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-1);
  align-items: center;
  gap: 8px;
}
.mini-tbl__row input {
  border: 1px solid transparent; padding: 6px 8px;
  font: inherit; font-size: 13px;
  background: var(--ds-ink-050);
  width: 100%;
  font-family: inherit;
  text-align: right;
}
.mini-tbl__row input.title { text-align: left; background: transparent; }
.mini-tbl__row input.mono { font-family: var(--font-mono); }
.mini-tbl__row input:focus { outline: 0; border-color: var(--devsha-blue); background: #fff; }
.mini-tbl__row .total {
  text-align: right; font-family: var(--font-mono); font-weight: 600;
  font-size: 13px;
}
.mini-tbl__row button.trash {
  border: 0; background: transparent;
  color: var(--ds-ink-400);
  display: grid; place-items: center; padding: 4px;
}
.mini-tbl__row button.trash:hover { color: var(--ds-danger); }

/* Variant grids — template form drops the "Total" column since templates
   are blueprints, not invoices. */
.mini-tbl--3 .mini-tbl__head,
.mini-tbl--3 .mini-tbl__row {
  grid-template-columns: 1fr 90px 130px 36px;
}
.mini-tbl--2 .mini-tbl__head,
.mini-tbl--2 .mini-tbl__row {
  grid-template-columns: 1fr 120px 36px;
}

.section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.add-link { font-size: 12px; color: var(--devsha-blue); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.add-link:hover { color: var(--devsha-blue-press); }

/* drop zone */
.dropzone {
  border: 1px dashed var(--border-2);
  padding: 20px;
  display: flex; align-items: center; gap: 12px; justify-content: center;
  background: var(--ds-ink-050);
  font-size: 13px; color: var(--ds-ink-500);
}

/* form panel (used for new/edit page in lieu of modal) */
.form-panel {
  background: #fff;
  border: 1px solid var(--border-1);
  display: flex; flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.form-panel__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-1);
}
.form-panel__head h1 {
  font-size: 22px; font-weight: 700;
  color: var(--devsha-blue-deep);
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.form-panel__body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }

/* Two-column form body: stacked fields on the left, optional photo/document
   sidebar on the right. Used on the car form to keep the main fields tidy
   and put uploads aside. Collapses to single column on small screens. */
.form-panel__cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
.form-panel__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form-panel__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) {
  .form-panel__cols { grid-template-columns: 1fr; gap: 20px; }
}

/* Vertical variant of the upload block — used in the form sidebar.
   Preview sits on top, controls below. */
.logo-upload--stacked { flex-direction: column; align-items: stretch; gap: 12px; }
.logo-upload--stacked .logo-upload__preview {
  width: 100%; height: 140px;
}
.form-panel__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-1);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ds-ink-050);
  gap: 12px;
}
.form-panel__footer .total-live {
  font-size: 13px; color: var(--ds-ink-500);
}
.form-panel__footer .total-live .value {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 700;
  color: var(--devsha-blue);
  margin-left: 6px;
}
.form-panel__actions { display: flex; gap: 8px; }

/* vehicle picker (selected state) */
.vehicle-pick {
  border: 1px solid var(--devsha-blue-deep);
  background: var(--ds-blue-050);
  padding: 12px;
  display: flex; align-items: center; gap: 12px;
}
.vehicle-pick .meta { flex: 1; min-width: 0; }
.vehicle-pick .meta .name { font-size: 14px; font-weight: 600; margin-top: 2px; }

select.native {
  border: 1px solid var(--border-1);
  padding: 9px 12px;
  font: inherit; font-size: 13px;
  color: var(--ds-ink-900);
  background: #fff;
  width: 100%;
  font-family: inherit;
}
select.native:focus { outline: 0; border-color: var(--devsha-blue); }

/* attachment grid (placeholder) */
.attach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.attach-tile {
  aspect-ratio: 4/3;
  background: var(--ds-ink-100);
  display: grid; place-items: center;
  border: 1px solid var(--border-1);
  color: var(--ds-ink-400);
}

/* =================================================================
   CAR THUMB
   - .car-thumb: the inline SVG illustration (default fallback)
   - .car-thumb--photo: when a real photo is uploaded, the <img> uses
     this class. It honours the width/height attributes for layout, but
     clips with object-fit:cover so the aspect ratio looks consistent.
   ================================================================= */

.car-thumb { display: block; }
.car-thumb--photo,
.car-thumb--placeholder {
  object-fit: cover;
  object-position: center;
  background: var(--ds-ink-050);
  border: 1px solid var(--border-1);
  border-radius: 2px;
}

/* =================================================================
   SEARCH PAGE
   ================================================================= */

.search-group { margin-bottom: 24px; }
.search-group h2 {
  font-size: 14px; font-weight: 600;
  margin-bottom: 8px;
}
.search-group .empty {
  font-size: 12px; color: var(--ds-ink-500); padding: 12px 0;
}

/* =================================================================
   PRINT VIEW
   ================================================================= */

.print-page {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  margin: 24px auto;
  box-shadow: 0 4px 24px rgba(11, 22, 64, 0.06);
  padding: 44px 56px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ds-ink-900);
  display: flex; flex-direction: column;
}

.print-bar {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border-1);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.print-bar .info { margin-right: auto; font-size: 12px; color: var(--ds-ink-500); }

.print-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ds-ink-900);
}
.print-head .logo {
  width: 40px; height: 40px; background: var(--devsha-blue);
  display: grid; place-items: center;
}
.print-head .logo span { width: 14px; height: 14px; background: #fff; display: block; }
.print-head__logo {
  display: block;
  max-width: 140px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.print-head .brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.print-head .brand-sub { font-size: 9px; color: var(--ds-ink-500); text-transform: uppercase; letter-spacing: 0.14em; }

/* Two-column layout for Einstellungen-* pages: vertical sidebar nav on the
   left (like the main app nav) + content on the right. Collapses to a
   single column on mobile so the nav stacks above the content. */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.settings-layout__content {
  display: flex; flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-1);
  position: sticky;
  top: 80px;          /* clear of the topbar */
}
.settings-nav__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-size: 13px; font-weight: 500;
  color: var(--ds-ink-700);
  border-left: 2px solid transparent;
  transition: background var(--dur-2) var(--ease-out);
}
.settings-nav__tab:hover { background: var(--ds-ink-050); }
.settings-nav__tab.is-active {
  color: var(--devsha-blue-deep);
  background: var(--ds-blue-050);
  border-left-color: var(--devsha-blue);
  font-weight: 600;
}
.settings-nav__tab svg { flex: none; }
@media (max-width: 720px) {
  .settings-layout { grid-template-columns: 1fr; gap: 16px; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .settings-nav__tab {
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .settings-nav__tab.is-active {
    border-bottom-color: var(--devsha-blue);
  }
}

/* Permission checkboxes on the user form */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-1);
  background: var(--ds-ink-050);
}
.perm-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-ink-900);
  cursor: pointer;
  padding: 4px 6px;
}
.perm-check input { accent-color: var(--devsha-blue); }

/* Logo upload control on the Einstellungen page */
.logo-upload {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border-1);
  background: var(--ds-ink-050);
}
.logo-upload__preview {
  flex: none;
  width: 140px; height: 80px;
  border: 1px solid var(--border-1);
  background: #fff;
  display: grid; place-items: center;
  padding: 6px;
  overflow: hidden;
}
.logo-upload__preview img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.logo-upload__controls {
  flex: 1;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.logo-upload__controls input[type="file"] {
  font: inherit; font-size: 13px;
  color: var(--ds-ink-700);
}
.logo-upload__remove {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ds-ink-700);
  cursor: pointer;
}

/* Fahrzeugausweis thumbnail on the car detail page */
.fzg-thumb {
  display: block;
  border: 1px solid var(--border-1);
  background: var(--ds-ink-050);
  overflow: hidden;
  cursor: zoom-in;
}
.fzg-thumb img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #fff;
}
.fzg-thumb--small img { max-height: 140px; }

/* Photo gallery — used on rapport show + rapport form */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.photo-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-1);
  background: var(--ds-ink-100);
  overflow: hidden;
}
.photo-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-tile:hover img { opacity: 0.9; }

/* "Delete" overlay shown on each tile inside the rapport edit form */
.photo-grid--editor { margin-bottom: 12px; }
.photo-grid--editor .photo-tile {
  cursor: default;
}
.photo-tile__delete {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: rgba(11, 22, 64, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.photo-tile__delete input { accent-color: var(--ds-danger); }

/* Per-tile trash button overlay (car photo gallery — submits its own form
   instead of being a bulk-delete checkbox like the rapport edit page). */
.photo-tile--with-delete { display: block; }
.photo-tile--with-delete a { display: block; position: absolute; inset: 0; }
.photo-tile__delete-form {
  position: absolute;
  top: 6px; right: 6px;
  margin: 0;
  z-index: 2;
}
.photo-tile__delete-form button {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 0;
  background: rgba(11, 22, 64, 0.7);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.photo-tile--with-delete:hover .photo-tile__delete-form button { opacity: 1; }
.photo-tile__delete-form button:hover { background: var(--ds-danger); }

/* File input row for rapport photo upload */
.photo-upload {
  margin-top: 8px;
  padding: 12px;
  border: 1px dashed var(--border-2);
  background: var(--ds-ink-050);
  display: flex; flex-direction: column; gap: 6px;
}
.photo-upload input[type="file"] {
  font: inherit; font-size: 13px;
  color: var(--ds-ink-700);
}
.print-head .right { text-align: right; font-size: 10px; color: var(--ds-ink-700); }
.print-head .right .mwst { color: var(--ds-ink-500); }
.print-head__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-ink-900);
  margin-bottom: 4px;
}

/* Inline edit — click the value to swap it for an input + save/cancel.
   Used on the car detail page for the km-Stand summary tile. */
.inline-edit { position: relative; display: inline-block; }
.inline-edit__display {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.inline-edit__display:hover { color: var(--devsha-blue-deep); }
.inline-edit__display:hover svg { color: var(--devsha-blue) !important; }
.inline-edit__form {
  display: none;
  align-items: center;
  gap: 4px;
  margin: -2px 0;
}
.inline-edit.is-editing .inline-edit__display { display: none; }
.inline-edit.is-editing .inline-edit__form    { display: inline-flex; }
.inline-edit__input {
  width: 110px;
  padding: 4px 8px;
  border: 1px solid var(--devsha-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  outline: none;
}
.inline-edit__input:focus { box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.15); }
.inline-edit__save,
.inline-edit__cancel {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 1px solid var(--border-1);
  background: #fff;
  cursor: pointer;
  color: var(--ds-ink-700);
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.inline-edit__save {
  background: var(--devsha-blue);
  border-color: var(--devsha-blue);
  color: #fff;
}
.inline-edit__save:hover  { background: var(--devsha-blue-press); }
.inline-edit__cancel:hover { background: var(--ds-ink-050); color: var(--ds-ink-900); }

.print-title {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 22px; margin-bottom: 16px;
}
.print-title h1 {
  font-size: 28px; font-weight: 800;
  color: var(--devsha-blue-deep);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.print-title .meta { text-align: right; }
.print-title .meta div { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 4px; }
.print-title .meta .label { font-size: 9px; font-weight: 600; color: var(--ds-ink-500); text-transform: uppercase; letter-spacing: 0.14em; }
.print-title .meta .value { font-size: 11px; font-weight: 700; font-family: var(--font-mono); }

.print-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.print-info .box { border: 1px solid var(--border-1); padding: 14px; }
.print-info .box .lbl { font-size: 9px; font-weight: 600; color: var(--ds-ink-500); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px; }
.print-info .box .name { font-size: 13px; font-weight: 700; }
.print-info .box .row { font-size: 10px; color: var(--ds-ink-700); }

.print-section { margin-bottom: 14px; }
.print-section .lbl { font-size: 9px; font-weight: 600; color: var(--devsha-blue); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px; }
.print-section .desc { font-size: 11px; line-height: 1.6; color: var(--ds-ink-700); }

.print-tbl { width: 100%; border-collapse: collapse; font-size: 10px; }
.print-tbl thead tr { border-bottom: 1px solid var(--ds-ink-900); }
.print-tbl th { text-align: left; padding: 4px 0; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--ds-ink-500); }
.print-tbl th.right { text-align: right; }
.print-tbl td { padding: 5px 0; font-size: 11px; }
.print-tbl td.right { text-align: right; }
.print-tbl tbody tr { border-bottom: 1px solid var(--ds-ink-100); }
.print-tbl tfoot td { font-weight: 700; }

.print-totals { margin-left: auto; width: 280px; margin-bottom: 16px; }
.print-totals .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 11px; }
.print-totals .row.b { border-bottom: 1px solid var(--border-1); }
.print-totals .total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 2px solid var(--ds-ink-900); }
.print-totals .total-row .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.print-totals .total-row .val { font-size: 22px; font-weight: 800; color: var(--devsha-blue-deep); letter-spacing: -0.02em; font-family: var(--font-sans); }

.print-next {
  background: var(--ds-blue-050);
  border: 1px solid var(--devsha-blue);
  padding: 12px; margin-bottom: 14px;
}
.print-next .lbl { font-size: 9px; font-weight: 600; color: var(--devsha-blue); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 4px; }
.print-next .text { font-size: 11px; color: var(--ds-ink-700); }

/* Sits inline with the rest of the content (no margin-top: auto pushing it
   to the bottom of the page) — that way short rapports don't leave a giant
   empty band before the sig, and tall rapports don't try to balance the sig
   on the very edge of the page boundary. The page-break-inside guards keep
   the two columns together: if both can't fit on the current page, the
   whole grid moves to the next page as a unit instead of splitting. */
.print-sig {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 32px; padding-top: 28px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.print-sig__col {
  display: flex; flex-direction: column;
  page-break-inside: avoid;
  break-inside: avoid;
}
/* The "signature line" — bottom border of this reserved-height area. The
   signature image sits inside, aligned to the bottom so the strokes touch
   the line like a real handwritten signature. */
.print-sig__area {
  min-height: 72px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ds-ink-900);
}
.print-sig__label {
  font-size: 9px; font-weight: 600; color: var(--ds-ink-500);
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-top: 6px;
}
.print-sig__name { font-size: 11px; font-weight: 600; color: var(--ds-ink-900); margin-top: 2px; }
.print-sig__desc { font-size: 10px; color: var(--ds-ink-500); margin-top: 2px; }

.print-foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--border-1); display: flex; justify-content: space-between; font-size: 9px; color: var(--ds-ink-500); }

/* Photo-attachment pages — one A4 sheet per chunk of two photos */
.print-photo-page { padding: 32px 48px; }
.print-photos-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-ink-900);
}
.print-photos-head .lbl {
  font-size: 11px; font-weight: 700;
  color: var(--devsha-blue-deep);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.print-photos-head .meta { font-size: 10px; color: var(--ds-ink-500); }
.print-photos {
  display: flex; flex-direction: column;
  gap: 16px;
  margin: 18px 0;
  flex: 1;
}
.print-photo {
  margin: 0;
  border: 1px solid var(--border-1);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  height: 460px;     /* fits 2 photos per A4 portrait page with header/footer */
  overflow: hidden;
}
.print-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Single-image page (e.g. Fahrzeugausweis) — fill the whole content area */
.print-photo--single {
  height: 940px;     /* one full A4 portrait page, minus header/footer */
}

/* Print stylesheet — render only the page */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .app-nav, .app-topbar, .print-bar, .breadcrumb, .flash { display: none !important; }
  .app-shell { display: block; }
  .app-content { padding: 0; }
  .print-page { width: auto; min-height: auto; box-shadow: none; margin: 0; }
  .print-page + .print-page { page-break-before: always; }
  .print-photo-page { height: 100vh; display: flex; flex-direction: column; }
  .print-photo { page-break-inside: avoid; }
  /* Hard-lock signature to two columns on paper — A4 is narrower than some
     of the screen-preview breakpoints, so we override any stacking here. */
  .print-sig { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* =================================================================
   UTILITIES
   ================================================================= */

.row-flex { display: flex; align-items: center; gap: 8px; }
.row-flex--12 { gap: 12px; }
.col-flex { display: flex; flex-direction: column; gap: 8px; }
.col-flex--12 { gap: 12px; }
.between { justify-content: space-between; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-2 { margin-top: 2px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; } .fs-16 { font-size: 16px; }
.text-blue { color: var(--devsha-blue); }
.text-blue-deep { color: var(--devsha-blue-deep); }
.text-ink-500 { color: var(--ds-ink-500); }
.text-ink-700 { color: var(--ds-ink-700); }

/* focus ring */
:focus-visible {
  outline: 2px solid var(--devsha-blue);
  outline-offset: 2px;
}

/* =================================================================
   FINANCE DASHBOARD
   ================================================================= */

.kpi--draft {
  background: #FBF1DE;
  border-color: #E8C880;
}
.kpi--draft .kpi__head .pixel { background: var(--ds-warning); }
.kpi--draft .kpi__label { color: #8C6516; }
.kpi--draft .kpi__delta { color: #7A560F; }

/* Clickable KPI card — wraps the whole card in <a>. Adds an arrow indicator
   and a subtle hover lift so it reads as interactive. */
.kpi--link {
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.kpi--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 11, 20, 0.08);
}
.kpi__arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.7;
  transition: transform var(--dur-1) var(--ease-out);
}
.kpi--link:hover .kpi__arrow { transform: translateX(2px); opacity: 1; }

/* Dashboard "Offene Aufträge" tile — KPI value at top, then a tight list of
   pipeline rapports stacked inside the same card. */
.kpi__head--link {
  text-decoration: none;
  color: inherit;
  margin: -2px -2px 0;
  padding: 2px;
  transition: opacity var(--dur-1) var(--ease-out);
}
.kpi__head--link:hover { opacity: 0.85; }
.kpi__head--link .kpi__arrow {
  margin-left: auto;
  color: var(--ds-ink-400);
  opacity: 0.7;
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.kpi__head--link:hover .kpi__arrow {
  color: var(--ds-ink-900);
  transform: translateX(2px);
  opacity: 1;
}

.kpi-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-1);
  display: flex; flex-direction: column;
}
/* Bare variant — no big KPI value above, list sits directly under the head. */
.kpi-list--bare {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.kpi-list__empty {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-ink-500);
}
.kpi-list__row {
  display: grid;
  grid-template-columns: 20px 1fr auto 14px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dashed var(--border-1);
  transition: background var(--dur-1) var(--ease-out);
}
.kpi-list__row:last-child { border-bottom: 0; }
.kpi-list__row:hover { background: var(--ds-ink-050); }
.kpi-list__icon {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  flex: none;
}
.kpi-list__icon--neutral { background: var(--ds-ink-100); color: var(--ds-ink-700); }
.kpi-list__icon--blue    { background: var(--ds-blue-050); color: var(--devsha-blue-deep); }
.kpi-list__icon--amber,
.kpi-list__icon--warning { background: #FBF1DE; color: #7A560F; }
.kpi-list__icon--orange  { background: #FFE6CC; color: #A04500; }
.kpi-list__icon--teal,
.kpi-list__icon--mint    { background: #DBF4EE; color: #0F6F5A; }
.kpi-list__icon--green   { background: #C2EBD4; color: #0A5D32; }
.kpi-list__icon--red     { background: #FCEAEA; color: #8C1F1F; }
.kpi-list__icon--muted   { background: var(--ds-ink-100); color: var(--ds-ink-500); }
.kpi-list__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink-900);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-list__id {
  font-size: 11px;
  color: var(--ds-ink-500);
  font-weight: 600;
}
.kpi-list__arrow {
  display: inline-flex; align-items: center;
  opacity: 0.6;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.kpi-list__row:hover .kpi-list__arrow { opacity: 1; transform: translateX(2px); }

/* Status-breakdown rows in the finance dashboard. Each row links to a
   filtered rapport list — track + fill mirrors the per-status color so
   the dominant statuses jump out at a glance. */
.fin-breakdown td { vertical-align: middle; }
.fin-breakdown__label { width: 200px; }
.fin-breakdown__count {
  font-size: 12px;
  color: var(--ds-ink-500);
  white-space: nowrap;
  width: 110px;
}
.fin-breakdown__bar { min-width: 140px; }
.fin-breakdown__track {
  width: 100%;
  height: 6px;
  background: var(--ds-ink-100);
  border-radius: 999px;
  overflow: hidden;
}
.fin-breakdown__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ds-ink-300);
}
.fin-breakdown__fill--neutral { background: #4A4A56; }
.fin-breakdown__fill--blue    { background: #0A1A8F; }
.fin-breakdown__fill--amber   { background: #C28A1F; }
.fin-breakdown__fill--orange  { background: #A04500; }
.fin-breakdown__fill--teal    { background: #0F6F5A; }
.fin-breakdown__fill--warning { background: #5C3E08; }
.fin-breakdown__fill--mint    { background: #0F5A3A; }
.fin-breakdown__fill--green   { background: #0A5D32; }
.fin-breakdown__fill--red     { background: #8C1F1F; }
.fin-breakdown__fill--muted   { background: #989898; }
.fin-breakdown__arrow {
  width: 24px;
  text-align: right;
  opacity: 0.5;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fin-breakdown tr.linky:hover .fin-breakdown__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Rapport list filter bar — flex row with the existing search box plus
   selects for status / customer / car. Selects auto-submit on change. */
.filter-bar {
  margin-bottom: 16px;
}
.filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-bar__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-1);
  flex: 1 1 280px;
  min-width: 220px;
}
.filter-bar__search input {
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ds-ink-900);
  flex: 1;
  outline: none;
  background: transparent;
}
.filter-bar__search input::placeholder { color: var(--ds-ink-500); }
.filter-bar__select {
  padding: 9px 30px 9px 12px;
  border: 1px solid var(--border-1);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--ds-ink-900);
  min-width: 180px;
  max-width: 240px;
  cursor: pointer;
}
.filter-bar__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-ink-600);
  text-decoration: none;
}
.filter-bar__clear:hover { color: var(--ds-ink-900); }

.fin-split-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  margin-top: 16px;
}
.fin-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* Parts / Labour split bar */
.split-bar {
  display: flex; width: 100%; height: 10px;
  background: var(--ds-ink-100);
  overflow: hidden;
  margin-bottom: 14px;
}
.split-bar__parts { background: var(--devsha-blue); }
.split-bar__hours { background: #0A8F4A; }
.split-legend { display: flex; flex-direction: column; gap: 8px; }
.split-legend__row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-1);
}
.split-legend__row:last-child { border-bottom: 0; }
.split-legend__dot {
  width: 10px; height: 10px;
  border-radius: 2px;
}
.split-legend__dot--parts { background: var(--devsha-blue); }
.split-legend__dot--hours { background: #0A8F4A; }
.split-legend__label { color: var(--ds-ink-700); font-weight: 500; }
.split-legend__pct {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--ds-ink-500);
}
.split-legend__val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--devsha-blue-deep);
}

/* 12-month bar chart — pure CSS, no JS library. Each .fin-chart__col is a
   vertical lane with two stacked bars (draft on top of done so the visible
   total height is correct). */
.fin-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-items: end;
  height: 220px;
}
.fin-chart__col {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  height: 100%;
  min-width: 0;
}
.fin-chart__bars {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  background: linear-gradient(to top, var(--ds-ink-050) 0, var(--ds-ink-050) 1px, transparent 1px) repeat-y;
  background-size: 100% 25%;
  border-bottom: 1px solid var(--border-1);
}
.fin-chart__bar {
  width: 100%;
  min-height: 0;
  transition: filter var(--dur-1) var(--ease-out);
}
.fin-chart__bar--done  { background: var(--devsha-blue); }
.fin-chart__bar--draft { background: #C28A1F; opacity: 0.85; }
.fin-chart__col:hover .fin-chart__bar { filter: brightness(0.9); }
.fin-chart__col.is-current .fin-chart__bar--done  { background: var(--devsha-blue-deep); }
.fin-chart__val {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ds-ink-600);
  text-align: center;
  white-space: nowrap;
}
.fin-chart__lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-ink-500);
  text-align: center;
}
.fin-chart__col.is-current .fin-chart__lbl,
.fin-chart__col.is-current .fin-chart__val {
  color: var(--devsha-blue-deep);
}
.fin-chart-legend {
  display: inline-flex; gap: 12px;
  font-size: 11px; color: var(--ds-ink-500);
}
.fin-chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.fin-chart-legend__sw {
  width: 10px; height: 10px;
  border-radius: 2px;
}
.fin-chart-legend__sw--done  { background: var(--devsha-blue); }
.fin-chart-legend__sw--draft { background: #C28A1F; opacity: 0.85; }

/* Top-N list tables — same .tbl visual but tighter row padding */
.tbl--compact th, .tbl--compact td { padding: 10px 14px; }
.fin-top__rank {
  width: 28px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ds-ink-400);
  text-align: right;
}

/* responsive guard: tablet ~1024 */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-cols { grid-template-columns: 1fr; }
  .rapport-cols { grid-template-columns: 1fr; }
  .entity-head__grid-6 { grid-template-columns: repeat(3, 1fr); }
  .entity-head__grid-4 { grid-template-columns: repeat(2, 1fr); }
  .car-grid { grid-template-columns: 1fr; }
  .car-grid__cell:nth-child(odd) { border-right: 0; }
  .fin-split-grid { grid-template-columns: 1fr; }
  .fin-top-grid   { grid-template-columns: 1fr; }
  .fin-chart      { height: 180px; }
}

/* =================================================================
   MOBILE NAV TOGGLE (hamburger) — visible only on small screens
   ================================================================= */

.app-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-1);
  background: #fff;
  flex: none;
  padding: 0;
}
.app-nav__toggle .bars,
.app-nav__toggle .bars::before,
.app-nav__toggle .bars::after {
  display: block;
  width: 18px; height: 2px;
  background: var(--ds-ink-900);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.app-nav__toggle .bars { position: relative; }
.app-nav__toggle .bars::before,
.app-nav__toggle .bars::after {
  content: "";
  position: absolute; left: 0;
}
.app-nav__toggle .bars::before { top: -6px; }
.app-nav__toggle .bars::after  { top:  6px; }
.app-shell.is-nav-open .app-nav__toggle .bars { background: transparent; }
.app-shell.is-nav-open .app-nav__toggle .bars::before { transform: translateY(6px) rotate(45deg); }
.app-shell.is-nav-open .app-nav__toggle .bars::after  { transform: translateY(-6px) rotate(-45deg); }

.app-shell__backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11, 22, 64, 0.45);
  z-index: 30;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.app-shell.is-nav-open .app-shell__backdrop {
  display: block;
  opacity: 1;
}

/* =================================================================
   MOBILE — phones, narrow tablets (≤ 720px)
   ================================================================= */

@media (max-width: 720px) {

  /* ---- Shell becomes single column; sidebar slides in as a drawer ---- */
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-nav {
    position: fixed;
    top: 0; left: 0;
    width: 280px; max-width: 86vw;
    height: 100vh;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform var(--dur-2) var(--ease-out);
    box-shadow: 4px 0 24px rgba(11, 22, 64, 0);
  }
  .app-shell.is-nav-open .app-nav {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(11, 22, 64, 0.18);
  }

  .app-nav__toggle { display: inline-flex; }

  /* ---- Topbar: compact ---- */
  .app-topbar {
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .app-search {
    flex: 1 1 100%;
    order: 10;       /* search drops to a second row on phones */
    max-width: none;
    padding: 8px 10px;
  }
  .app-search .kbd { display: none; }
  .app-topbar .spacer { display: none; }
  .app-topbar .date { display: none; }
  .app-topbar .divider { display: none; }
  /* Hide the "Neuer Kunde" button in topbar — still reachable from /kunden */
  .app-topbar .btn--secondary { display: none; }
  /* Compact the remaining "Neuer Rapport" button */
  .app-topbar .btn { padding: 8px 10px; }

  /* ---- Content area: tighter padding ---- */
  .app-content {
    padding: 16px;
    gap: 16px;
  }

  /* ---- Page header stacks; action rows wrap and fill width ---- */
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-head h1 { font-size: 22px; }
  .page-head .actions {
    flex-wrap: wrap;
    width: 100%;
  }
  /* Inline-styled search forms inside .actions (cars/customers/rapports/search index pages):
     let their text input fill the available width, button stays inline.
     Two shapes are supported: (a) form > input + button (cars/customers), and
     (b) loose input + button directly in .actions (rapports, where the form
     wraps the whole page so the dropdowns submit together). */
  .page-head .actions > form {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .page-head .actions > form > input[type="text"],
  .page-head .actions > input[type="text"] {
    flex: 1 1 100% !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .page-head .actions > a.btn,
  .page-head .actions > button.btn {
    flex: 1 1 auto;
  }

  /* ---- KPIs: single column ---- */
  .kpi-grid { grid-template-columns: 1fr; gap: 12px; }
  .kpi { padding: 16px 18px; }
  .kpi__value { font-size: 30px; }

  /* ---- Finance: tighten chart + per-month labels on phones ---- */
  .fin-chart { height: 160px; gap: 4px; }
  .fin-chart__val { font-size: 10px; }
  .fin-chart__lbl { font-size: 9px; letter-spacing: 0.04em; }
  .fin-chart-legend { flex-wrap: wrap; }

  /* ---- Filter bar: stack inputs full-width on phones ---- */
  .filter-bar__row { flex-direction: column; align-items: stretch; }
  .filter-bar__search,
  .filter-bar__select { width: 100%; max-width: none; min-width: 0; }
  .filter-bar__clear { justify-content: center; }

  /* ---- Status breakdown: drop the percentage bar on tight screens ---- */
  .fin-breakdown__bar { display: none; }
  .fin-breakdown__label { width: auto; }

  /* ---- Entity header: stack image/avatar above body, actions row below ---- */
  .entity-head {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }
  .entity-head__name { font-size: 22px; }
  .entity-head__grid-6 { grid-template-columns: repeat(2, 1fr); }
  .entity-head__grid-4 { grid-template-columns: repeat(2, 1fr); }
  .entity-head__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .entity-head__actions .btn { flex: 1 1 auto; }
  /* SVGs (car_thumb / avatar) can overflow if rendered with fixed width attrs.
     Cap them at the container width and keep aspect ratio. */
  .entity-head > svg { max-width: 100%; height: auto; }

  /* ---- Rapport head (within entity-head): stack, right side aligns left ---- */
  .rapport-head { flex-direction: column; align-items: stretch; }
  .rapport-head__title { font-size: 22px; }
  .rapport-head__total { font-size: 32px; }
  .rapport-head .right,
  .rapport-head > div[style*="text-align:right"] {
    text-align: left !important;
  }
  .rapport-head__actions { justify-content: flex-start; flex-wrap: wrap; }
  .rapport-head__actions .btn { flex: 1 1 auto; }

  /* ---- Card head/body padding ---- */
  .card__head { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .card__body { padding: 14px; }
  /* Cards holding wide tables get horizontal scroll so columns don't blow up the layout */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 480px; }
  .tbl th, .tbl td { padding: 10px 12px; }

  /* Two-column inline grids embedded in card bodies (rapport show + car show)
     collapse to one column. Targets the inline style="display:grid;grid-template-columns:1fr 1fr;..." */
  .card__body[style*="grid-template-columns:1fr 1fr"],
  .card__body[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Rapport rows (dashboard "Neueste Rapporte") ---- */
  .rap-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "date body"
      ".    total";
    padding: 12px 14px;
    row-gap: 4px;
  }
  .rap-row__date  { grid-area: date; }
  .rap-row__body  { grid-area: body; }
  .rap-row__total { grid-area: total; justify-self: end; }

  /* ---- Rapport line (car detail) ---- */
  .rap-line {
    padding: 14px;
    grid-template-columns: 4px 1fr auto;
    gap: 12px;
  }
  .rap-line__bar { height: 32px; }
  .rap-line__total { font-size: 14px; }

  /* ---- Car grid (in customer detail) ---- */
  .car-grid__cell { padding: 14px; gap: 12px; }
  .car-grid__cell > svg { width: 88px; height: auto; flex: none; }

  /* ---- Form panel ---- */
  .form-panel__head { padding: 16px; }
  .form-panel__head h1 { font-size: 20px; }
  .form-panel__body { padding: 16px; gap: 16px; }
  .form-panel__footer {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 10px;
  }
  .form-panel__footer .total-live { text-align: center; }
  .form-panel__actions { flex-wrap: wrap; }
  .form-panel__actions .btn { flex: 1 1 auto; }
  .form-grid-3, .form-grid-2 { grid-template-columns: 1fr; }

  /* Logo upload stacks on small screens */
  .logo-upload { flex-direction: column; }
  .logo-upload__preview { width: 100%; height: 120px; }

  /* ---- Mini table (parts/hours) — reflow into 2-row grid per item ---- */
  .mini-tbl__head { display: none; }
  .mini-tbl__row {
    grid-template-columns: 1fr 1fr 1fr 36px;
    grid-template-areas:
      "title title title trash"
      "qty   price total total";
    gap: 8px;
    padding: 12px;
  }
  .mini-tbl__row > input.title    { grid-area: title; text-align: left; }
  .mini-tbl__row > input[data-qty]   { grid-area: qty; }
  .mini-tbl__row > input[data-price] { grid-area: price; }
  .mini-tbl__row > .total            { grid-area: total; align-self: center; }
  .mini-tbl__row > button.trash      { grid-area: trash; justify-self: end; align-self: start; }

  /* ---- Vehicle picker stack ---- */
  .vehicle-pick { flex-wrap: wrap; }
  .vehicle-pick > svg { width: 56px; height: auto; }
  .vehicle-pick .meta { flex: 1 1 60%; min-width: 0; }

  /* ---- Login page (already centered, just trim padding) ---- */
  body { padding: 16px; }
  .login-card__brand { padding: 20px 20px 16px; }
  .login-card__body  { padding: 20px; }

  /* ---- Touch targets: ensure buttons reach ~40px tap height ---- */
  .btn { min-height: 38px; }
  .btn--sm { min-height: 34px; }
}

/* =================================================================
   PRINT PAGE — screen view fits the viewport on tablets/phones
   (Real printing is unaffected — handled by the @media print block above)
   ================================================================= */

@media (max-width: 860px) {
  .print-bar { padding: 8px 12px; flex-wrap: wrap; }
  .print-bar .info { flex: 1 1 100%; margin-right: 0; margin-bottom: 4px; }
  .print-page {
    width: 100%;
    min-height: 0;
    padding: 28px 24px;
    margin: 12px auto;
    box-shadow: none;
  }
  .print-head { flex-wrap: wrap; gap: 12px; }
  .print-title { flex-wrap: wrap; gap: 12px; margin-top: 16px; }
  .print-info { grid-template-columns: 1fr; }
  .print-totals { width: 100%; }
  /* Signature stays two-column down to phone widths — A4 print is ~794px CSS
     pixels, so this breakpoint must not collapse it for real printing. */
  .print-sig { gap: 20px; }
  .print-foot { flex-wrap: wrap; gap: 4px; }
}

/* Only collapse the signature grid to a single column on actual phone-sized
   screens — desktop preview and A4 print both stay side-by-side. */
@media (max-width: 480px) {
  .print-sig { grid-template-columns: 1fr; gap: 12px; }
}

/* =================================================================
   RAPPORT SHOW — stacked tables on phones
   The parts/hours tables on the rapport detail page convert from a
   4-column table to a 2-line stacked layout per row:
     [title — full width]
     qty · unit                                              total
   Scoped to .rapport-cols only so customer / car index tables keep
   their normal layout (those have different column meanings).
   ================================================================= */

@media (max-width: 520px) {
  .rapport-cols .card { overflow: visible; }
  .rapport-cols .tbl { min-width: 0; }

  .rapport-cols .tbl,
  .rapport-cols .tbl tbody,
  .rapport-cols .tbl tfoot,
  .rapport-cols .tbl tr,
  .rapport-cols .tbl td { display: block; }
  .rapport-cols .tbl thead { display: none; }

  .rapport-cols .tbl tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-1);
  }
  .rapport-cols .tbl tbody tr td {
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 12px;
    color: var(--ds-ink-700);
  }
  /* Title (first cell) spans the entire row, gets bigger weight */
  .rapport-cols .tbl tbody tr td:first-child {
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink-900);
    margin-bottom: 2px;
  }
  /* Last cell (Total) → right-aligned, last column */
  .rapport-cols .tbl tbody tr td:last-child {
    grid-column: 3;
    text-align: right;
    font-weight: 700;
    color: var(--ds-ink-900);
  }

  /* tfoot row with colspan=3 subtotal → label left, total right */
  .rapport-cols .tbl tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--ds-ink-050);
  }
  .rapport-cols .tbl tfoot td { font-size: 12px; padding: 0; }
  .rapport-cols .tbl tfoot td.right.tiny-label { text-transform: uppercase; letter-spacing: 0.10em; color: var(--ds-ink-500); }

  /* Empty-state row ("Keine Ersatzteile.") — keep centered look */
  .rapport-cols .tbl tbody tr td[colspan] {
    grid-column: 1 / -1;
    text-align: center !important;
    padding: 20px 12px;
    font-weight: 400;
    color: var(--ds-ink-500);
  }
}

/* =================================================================
   MOBILE — very small phones (≤ 420px)
   ================================================================= */

@media (max-width: 420px) {
  .app-content { padding: 12px; }
  .breadcrumb { font-size: 11px; }
  .page-head h1 { font-size: 20px; }
  .kpi__value { font-size: 26px; }
  .rapport-head__total { font-size: 28px; }

  /* Mini table: drop to single column to keep tap targets usable on tiny screens */
  .mini-tbl__row {
    grid-template-columns: 1fr 36px;
    grid-template-areas:
      "title trash"
      "qty   qty"
      "price price"
      "total total";
  }
  .mini-tbl__row > input[data-qty],
  .mini-tbl__row > input[data-price] { text-align: left; }
  .mini-tbl__row > .total { text-align: right; }
}

/* =================================================================
   FINANZEN DASHBOARD — Redesign (matches claude-design handoff)
   ================================================================= */

.fin-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Page header --------------------------------------------------- */
.fin-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.fin-pagehead__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--devsha-blue);
}
.fin-pagehead__eyebrow .pixel {
  width: 6px; height: 6px; background: var(--devsha-blue);
  display: inline-block;
}
.fin-pagehead__title-row {
  display: flex; align-items: baseline;
  gap: 14px;
  margin-top: 6px;
}
.fin-pagehead__title {
  font-size: 30px; font-weight: 700;
  color: var(--devsha-blue-deep);
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}
.fin-pagehead__hint {
  font-size: 12px; color: var(--ds-ink-400);
  margin-left: 4px;
}
.fin-arrow {
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-1);
  background: #fff;
  color: var(--ds-ink-700);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.fin-arrow:hover { background: var(--ds-ink-050); color: var(--ds-ink-900); }
.fin-pagehead__sub {
  font-size: 13px;
  color: var(--ds-ink-600);
  margin-top: 6px;
}
.fin-pagehead__sub b { color: var(--ds-ink-900); }
.fin-pagehead__delta { margin-left: 10px; font-weight: 600; }
.fin-pagehead__controls {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}

/* Segmented control — used for period switcher, mode toggle, and tabs */
.fin-seg {
  display: inline-flex;
  border: 1px solid var(--border-1);
  background: #fff;
}
.fin-seg__btn {
  padding: 8px 14px;
  font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--ds-ink-700);
  border: 0;
  border-right: 1px solid var(--border-1);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.fin-seg__btn:last-child { border-right: 0; }
.fin-seg__btn:hover { background: var(--ds-ink-050); }
.fin-seg__btn.is-active {
  background: var(--ds-ink-900);
  color: #fff;
}
.fin-seg__btn.is-disabled,
.fin-seg__btn[disabled] {
  color: var(--ds-ink-300);
  cursor: not-allowed;
  background: transparent;
}

/* ---- KPI strip ----------------------------------------------------- */
.fin-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fin-kpi {
  background: #fff;
  border: 1px solid var(--border-1);
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.fin-kpi--accent {
  background: var(--devsha-blue-deep);
  color: #fff;
  border-color: var(--devsha-blue-deep);
}
.fin-kpi--link {
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.fin-kpi--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 11, 20, 0.08);
}
.fin-kpi__head {
  display: flex; align-items: center; gap: 8px;
}
.fin-kpi__head .pixel {
  width: 6px; height: 6px;
  background: var(--devsha-blue);
  display: inline-block;
}
.fin-kpi__label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
  flex: 1;
  min-width: 0;
}
.fin-kpi--accent .fin-kpi__label { color: rgba(255, 255, 255, 0.75); }
.fin-kpi__arrow {
  display: inline-flex; align-items: center;
  color: var(--ds-ink-400);
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.fin-kpi--link:hover .fin-kpi__arrow {
  color: var(--ds-ink-900);
  transform: translateX(2px);
}
.fin-kpi__value {
  font-size: 34px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
  font-family: var(--font-sans);
}
.fin-kpi__row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
}
.fin-kpi__sub {
  font-size: 11px; color: var(--ds-ink-500);
}
.fin-kpi--accent .fin-kpi__sub { color: rgba(255, 255, 255, 0.7); }
.fin-kpi__spark {
  margin-top: 4px;
  margin-left: -4px; margin-right: -4px;
}
.fin-spark { display: block; width: 100%; height: auto; }
.fin-spark__zone { cursor: crosshair; }
.fin-spark__dot { opacity: 0; transition: opacity 80ms ease-out; pointer-events: none; }
.fin-spark__point.is-active .fin-spark__dot { opacity: 1; }

/* Shared floating tooltip used by both the KPI sparklines and the revenue
   chart bars. Positioned absolutely via JS; the `[hidden]` attribute is
   removed when active. */
.fin-tooltip {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  background: var(--ds-ink-900);
  color: #fff;
  padding: 8px 12px;
  font-size: 12px; font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(11, 11, 20, 0.18);
  transform: translate(-50%, -100%);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-sans);
  min-width: 160px;
}
.fin-tooltip[hidden] { display: none; }
.fin-tooltip::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ds-ink-900);
}
.fin-tooltip__head {
  display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.fin-tooltip__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fin-tooltip__label { font-weight: 600; }
.fin-tooltip__rows {
  display: flex; flex-direction: column;
  gap: 3px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fin-tooltip__rows[hidden] { display: none; }
.fin-tooltip__row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
}
.fin-tooltip__row--strong {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  font-weight: 600;
  font-size: 12px;
}
.fin-tooltip__swatch {
  width: 8px; height: 8px;
  display: inline-block;
}
.fin-tooltip__rowlabel {
  color: rgba(255, 255, 255, 0.65);
}
.fin-tooltip__rowvalue {
  font-family: var(--font-mono);
  color: #fff;
  text-align: right;
}

.fin-revenue__zone { cursor: crosshair; }
.fin-kpi__deltalabel {
  font-size: 10px;
  color: var(--ds-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.fin-kpi--accent .fin-kpi__deltalabel { color: rgba(255, 255, 255, 0.55); }
.fin-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.fin-delta__sign { font-size: 9px; }

/* ---- Card chrome shared by all sections ---------------------------- */
.fin-card {
  background: #fff;
  border: 1px solid var(--border-1);
}
.fin-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-1);
  gap: 16px;
}
.fin-card__head-left {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.fin-card__head-left .pixel {
  width: 8px; height: 8px;
  background: var(--devsha-blue);
  display: inline-block;
}
.fin-card__head-right {
  display: flex; align-items: center; gap: 12px;
}
.fin-card__title {
  font-size: 14px; font-weight: 600;
  color: var(--ds-ink-900);
}
.fin-card__count {
  font-size: 11px; color: var(--ds-ink-500);
}
.fin-card__link {
  font-size: 12px; font-weight: 600;
  color: var(--devsha-blue);
  text-decoration: none;
}
.fin-card__link:hover { text-decoration: underline; }

/* ---- Action panel rows --------------------------------------------- */
.fin-actions { display: flex; flex-direction: column; }
.fin-action {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
/* No-amount variant used on the main dashboard — drops the money column.
   Mechanics see status + context + CTA only. */
.fin-actions--noamount .fin-action {
  grid-template-columns: 32px 1fr auto;
}
.fin-action:last-child { border-bottom: 0; }
.fin-action:hover { background: var(--ds-ink-050); }
.fin-action__icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  flex: none;
}
.fin-action__icon--neutral { background: var(--ds-ink-100); color: var(--ds-ink-700); }
.fin-action__icon--blue    { background: var(--ds-blue-050); color: var(--devsha-blue-deep); }
.fin-action__icon--amber,
.fin-action__icon--warning { background: #FBF1DE; color: #7A560F; }
.fin-action__icon--orange  { background: #FFE6CC; color: #A04500; }
.fin-action__icon--teal,
.fin-action__icon--mint    { background: #DBF4EE; color: #0F6F5A; }
.fin-action__icon--green   { background: #C2EBD4; color: #0A5D32; }
.fin-action__icon--red     { background: #FCEAEA; color: #8C1F1F; }
.fin-action__icon--muted   { background: var(--ds-ink-100); color: var(--ds-ink-500); }

.fin-action__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-action__title-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.fin-action__title { font-size: 13px; font-weight: 600; color: var(--ds-ink-900); }
.fin-action__meta { font-size: 10px; padding: 2px 8px; }
/* Identifiers + approval pill on a single row, sitting next to each other.
   The sub doesn't grow — it takes its natural width so the pill follows
   immediately. If the row runs out of space the sub shrinks (min-width: 0)
   and ellipsises before the pill is touched. */
.fin-action__sub-row {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.fin-action__sub {
  font-size: 12px; color: var(--ds-ink-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 0 1 auto;
}
/* Approval timestamp sits inline with the status + age pills on the title
   row. Matches the .fin-action__meta sizing so all three pills share a
   visual rhythm; green so it reads as "good, you can proceed". */
.fin-action__approval {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  font-size: 10px; font-weight: 600;
  color: #0F5A3A;
  background: #E5F4EC;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fin-action__approval svg { color: currentColor; flex-shrink: 0; }

/* Audit log — long-form summary cells wrap, others stay compact. */
.audit-tbl td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.audit-tbl__summary {
  color: var(--ds-ink-700);
  white-space: normal;
  word-break: break-word;
  max-width: 360px;
}
.audit-pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 16px 0;
}
.audit-pager__info { font-size: 12px; color: var(--ds-ink-500); }
/* Two label variants — full timestamp on desktop, "Kunde bestätigt" short
   form when the row gets cramped. CSS toggles between them. */
.fin-action__approval-short { display: none; }
.fin-action__amount {
  font-size: 13px; font-weight: 600;
  color: var(--devsha-blue-deep);
  text-align: right;
  min-width: 100px;
}
.fin-action__cta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--ds-ink-700);
  border: 1px solid var(--border-1);
  background: #fff;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.fin-action:hover .fin-action__cta {
  background: var(--ds-ink-900);
  color: #fff;
  border-color: var(--ds-ink-900);
}
.fin-actions__empty {
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ds-ink-500);
}

/* ---- Revenue chart ------------------------------------------------- */
.fin-revenue { padding: 16px 12px 8px; }
.fin-revenue__svg { width: 100%; height: auto; display: block; }
.fin-chart-legend {
  display: inline-flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.fin-chart-legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ds-ink-700);
}
.fin-chart-legend__sw {
  width: 10px; height: 10px; display: inline-block;
}
.fin-chart-legend__sw--parts  { background: var(--devsha-blue); }
.fin-chart-legend__sw--labour { background: var(--devsha-blue-deep); }
.fin-chart-legend__sw--hours  {
  width: 14px; height: 2px;
  background: var(--ds-warning);
}
.fin-chartfoot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-1);
}
.fin-chartfoot__cell {
  padding: 12px 18px;
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 2px;
}
.fin-chartfoot__cell:last-child { border-right: 0; }
.fin-chartfoot__label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
}
.fin-chartfoot__value {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
}
.fin-chartfoot__sub {
  font-size: 11px; color: var(--ds-ink-500);
}

/* ---- Split row: donut + status funnel ------------------------------ */
.fin-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
}

/* Donut -------------------------------------------------------------- */
.fin-donut {
  padding: 22px;
  display: flex; align-items: center; gap: 28px;
}
.fin-donut__svg { flex: none; }
.fin-donut__rows {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.fin-donut__row {
  display: flex; align-items: center; gap: 10px;
}
.fin-donut__sw {
  width: 10px; height: 10px;
  flex: none;
}
.fin-donut__sw--parts  { background: var(--devsha-blue); }
.fin-donut__sw--labour { background: var(--devsha-blue-deep); }
.fin-donut__col { flex: 1; min-width: 0; }
.fin-donut__top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.fin-donut__label { font-size: 13px; font-weight: 500; }
.fin-donut__value { font-size: 13px; font-weight: 600; color: var(--ds-ink-900); }
.fin-donut__bottom {
  display: flex; justify-content: space-between; margin-top: 2px;
}
.fin-donut__pct { font-size: 11px; color: var(--ds-ink-500); }
.fin-donut__hint {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--ds-ink-050);
  border-left: 2px solid var(--devsha-blue);
  font-size: 12px; color: var(--ds-ink-700);
  line-height: 1.5;
}
.fin-donut__hint b { color: var(--ds-ink-900); }

/* Status funnel ------------------------------------------------------ */
.fin-funnel { padding: 20px 20px 22px; }
.fin-funnel__bar {
  display: flex; height: 28px;
  border: 1px solid var(--border-1);
  background: var(--ds-ink-050);
}
.fin-funnel__seg {
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
.fin-funnel__seg:last-child { border-right: 0; }

.fin-funnel__rows {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.fin-funnel__row {
  display: grid;
  grid-template-columns: 10px 1fr auto 180px auto;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-1) var(--ease-out);
}
.fin-funnel__row:hover { background: var(--ds-ink-050); }
.fin-funnel__dot {
  width: 8px; height: 8px;
  flex: none;
}
.fin-funnel__label {
  font-size: 13px; font-weight: 500;
}
.fin-funnel__count {
  font-size: 11px; color: var(--ds-ink-500);
}
.fin-funnel__track {
  width: 180px; height: 4px;
  background: var(--ds-ink-100);
  display: inline-block;
}
.fin-funnel__fill { display: block; height: 100%; }
.fin-funnel__amount {
  font-size: 13px; font-weight: 600;
  color: var(--ds-ink-900);
  text-align: right;
  min-width: 100px;
}
.fin-funnel__empty {
  padding: 24px 0;
  text-align: center;
  color: var(--ds-ink-500);
}
.fin-funnel__zeros {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--ds-ink-050);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fin-funnel__zeros-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
}
.fin-funnel__zeros-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.fin-funnel__zero-tag {
  font-size: 11px; color: var(--ds-ink-500);
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--border-1);
  text-decoration: none;
}
.fin-funnel__zero-tag:hover {
  color: var(--ds-ink-900);
  border-color: var(--ds-ink-400);
}

/* Status background shorthand — used by funnel segments + dots */
.status-bg--neutral { background: #C4C4CC; }
.status-bg--blue    { background: var(--devsha-blue); }
.status-bg--amber   { background: #C28A1F; }
.status-bg--orange  { background: #A04500; }
.status-bg--teal    { background: #0F6F5A; }
.status-bg--warning { background: #E0A95C; }
.status-bg--mint    { background: #5FB58A; }
.status-bg--green   { background: var(--ds-success); }
.status-bg--red     { background: var(--ds-danger); }
.status-bg--muted   { background: #C4C4CC; }

/* ---- Top performers ------------------------------------------------ */
.fin-top {
  width: 100%;
  border-collapse: collapse;
}
.fin-top th {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-500);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-1);
  background: var(--ds-ink-050);
}
.fin-top td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  font-size: 13px; color: var(--ds-ink-900);
  vertical-align: middle;
}
.fin-top__rankcol { width: 40px; }
.fin-top__rank {
  color: var(--ds-ink-400);
  font-family: var(--font-mono);
  font-size: 12px;
}
.fin-top__primary {
  display: flex; align-items: center; gap: 12px;
}
.fin-top__detail {
  color: var(--ds-ink-500);
  font-size: 12px;
}
.fin-top__plate {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  background: var(--ds-ink-900);
  color: #fff;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}
.fin-top__marque {
  width: 28px; height: 28px;
  border: 1px solid var(--border-1);
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em;
}
.fin-top__sharecol { width: 160px; }
.fin-top__share {
  display: flex; align-items: center; gap: 8px;
}
.fin-top__sharebar {
  flex: 1; height: 4px;
  background: var(--ds-ink-100);
  display: inline-block;
}
.fin-top__sharefill {
  display: block; height: 100%;
  background: var(--devsha-blue);
}
.fin-top__sharepct {
  font-size: 11px;
  color: var(--ds-ink-500);
  font-family: var(--font-mono);
  min-width: 28px;
  text-align: right;
}
.fin-top__empty {
  text-align: center;
  padding: 24px 16px !important;
  color: var(--ds-ink-500);
}

/* ---- Footer note --------------------------------------------------- */
.fin-foot {
  display: flex; justify-content: space-between;
  padding: 8px 4px 0;
  font-size: 11px;
  color: var(--ds-ink-400);
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1100px) {
  .fin-kpis { grid-template-columns: repeat(2, 1fr); }
  .fin-split { grid-template-columns: 1fr; }
  .fin-chartfoot { grid-template-columns: repeat(2, 1fr); }
  .fin-chartfoot__cell:nth-child(2n) { border-right: 0; }
  .fin-chartfoot__cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-1); }
}
@media (max-width: 720px) {
  .fin-pagehead { gap: 12px; }
  .fin-pagehead__title { font-size: 24px; }
  .fin-pagehead__controls { width: 100%; }
  .fin-kpis { grid-template-columns: 1fr; }
  .fin-kpi__value { font-size: 28px; }
  .fin-action {
    grid-template-columns: 32px 1fr auto;
    row-gap: 8px;
  }
  .fin-action__amount { grid-column: 2; text-align: left; }
  .fin-action__cta { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  /* Narrow viewport: swap the full timestamp for the short label and shrink
     the pill so the identifier text still has room to read before ellipsis. */
  .fin-action__sub-row { gap: 8px; }
  .fin-action__approval { padding: 2px 8px; font-size: 10px; }
  .fin-action__approval-full  { display: none; }
  .fin-action__approval-short { display: inline; }
  .fin-donut { flex-direction: column; align-items: stretch; gap: 16px; }
  .fin-donut__svg { align-self: center; }
  .fin-funnel__row {
    grid-template-columns: 10px 1fr auto;
  }
  .fin-funnel__track { display: none; }
  .fin-chartfoot { grid-template-columns: 1fr; }
  .fin-chartfoot__cell { border-right: 0; border-bottom: 1px solid var(--border-1); }
  .fin-chartfoot__cell:last-child { border-bottom: 0; }
}

/* =================================================================
   CUSTOMER APPROVAL — banner shown on the mechanic's show.php and
   on the public share view. Three states: pending (amber), approved
   (green), declined (red). Eye-catching on purpose: the mechanic
   must see the legal authorisation state at a glance.
   ================================================================= */

.approval-banner {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 16px 0;
  border: 2px solid var(--border-1);
  background: #fff;
  position: relative;
}
.approval-banner__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ds-ink-100);
  color: var(--ds-ink-700);
}
.approval-banner__title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ds-ink-900);
}
.approval-banner__meta {
  font-size: 12px; color: var(--ds-ink-700);
  line-height: 1.5;
  margin-top: 2px;
}
.approval-banner__reason {
  margin-top: 6px;
  padding: 8px 10px;
  background: #fff;
  border-left: 3px solid currentColor;
  font-style: italic;
  color: var(--ds-ink-900);
}
.approval-banner__action { white-space: nowrap; }
.approval-banner__reset { margin: 0; }

.approval-banner--pending {
  border-color: var(--ds-warning, #B7791F);
  background: #FFFBEB;
}
.approval-banner--pending .approval-banner__icon {
  background: #FEF3C7; color: #92400E;
}
.approval-banner--approved {
  border-color: var(--ds-success);
  background: #ECFDF5;
}
.approval-banner--approved .approval-banner__icon {
  background: var(--ds-success); color: #fff;
}
.approval-banner--declined {
  border-color: var(--ds-danger);
  background: #FEF2F2;
  color: var(--ds-danger);
}
.approval-banner--declined .approval-banner__icon {
  background: var(--ds-danger); color: #fff;
}
.approval-banner--declined .approval-banner__title { color: var(--ds-danger); }
.approval-banner--declined .approval-banner__meta { color: var(--ds-ink-900); }

@media (max-width: 720px) {
  .approval-banner {
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 14px;
  }
  .approval-banner__icon { width: 32px; height: 32px; }
  .approval-banner__icon svg { width: 18px; height: 18px; }
  .approval-banner__action,
  .approval-banner__reset {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .approval-banner__action,
  .approval-banner__reset .btn { width: 100%; }
}

/* Signature card in the right column of the mechanic show page. */
.signature-card .card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signature-card__frame {
  background: #fff;
  border: 1px dashed var(--border-1);
  padding: 12px;
  display: grid; place-items: center;
  min-height: 120px;
}
.signature-card__img {
  max-width: 100%;
  max-height: 180px;
  display: block;
}
.signature-card__meta {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--ds-ink-100);
}
.signature-card__name {
  font-size: 13px; font-weight: 600;
  color: var(--ds-ink-900);
}
.signature-card__date {
  font-size: 11px; color: var(--ds-ink-500);
}

/* Audit menu — "..." trigger sits next to the green check in the card head;
   on click a small popover unfolds below it showing IP, User-Agent, and the
   exact legal text shown to the customer at sign time. Kept hidden by
   default so the everyday view stays clean. */
.signature-card__head-right {
  display: inline-flex; align-items: center; gap: 6px;
}
.signature-card__menu-wrap { position: relative; }
.signature-card__menu-toggle {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ds-ink-500);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.signature-card__menu-toggle:hover,
.signature-card__menu-toggle[aria-expanded="true"] {
  background: var(--ds-ink-050);
  border-color: var(--border-1);
  color: var(--ds-ink-900);
}
.signature-card__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(340px, 88vw);
  background: #fff;
  border: 1px solid var(--border-1);
  box-shadow: 0 8px 24px rgba(11, 22, 64, 0.16);
  padding: 12px 14px 14px;
}
.signature-card__menu-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ds-ink-100);
}
.signature-card__menu-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ds-ink-700);
}
.signature-card__menu-close {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ds-ink-500);
}
.signature-card__menu-close:hover { color: var(--ds-ink-900); }
.signature-card__menu-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.signature-card__menu-list dt {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ds-ink-500);
  margin-top: 8px;
}
.signature-card__menu-list dt:first-child { margin-top: 0; }
.signature-card__menu-list dd {
  margin: 2px 0 0 0;
  font-size: 12px; line-height: 1.45;
  color: var(--ds-ink-900);
  word-break: break-word;
}
.signature-card__menu-ua {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ds-ink-700);
}
.signature-card__menu-legal {
  font-style: italic;
  color: var(--ds-ink-700);
  padding-left: 8px;
  border-left: 2px solid var(--ds-ink-200);
}

/* Signature drawn inside .print-sig__area — sits above the signature line
   like a real handwritten signature would. Bottom-aligned via the flex
   parent so the strokes "land" on the line instead of floating above it.
   Canvas is cropped to the strokes' bounding box on submit (see print.php
   exportSignaturePng), so these dimensions render the actual signature at
   readable size instead of a tiny shrunk-down full-canvas image. */
.print-sig__signature {
  display: block;
  max-width: 240px;
  max-height: 68px;
  width: auto; height: auto;
}

/* =================================================================
   CUSTOMER DECISION BAR — shown above the print page on the public
   share view, with prominent approve / decline calls-to-action.
   ================================================================= */

.cust-flash {
  max-width: 794px;
  margin: 16px auto 0;
  padding: 12px 18px;
  background: #ECFDF5;
  border: 1px solid var(--ds-success);
  color: #064E3B;
  font-size: 13px; font-weight: 600;
  text-align: center;
}

.cust-decision {
  max-width: 794px;
  margin: 24px auto 0;
  background: #fff;
  border: 2px solid var(--border-1);
  padding: 22px 28px;
  display: grid;
  gap: 16px;
}
.cust-decision__head { display: flex; flex-direction: column; gap: 6px; }
.cust-decision__title {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-ink-900);
}
.cust-decision__lede {
  font-size: 14px; color: var(--ds-ink-700);
  line-height: 1.55;
  max-width: 640px;
}
.cust-decision__actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.cust-decision__btn {
  min-height: 52px;
  padding: 14px 22px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em;
  flex: 1 1 220px;
}
.cust-decision__btn--approve {
  background: var(--ds-success);
  border-color: var(--ds-success);
  color: #fff;
}
.cust-decision__btn--approve:hover { background: #176B47; border-color: #176B47; }
.cust-decision__btn--decline {
  background: #fff;
  border-color: var(--ds-danger);
  color: var(--ds-danger);
}
.cust-decision__btn--decline:hover { background: #FBE6E3; }

.cust-decision--pending { border-color: var(--devsha-blue); background: #F4F7FF; }
.cust-decision--approved,
.cust-decision--declined {
  grid-template-columns: 52px 1fr;
  align-items: start;
  background: #fff;
}
.cust-decision--approved { border-color: var(--ds-success); background: #ECFDF5; }
.cust-decision--declined { border-color: var(--ds-danger);  background: #FEF2F2; }
.cust-decision__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
}
.cust-decision--approved .cust-decision__icon { background: var(--ds-success); }
.cust-decision--declined .cust-decision__icon { background: var(--ds-danger); }
.cust-decision__reason {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff;
  border-left: 3px solid var(--ds-danger);
  font-style: italic;
  color: var(--ds-ink-900);
}

@media (max-width: 720px) {
  .cust-decision { margin: 12px; padding: 18px; border-radius: 0; }
  .cust-decision__title { font-size: 18px; }
  .cust-decision__btn { flex-basis: 100%; }
}

/* =================================================================
   SIGNATURE MODAL — signature pad dialog opened from the public
   share view. Fixed-position overlay covering the whole viewport so
   the customer can sign comfortably on any device.
   ================================================================= */

.sig-modal[hidden] { display: none; }
.sig-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.sig-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 22, 64, 0.55);
  backdrop-filter: blur(2px);
}
.sig-modal__panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--ds-ink-900);
  padding: 22px 24px 20px;
  display: flex; flex-direction: column;
  gap: 14px;
  box-shadow: 0 18px 48px rgba(11, 22, 64, 0.25);
}
.sig-modal__panel--narrow { width: min(520px, 100%); }
.sig-modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ds-ink-100);
}
.sig-modal__eyebrow {
  font-size: 10px; font-weight: 700;
  color: var(--devsha-blue);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.sig-modal__title {
  margin: 4px 0 0;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-ink-900);
}
.sig-modal__sub {
  margin-top: 6px;
  font-size: 13px; color: var(--ds-ink-700);
  line-height: 1.5;
}
.sig-modal__close {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px; color: var(--ds-ink-500);
}
.sig-modal__close:hover { color: var(--ds-ink-900); }

.sig-modal__field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--ds-ink-700);
}
.sig-modal__field textarea {
  resize: vertical;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--border-1);
  background: #fff;
  min-height: 90px;
  color: var(--ds-ink-900);
}
.sig-modal__field textarea:focus {
  outline: none;
  border-color: var(--devsha-blue);
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.12);
}

.sig-modal__legal {
  padding: 10px 12px;
  background: var(--ds-ink-050);
  border-left: 3px solid var(--devsha-blue);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-ink-700);
}

.sig-modal__error {
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid var(--ds-danger);
  color: var(--ds-danger);
  font-size: 13px;
  font-weight: 600;
}

.sig-modal__actions {
  display: flex; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
}
.sig-modal__actions .btn { min-height: 44px; padding: 10px 18px; }

body.is-modal-open { overflow: hidden; }

/* The actual drawing surface. We size via CSS and the JS resizes the
   backing buffer to match (with DPR scaling). The dashed border defines the
   recommended signing area; the bold baseline near the bottom is where the
   strokes should "land". The "x" mark on the left is the visual cue most
   people recognise from paper forms. */
.sig-pad {
  position: relative;
  background:
    /* dashed cap line at the top of the comfortable signing band */
    linear-gradient(to right,
      var(--ds-ink-200) 0, var(--ds-ink-200) 6px,
      transparent 6px, transparent 12px) 0 22% / 100% 1px no-repeat,
    /* solid signature baseline ~78% down the pad */
    linear-gradient(to right, var(--ds-ink-700), var(--ds-ink-700)) 0 78% / 100% 1.5px no-repeat,
    #fff;
  border: 1px dashed var(--ds-ink-300);
  height: 240px;
}
/* "X" mark to the left of the baseline — universal "sign here" cue. */
.sig-pad::before {
  content: "x";
  position: absolute;
  left: 16px;
  top: 78%;
  transform: translateY(calc(-100% - 2px));
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: 22px; font-weight: 700;
  color: var(--ds-ink-700);
  pointer-events: none;
  line-height: 1;
}
.sig-pad__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* otherwise mobile browsers scroll while signing */
  cursor: crosshair;
}
.sig-pad__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  pointer-events: none;
  color: var(--ds-ink-400, #B6B7C2);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: opacity var(--dur-1) var(--ease-out);
}
.sig-pad__placeholder.is-hidden { opacity: 0; }
.sig-pad__clear {
  position: absolute;
  bottom: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--border-1);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  color: var(--ds-ink-700);
}
.sig-pad__clear:hover { background: var(--ds-ink-050); }

@media (max-width: 720px) {
  .sig-modal__panel { padding: 16px 18px 14px; }
  .sig-modal__title { font-size: 18px; }
  .sig-pad { height: 220px; }
  .sig-modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .sig-modal__actions .btn { width: 100%; }
}

/* On print: hide the public-share decision UI, modals, and any approval
   banners — the printed page should look like the regular invoice. */
@media print {
  .cust-decision, .cust-flash, .sig-modal, .approval-banner { display: none !important; }
}