/* Nimbavero CRM – Ergänzungen zu design-system/tokens.css und primitives.css.
   Keine eigenen Farbwerte: alle Farben kommen aus den Tokens. */

*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0 }
body { font-family: var(--nv-font-sans); color: var(--nv-fg); background: var(--nv-surface); font-size: var(--nv-text-body-sm); line-height: var(--nv-leading-snug) }
h1 { font-size: var(--nv-text-title); letter-spacing: -.6px; margin: 0 0 var(--nv-space-2) }
h2, h3 { margin: 0 0 var(--nv-space-3) }
a { color: var(--nv-fg); text-underline-offset: 3px }
a:hover { color: var(--nv-accent-ink) }
.nv-main { outline: none; max-width: 1600px }
.nv-rail { position: sticky; top: 0; height: 100vh; overflow-y: auto }
.crm-rail-foot { margin-top: auto; padding-top: var(--nv-space-3) }
@media (max-width: 760px) { .nv-rail { position: static; height: auto; padding: var(--nv-space-3) } .nv-rail nav { display: flex; flex-wrap: wrap; gap: var(--nv-space-2) } .nv-nav { flex-direction: row; flex-wrap: wrap } .nv-nav-group { display: none } }

.crm-brand { display: flex; align-items: center; gap: var(--nv-space-2); font-weight: 700; font-size: 20px; text-decoration: none; margin: 0 var(--nv-space-3) var(--nv-space-6); flex-wrap: wrap }
.crm-brand-mark { width: 14px; height: 14px; border-radius: var(--nv-radius-xs); background: var(--nv-accent) }
.crm-brand-sub { width: 100%; font-size: var(--nv-text-micro); letter-spacing: var(--nv-tracking-micro); text-transform: uppercase; color: var(--nv-fg-subtle); font-weight: 700 }
.crm-loading { color: var(--nv-fg-muted) }

.crm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--nv-space-4); flex-wrap: wrap; margin-bottom: var(--nv-space-4) }
.crm-section-title { font-size: var(--nv-text-heading); margin: var(--nv-space-7) 0 var(--nv-space-3) }
.crm-hint { color: var(--nv-fg-muted); font-size: var(--nv-text-caption); margin: 0 0 var(--nv-space-3); max-width: 90ch }
.crm-muted { color: var(--nv-fg-muted) }
.crm-count { margin: var(--nv-space-3) 0 }
.crm-inline { display: inline-flex; gap: var(--nv-space-2); align-items: center; flex-wrap: wrap }
.crm-btn-sm { min-height: 36px; padding: 0 var(--nv-space-3); font-size: var(--nv-text-caption); gap: var(--nv-space-2) }
.crm-badges { display: inline-flex; flex-wrap: wrap; gap: var(--nv-space-1) }

/* Filter */
.crm-filters { background: var(--nv-bg); border: 1px solid var(--nv-rule); border-radius: var(--nv-radius-lg); padding: var(--nv-space-4); margin-bottom: var(--nv-space-4) }
.crm-filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--nv-space-3) }
.crm-filter-search { grid-column: span 2 }
.crm-filter-search input { flex: 1; min-width: 0 }
.crm-filter-search .crm-inline { flex-wrap: nowrap; width: 100% }
.nv-field.crm-filter select, .nv-field.crm-filter input { min-height: 40px }
.crm-scope { margin: var(--nv-space-3) 0 0; font-size: var(--nv-text-caption); color: var(--nv-fg-muted); display: flex; flex-wrap: wrap; gap: var(--nv-space-2); align-items: center }
@media (max-width: 760px) { .crm-filter-search { grid-column: auto } }
.crm-listbar { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--nv-space-4); flex-wrap: wrap; margin-bottom: var(--nv-space-3) }

/* Kennzahlen */
.crm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--nv-space-4) }
.crm-kpis-7 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
.crm-kpi { text-decoration: none; color: var(--nv-fg); transition: border-color var(--nv-dur-base) var(--nv-ease) }
.crm-kpi:hover { border-color: var(--nv-rule-strong); color: var(--nv-fg) }

/* Tabellen */
.nv-panel.nv-table-scroll { padding: 0 }
.crm-next { display: inline-flex; flex-wrap: wrap; gap: var(--nv-space-1) var(--nv-space-2); align-items: center }

