/* Brücke: alte Klassen (card, btn, badge, table, field, kpi, banner …) im neuen Design (Phase C, D1).
   Lädt nach carmove.css und überschreibt dessen Werte mit den Tokens v2. Seiten, die auf cm-* umgestellt sind,
   brauchen diese Regeln nicht mehr. */

/* Grundfläche */
.cm-content > .card, .cm-content > article.card, .cm-content > .cards > .card { margin: 0; }
.cm-content h1.page-title { display: none; }
.cm-content h2 { font: 600 20px/26px var(--font-display); letter-spacing: -.01em; margin: 0 0 14px; color: var(--ink); }
.cm-content h3 { font: 600 16px/22px var(--font-display); margin: 0 0 10px; color: var(--ink); }
.cm-content p.muted, .cm-content .muted, .cm-content small.muted { color: var(--ink-muted); }
.cm-content a:not([class]) { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* Karte */
.card, article.card, .notification { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; margin-bottom: var(--space-6); color: var(--ink); }
.card.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.notification.is-info { background: var(--info-tint); border-color: var(--info-line); }
.notification.is-negative { background: var(--danger-tint); border-color: var(--danger-line); }

/* Knöpfe */
.btn, button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid transparent; background: var(--brand); color: var(--on-brand); font: 600 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn.primary { background: var(--brand); color: var(--on-brand); }
.btn.secondary, a.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-sunken); color: var(--ink); }
.btn.ghost, a.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--surface-sunken); }
.btn.danger { background: var(--danger); color: var(--on-danger); }
.btn.danger:hover { background: var(--danger); filter: brightness(.95); }
.btn.small, .btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.icon-only { width: 44px; padding: 0; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .icon, .btn .ic { width: 18px; height: 18px; }

/* Badges: Form + Wort */
.badge { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-muted); font: 600 12.5px/1 var(--font-sans); white-space: nowrap; vertical-align: middle; }
.badge::before { content: ""; width: 7px; height: 7px; flex: none; background: currentColor; border-radius: 50%; }
.badge.ok, .badge.success { background: var(--ok-tint); color: var(--ok); }
.badge.warn, .badge.warning { background: var(--warn-tint); color: var(--warn); }
.badge.warn::before, .badge.warning::before { border-radius: 1px; transform: rotate(45deg) scale(.9); }
.badge.danger { background: var(--danger-tint); color: var(--danger); }
.badge.danger::before { border-radius: 1px; }
.badge.info { background: var(--info-tint); color: var(--info); }
.badge.info::before { background: transparent; border: 2px solid currentColor; width: 8px; height: 8px; }
.badge.neutral, .badge.default, .badge.type { background: var(--surface-sunken); color: var(--ink-muted); }
.badge.neutral::before, .badge.default::before, .badge.type::before { display: none; }
.badge.brand { background: var(--brand-tint); color: var(--brand-text); }