/* Pipeline */
.crm-kanban { display: grid; grid-template-columns: repeat(7, minmax(220px, 1fr)); gap: var(--nv-space-3); overflow-x: auto; padding-bottom: var(--nv-space-4); align-items: start }
.crm-col { background: var(--nv-surface-2); border-radius: var(--nv-radius-lg); padding: var(--nv-space-3); min-height: 200px }
.crm-col-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--nv-text-body-sm); margin: 0 0 var(--nv-space-3) }
.crm-col-count { font-variant-numeric: var(--nv-numeric); background: var(--nv-bg); border-radius: var(--nv-radius-pill); padding: 2px 10px; font-size: var(--nv-text-caption) }
.crm-col-empty { color: var(--nv-fg-muted); font-size: var(--nv-text-caption) }
.crm-card { background: var(--nv-bg); border: 1px solid var(--nv-rule); border-radius: var(--nv-radius-md); padding: var(--nv-space-3); margin-bottom: var(--nv-space-2); display: flex; flex-direction: column; gap: var(--nv-space-2) }
.crm-card-title { font-weight: 700; text-decoration: none; overflow-wrap: anywhere }
.crm-card-meta { margin: 0; color: var(--nv-fg-muted); font-size: var(--nv-text-caption) }
.crm-card-next { font-size: var(--nv-text-caption) }
.crm-stage-select, .crm-card select { min-height: 40px; border: 1px solid var(--nv-rule-strong); border-radius: var(--nv-radius-sm); background: var(--nv-bg); font: inherit; padding: 0 var(--nv-space-2) }

/* Aufgaben-Reiter */
.crm-tabs { display: flex; flex-wrap: wrap; gap: var(--nv-space-2); margin: 0 0 var(--nv-space-3) }
.crm-tab { padding: var(--nv-space-2) var(--nv-space-4); border-radius: var(--nv-radius-pill); border: 1px solid var(--nv-rule); text-decoration: none; background: var(--nv-bg) }
.crm-tab[aria-current] { background: var(--nv-fg); color: var(--nv-bg); border-color: var(--nv-fg) }

/* Detail */
.crm-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--nv-space-5); align-items: start; margin-top: var(--nv-space-4) }
@media (max-width: 1100px) { .crm-detail-grid { grid-template-columns: minmax(0, 1fr) } }
.crm-detail-main, .crm-detail-side { display: flex; flex-direction: column; gap: var(--nv-space-5); min-width: 0 }
.crm-detail > .nv-notice { margin-bottom: var(--nv-space-3) }
.crm-restriction { font-size: var(--nv-text-body) }
.crm-contactlinks { margin: 0 0 var(--nv-space-4) }
.crm-form { display: flex; flex-direction: column; gap: var(--nv-space-4) }
.crm-fieldset { border: 0; border-top: 1px solid var(--nv-rule); padding: var(--nv-space-4) 0 0; margin: 0 }
.crm-fieldset legend { font-weight: 700; font-size: var(--nv-text-caption); text-transform: uppercase; letter-spacing: var(--nv-tracking-micro); color: var(--nv-fg-subtle); padding-right: var(--nv-space-2) }
.crm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--nv-space-3) }
.crm-wide { grid-column: 1 / -1 }
.crm-check label { display: flex; align-items: center; gap: var(--nv-space-2); min-height: var(--nv-control-h) }
.crm-check input { width: 20px; height: 20px; min-height: 0 }
.crm-form-actions { display: flex; flex-wrap: wrap; gap: var(--nv-space-3); align-items: center }
.crm-dirty { color: var(--nv-caution); font-weight: 700; font-size: var(--nv-text-caption) }
.crm-save-status { margin: 0; font-size: var(--nv-text-caption); min-height: 1.3em; display: flex; flex-wrap: wrap; gap: var(--nv-space-2); align-items: center }
.crm-save-status[data-status="positiv"] { color: var(--nv-positive) }
.crm-save-status[data-status="negativ"] { color: var(--nv-negative); font-weight: 700 }
.crm-save-status[data-status="info"], .crm-save-status[data-status="neutral"] { color: var(--nv-fg-muted) }
.crm-save-status[data-status="achtung"] { color: var(--nv-caution); font-weight: 700 }
.crm-field-error { color: var(--nv-negative); font-size: var(--nv-text-caption); font-weight: 700; display: block }
.crm-inline-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--nv-space-3); align-items: end; margin-bottom: var(--nv-space-2) }
@media (max-width: 640px) { .crm-inline-form { grid-template-columns: minmax(0, 1fr) } }
.crm-list { list-style: none; margin: 0; padding: 0 }
.crm-list > li { display: flex; justify-content: space-between; gap: var(--nv-space-3); flex-wrap: wrap; padding: var(--nv-space-3) 0; border-bottom: 1px solid var(--nv-rule) }
.crm-list input[type="date"], .crm-list .crm-task-text { min-height: 36px; border: 1px solid var(--nv-rule-strong); border-radius: var(--nv-radius-sm); font: inherit; padding: 0 var(--nv-space-2) }
.crm-offer { border-top: 1px solid var(--nv-rule); padding: var(--nv-space-3) 0 }
.crm-offer-name { margin-bottom: var(--nv-space-2) }
.crm-offer-fields { display: flex; flex-wrap: wrap; gap: var(--nv-space-3); align-items: flex-end }
.crm-offer-field { display: flex; flex-direction: column; gap: var(--nv-space-1); font-size: var(--nv-text-caption); color: var(--nv-fg-muted) }
.crm-offer-field input, .crm-offer-field select { min-height: 40px; border: 1px solid var(--nv-rule-strong); border-radius: var(--nv-radius-sm); font: inherit; font-size: var(--nv-text-body-sm); padding: 0 var(--nv-space-2); width: 130px; color: var(--nv-fg); background: var(--nv-bg) }
.crm-offer-field .crm-cur { width: 70px; text-transform: uppercase }
.crm-totals { display: grid; grid-template-columns: max-content 1fr; gap: var(--nv-space-2) var(--nv-space-5); margin: var(--nv-space-4) 0; font-variant-numeric: var(--nv-numeric) }
.crm-totals dt { font-weight: 700 }
.crm-totals dd { margin: 0 }
.crm-timeline { list-style: none; margin: var(--nv-space-5) 0 0; padding: 0; border-left: 2px solid var(--nv-rule); }
.crm-act { padding: var(--nv-space-2) 0 var(--nv-space-4) var(--nv-space-4); position: relative }
.crm-act::before { content: ''; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--nv-rule-strong) }
.crm-act-contact::before { background: var(--nv-info) }
.crm-act-head { display: flex; flex-wrap: wrap; gap: var(--nv-space-2); align-items: center; font-size: var(--nv-text-caption) }
.crm-act-body { margin: var(--nv-space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere }
.crm-diff { margin: var(--nv-space-1) 0 0; padding-left: var(--nv-space-5); font-size: var(--nv-text-caption); color: var(--nv-fg-muted); overflow-wrap: anywhere }
.crm-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--nv-space-2) var(--nv-space-4); margin: 0 0 var(--nv-space-4) }
.crm-dl dt { font-weight: 700; color: var(--nv-fg-muted) }
.crm-dl dd { margin: 0; overflow-wrap: anywhere }
@media (max-width: 640px) { .crm-dl { grid-template-columns: minmax(0, 1fr) } }
.crm-source { border-top: 1px solid var(--nv-rule); padding: var(--nv-space-2) 0 }
.crm-source summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: var(--nv-space-1); flex-wrap: wrap }
.crm-raw th { text-transform: none; letter-spacing: 0; white-space: normal; width: 30% }
.crm-raw td { white-space: pre-wrap; overflow-wrap: anywhere; height: auto }
.crm-code { background: var(--nv-surface-2); padding: var(--nv-space-3); border-radius: var(--nv-radius-sm); overflow-x: auto; font-family: var(--nv-font-mono); font-size: var(--nv-text-caption) }
.crm-dups { margin-top: var(--nv-space-3) }
.crm-report h3 { margin-top: var(--nv-space-5) }

/* Dialog und Meldung */
.crm-dialog { border: 1px solid var(--nv-rule); border-radius: var(--nv-radius-lg); padding: var(--nv-space-6); max-width: min(640px, 92vw); color: var(--nv-fg); background: var(--nv-bg); box-shadow: var(--nv-shadow-3) }
.crm-dialog::backdrop { background: var(--nv-overlay) }
.crm-dialog h2 { font-size: var(--nv-text-heading) }
.crm-dialog textarea { width: 100% }
.crm-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--nv-space-2); margin-top: var(--nv-space-5) }
.crm-toast { position: fixed; right: var(--nv-space-5); bottom: var(--nv-space-5); max-width: min(420px, 90vw); padding: var(--nv-space-3) var(--nv-space-4); border-radius: var(--nv-radius-md); background: var(--nv-fg); color: var(--nv-bg); box-shadow: var(--nv-shadow-2); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--nv-dur-slow) var(--nv-ease), transform var(--nv-dur-slow) var(--nv-ease); z-index: 10 }
.crm-toast.is-visible { opacity: 1; transform: none }
.crm-toast[data-status="negativ"] { background: var(--nv-negative); color: var(--nv-white) }