/* Kennzahlen */
.kpi, .kpi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.kpi .label, .kpi-tile .label { font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.kpi .value, .kpi-tile .value { font: 700 36px/40px var(--font-sans); letter-spacing: -.02em; color: var(--ink); }
.kpi.ok .value { color: var(--ok); } .kpi.warn .value { color: var(--warn); } .kpi.danger .value { color: var(--danger); }

/* Tabellen */
.table-container, .table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
.table th { padding: 10px 16px; text-align: left; font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.table tbody tr:hover td { background: var(--surface-sunken); }
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .mono, .mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 14px; }
.field > label, .label, label.label { font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), .field select, .field textarea,
.form input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not(.btn), .form select, .form textarea,
.filter-bar input, .filter-bar select, .editor-toolbar input[type=text], .editor-toolbar input[type=number], .editor-toolbar select {
  width: 100%; min-height: 44px; padding: 0 14px; font: 400 15px/1.4 var(--font-sans); color: var(--ink); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; }
.editor-toolbar input[type=text], .editor-toolbar input[type=number], .editor-toolbar select { width: auto; min-height: 36px; padding: 0 10px; font-size: 14px; }
.field input:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.field textarea { min-height: 96px; padding: 12px 14px; }
.field .help, .help { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.field.is-error input, .field.is-error select { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field.is-error .help, .text-danger { color: var(--danger); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 20px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 8px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: var(--space-6); }
.filter-bar .field { margin: 0; flex: 1 1 200px; }
.filter-bar .btn { min-height: 44px; }

/* Hinweise und Meldungen */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); background: var(--info-tint); border: 1px solid var(--info-line); color: var(--ink); margin-bottom: var(--space-4); }
.banner.warn { background: var(--warn-tint); border-color: var(--warn-line); }
.banner.danger { background: var(--danger-tint); border-color: var(--danger-line); }
.banner.ok { background: var(--ok-tint); border-color: var(--ok-line); }
.banner.info { background: var(--info-tint); border-color: var(--info-line); }
.banner strong { font-weight: 600; }
.messages { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--space-6) 0; }
.messages .message, .message { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--ink); color: var(--ground); font-size: 14px; }
.message.success { border-left: 3px solid var(--ok); } .message.error { border-left: 3px solid var(--danger); } .message.warning { border-left: 3px solid var(--warn); } .message.info { border-left: 3px solid var(--info); }

/* Rasterkacheln (Hof-Übersicht, Dashboard alt) */
.yard-grid .yard-tile, .grid > .card { background: var(--surface); border-color: var(--line); color: var(--ink); }
.cards, .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }

/* Hofplan-SVG: Farben aus Tokens v2 */
.yard-svg { background: var(--yard-ground); border: 1px solid var(--line); }
.yard-svg .asphalt { fill: var(--yard-asphalt); }
.yard-svg .area-hall polygon { fill: var(--yard-show); }
.yard-svg .area-building polygon { fill: var(--yard-building); stroke: var(--yard-line); }
.yard-svg .bay { stroke: var(--yard-line); fill: transparent; }
.yard-svg .yard-tile.free .bay { stroke-dasharray: .35 .25; }
.yard-svg .bay-label { fill: var(--ink-muted); font-family: var(--font-mono); }
.yard-svg .free-label { fill: var(--ink-muted); }
.yard-svg .yard-tile.indoor .bay { stroke: var(--yard-line); fill: transparent; }
.yard-svg .car-number, .yard-svg .car-days { fill: var(--y-car-ink); }
.yard-svg .car-window { fill: rgba(0,0,0,.35); }
.yard-svg .edge text { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* Editor-Werkzeugleiste */
.editor-toolbar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.editor-toolbar .btn.tool { min-height: 36px; padding: 0 12px; font-size: 14px; background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.editor-toolbar .btn.tool.active { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.editor-toolbar.tool-panel { background: var(--surface-sunken); }
#yard-stage { background: var(--yard-ground); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.spot-tray { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* Werkstatt-Board alt */
.recon-board .column { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; }
.recon-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.recon-card .recon-actions form { display: inline; }

/* Einrichtungsassistent */
.ob-steps li a { border-radius: 999px; background: var(--surface); color: var(--ink); border-color: var(--line); }
.ob-steps li.current a { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.ob-steps li.done a .n { background: var(--ok); color: var(--surface); }

/* Druck */
@media print { .cm-side, .cm-top, .cm-bottomnav, .cm-fab, .no-print { display: none !important; } .cm-app { display: block; } .cm-content { padding: 0; } }

/* Django-Widgets innerhalb cm-field sehen aus wie cm-input (Erfassung, Einrichtung) */
.cm-field > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]), .cm-field > select, .cm-field > textarea, .cm-field > .cm-select > select, .cm-field > .cm-affix > input {
  width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px/1.4 var(--font-sans); color: var(--ink); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; -webkit-appearance: none; appearance: none; }
.cm-field > .cm-select > select { padding-right: 42px; }
.cm-field > textarea { min-height: 96px; padding: 12px 14px; }
.cm-field > input:hover, .cm-field > .cm-select > select:hover { border-color: var(--line-strong); }
.cm-field > input:focus-visible, .cm-field > .cm-select > select:focus-visible, .cm-field > textarea:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.cm-field.is-scan > input, .cm-field.is-scan > .cm-select > select { background: var(--info-tint); border-color: var(--info-line); }
.cm-field.is-error > input, .cm-field.is-error > .cm-select > select, .cm-field.is-error > textarea { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.cm-check input[type=checkbox] { -webkit-appearance: none; appearance: none; }
.cm-check, .cm-check > span { font: 400 15px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* Spaltenbreiten im Formularraster (Erfassung): am Handy alles volle Breite */
.cm-form-grid .sp2 { grid-column: span 2; } .cm-form-grid .sp3 { grid-column: span 3; } .cm-form-grid .sp4 { grid-column: span 4; }
@media (max-width: 640px) {
  .cm-form-grid .sp2, .cm-form-grid .sp3, .cm-form-grid .sp4 { grid-column: 1 / -1; }
  .cm-steps li { grid-template-columns: 28px minmax(0, 1fr); }
  .cm-steps .end { grid-column: 2; grid-row: auto; margin-top: 4px; }
}
/* Segment-Schalter auch mit Links (Hofplan Raster/Lageplan) */
.cm-seg a { border: 0; background: transparent; color: var(--ink-muted); font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; height: 30px; padding: 0 12px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.cm-seg.lg a { height: 38px; padding: 0 16px; font: 600 14px/1 var(--font-sans); letter-spacing: 0; text-transform: none; border-radius: 6px; }
.cm-seg a:hover { color: var(--ink); }
.cm-seg a[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
/* Hofplan-SVG im cm-yard-Rahmen: Breite nach Plan, nicht erzwungen */
.cm-yard .yard-svg { min-width: 0; width: 100%; }
/* Filterleisten als Formular: carmove.css stellt form auf Spalte, hier wieder Zeile */
form.cm-filters, form.cm-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; margin: 0; }
form.cm-filters label, form.cm-toolbar label, .cm-pagehead label { margin-bottom: 0; }
.cm-filters .cm-searchbox .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.cm-filters .cm-searchbox input { height: 44px; padding: 0 14px 0 40px; }
/* Navigationslisten ohne Link-Unterstreichung (Assistent, Listen, Reiter) */
.cm-content .cm-wizard a, .cm-content .cm-list > li > a, .cm-content .cm-tabs a, .cm-content .cm-seg a { color: inherit; text-decoration: none; }
.cm-content .cm-wizard li.is-active a { color: var(--ink); }
.cm-content .cm-seg a[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
@media (max-width: 640px) {
  #move-orders .cm-list > li > .row { grid-template-columns: auto minmax(0, 1fr); }
  #move-orders .cm-list > li > .row > .cm-row { grid-column: 1 / -1; justify-content: flex-end; }
}
/* Geschlossene Dialoge bleiben unsichtbar, auch wenn eine Klasse display setzt (cm-card auf <dialog>) */
dialog:not([open]) { display: none !important; }
form.cm-toolbar { align-items: center; justify-content: flex-start; }
form.cm-toolbar .cm-find { flex: 1 1 260px; max-width: 520px; }
form.cm-toolbar .end { margin-left: auto; }

/* A-112: Filter-Panel als Blatt (Handy: von unten) */
.cm-filter{position:relative}
.cm-filter > summary{list-style:none;cursor:pointer}
.cm-filter > summary::-webkit-details-marker{display:none}
.cm-filter[open] > .cm-sheet{position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:30;min-width:min(720px,calc(100vw - 32px));padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
@media (max-width:959px){.cm-filter[open] > .cm-sheet{position:fixed;inset:auto 0 0 0;top:auto;max-height:85vh;overflow:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0;min-width:0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}.cm-filter[open]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:29}}