/* Aufgaben bearbeiten und erhaltene Eingaben */
.crm-task-edit { display: flex; flex-wrap: wrap; gap: var(--nv-space-2); align-items: center; flex: 1 1 22rem; min-width: 0 }
.crm-task-text { flex: 1 1 14rem; min-width: 0 }
.crm-draft-note { display: block; flex-basis: 100%; color: var(--nv-caution); font-size: var(--nv-text-caption) }
.crm-draft-notice { margin-bottom: var(--nv-space-3) }

/* Gesprächsleitfaden und Vorschau-Website (T-65) */
.crm-guide-group { margin-top: var(--nv-space-4) }
.crm-guide-group h3 { font-size: var(--nv-text-body); margin-bottom: var(--nv-space-2) }
.crm-guide-block { border-top: 1px solid var(--nv-rule); padding: var(--nv-space-2) 0 }
.crm-guide-block summary { cursor: pointer; font-weight: 600; min-height: 32px; display: list-item }
.crm-guide-block p, .crm-guide-block ul { max-width: 75ch; overflow-wrap: anywhere }
.crm-say { margin: var(--nv-space-2) 0; padding: var(--nv-space-2) var(--nv-space-3); border-left: 3px solid var(--nv-accent); background: var(--nv-bg); font-size: var(--nv-text-body); overflow-wrap: anywhere }
.crm-ph { font-weight: 600 }
.crm-ph-missing { background: var(--nv-surface); color: var(--nv-fg-muted); border: 1px dashed var(--nv-rule); padding: 0 var(--nv-space-1); border-radius: var(--nv-radius-xs) }
.crm-preview-link { display: flex; flex-wrap: wrap; gap: var(--nv-space-2); align-items: center; overflow-wrap: anywhere }

/* Akquise (T-67) */
.crm-akq-table td { vertical-align: top }
.crm-akq-gesperrt td { color: var(--nv-fg-muted) }
.crm-akq-table .nv-status { display: inline-flex; position: static; margin: var(--nv-space-1) var(--nv-space-1) 0 0 }
@media (max-width: 760px) {
  .crm-akq-table thead { display: none }
  .crm-akq-table, .crm-akq-table tbody, .crm-akq-table tr, .crm-akq-table td { display: block; width: 100% }
  .crm-akq-table tr { border-bottom: 1px solid var(--nv-rule); padding: var(--nv-space-3) 0 }
  .crm-akq-table td { border: 0; padding: var(--nv-space-1) 0 }
  .crm-akq-table td[data-label]:not(:first-child)::before { content: attr(data-label) ': '; color: var(--nv-fg-muted); font-size: var(--nv-text-caption) }
}
.crm-mockup .nv-panel-head { flex-wrap: wrap; gap: var(--nv-space-2) }
.crm-mockup button[aria-pressed="true"] { background: var(--nv-fg); color: var(--nv-bg) }
.crm-mockup-stage { background: var(--nv-surface); border-radius: var(--nv-radius-lg); padding: var(--nv-space-4); overflow: hidden; display: flex; justify-content: center }
.crm-mockup-device { background: var(--nv-bg); border: 1px solid var(--nv-rule); border-radius: var(--nv-radius-lg); overflow: hidden; flex: none }
.crm-mockup-device iframe { border: 0; display: block }
.crm-mockup-stage[data-modus="handy"] .crm-mockup-device { width: min(390px, 100%); border-radius: 28px; border-width: 8px; border-color: var(--nv-fg) }
.crm-mockup-stage[data-modus="handy"] iframe { width: 100%; height: 700px }
.crm-mockup-stage[data-modus="desktop"] { padding: 0; display: block }
.crm-mockup-stage[data-modus="desktop"] .crm-mockup-device { width: calc(1280px * var(--mockup-scale, 1)); height: calc(800px * var(--mockup-scale, 1)) }
.crm-mockup-stage[data-modus="desktop"] iframe { width: 1280px; height: 800px; transform: scale(var(--mockup-scale, 1)); transform-origin: 0 0 }
.crm-intern { border-left: 4px solid var(--nv-accent) }
.crm-sperre { margin-top: var(--nv-space-4) }
.crm-sperre-btn { width: 100% }

/* T-223: Kampagnen-Text wie in der Mail (Zeilenumbrüche, umbrechen auf schmalen Bildschirmen). */
.crm-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0 0 1rem; }