/* JobPipe design system.
   One stylesheet for the whole app: every page extends base.html, so spacing and
   colour live here only. Do not copy blocks of this into templates. */

:root {
  color-scheme: light;

  /* Neutrals, very slightly cooled towards the accent so the palette reads as one family. */
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-2: #f1f6f6;
  --surface-3: #e7eff0;
  --border: #dde8e9;
  --border-strong: #c6d7d9;

  --text: #0e2027;
  --text-2: #3a545e;
  --muted: #6b8590;

  /* Turquoise accent. */
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-deep: #115e59;
  --accent-soft: #e7faf6;
  --accent-line: #a5ebe0;
  --accent-text: #0a6c61;

  /* Status hues, all desaturated to sit next to the accent without shouting. */
  --info: #1d4ed8;
  --info-soft: #eaf1fe;
  --warn: #92610a;
  --warn-soft: #fdf5e4;
  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --success: #14724a;
  --success-soft: #e6f6ee;
  --neutral-soft: #eef3f4;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(13, 42, 51, 0.05);
  --shadow: 0 2px 4px rgba(13, 42, 51, 0.05), 0 1px 2px rgba(13, 42, 51, 0.04);
  --shadow-lg: 0 12px 28px rgba(13, 42, 51, 0.09), 0 2px 6px rgba(13, 42, 51, 0.05);

  --sidebar-w: 264px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- layout */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 200ms var(--ease);
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 16px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-head {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 26px;
}

.brand {
  display: block;
  margin: 0 0 0 8px;
}

.collapse-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 30px;
  justify-content: center;
  padding: 0;
  transition: background 140ms var(--ease), color 140ms var(--ease),
    transform 200ms var(--ease);
  width: 30px;
}

.collapse-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.collapse-toggle .icon {
  height: 17px;
  width: 17px;
}

.brand:hover {
  text-decoration: none;
}

.brand strong {
  color: var(--text);
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.brand span {
  color: var(--muted);
  display: block;
  font-size: 12.5px;
  margin-top: 1px;
}

/* Grouped nav. Every group uses the same rhythm, which is what keeps the
   spacing identical on every page. */
.nav-group {
  display: grid;
  gap: 2px;
  margin-bottom: 18px;
}

.nav-group-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: 0 10px 6px;
  text-transform: uppercase;
}

.nav-link {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  display: flex;
  font-size: 14.5px;
  font-weight: 550;
  gap: 10px;
  padding: 9px 10px;
  position: relative;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 650;
}

.nav-link.active::before {
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  content: "";
  height: 18px;
  left: -16px;
  position: absolute;
  width: 3px;
}

.nav-link .icon {
  color: currentColor;
  flex: none;
  height: 17px;
  opacity: 0.75;
  width: 17px;
}

.nav-link.active .icon {
  opacity: 1;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding: 14px 10px 0;
}

.sidebar-user {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-workspace {
  color: var(--muted);
  font-size: 12.5px;
}

.linkbutton {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  margin-top: 6px;
  padding: 0;
  text-align: left;
  transition: color 140ms var(--ease);
}

.linkbutton:hover {
  color: var(--accent-text);
}

.main {
  min-width: 0;
  padding: 30px 32px 64px;
}

/* Back to the page you came from, on every screen. */
.back-link {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 6px;
  margin-bottom: 14px;
  transition: color 140ms var(--ease), transform 140ms var(--ease);
}

.back-link:hover {
  color: var(--accent-text);
  text-decoration: none;
  transform: translateX(-2px);
}

.back-link .icon {
  height: 15px;
  width: 15px;
}

.page-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-head h1 {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0;
}

.eyebrow {
  color: var(--accent-text);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.subtitle {
  color: var(--muted);
  margin: 5px 0 0;
  max-width: 68ch;
}

.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------- buttons */

.btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
  padding: 8px 13px;
  transition: background 140ms var(--ease), border-color 140ms var(--ease),
    transform 140ms var(--ease), box-shadow 140ms var(--ease);
  white-space: nowrap;
}

.btn:hover {
  background: var(--surface-2);
  border-color: var(--muted);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  height: 15px;
  width: 15px;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}

.btn.ghost:hover {
  background: var(--surface-2);
  border-color: transparent;
}

.btn.small {
  font-size: 13px;
  padding: 6px 10px;
}

.btn.danger {
  border-color: #eeb9b5;
  color: var(--danger);
}

.btn.danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.inline-form {
  display: inline-flex;
  margin: 0;
}

/* --------------------------------------------------------- surfaces/cards */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.panel-pad {
  padding: 18px;
}

.panel h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.metrics {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 20px;
}

.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 17px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.metric:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}

.metric-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
}

.metric-value {
  font-size: 27px;
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* ------------------------------------------------------------- job cards */

.card-list {
  display: grid;
  gap: 12px;
}

.job-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 17px 18px 14px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease),
    transform 160ms var(--ease);
}

.job-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.job-card-top {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

/* Title and its classification read as one line. */
.job-card-headline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 5px;
}

/* Der Vorbehalt steht neben dem Titel und nicht bei den Einordnungen: Er
   sagt etwas über die Stelle selbst aus, nicht über ihr Fach. Bernstein,
   weil es eine Warnung ist und keine Ablehnung - die Stelle ist echt, nur
   ihre Herkunft ist offen. */
.job-card-unverified {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  cursor: help;
  font-weight: 500;
  white-space: nowrap;
}

.job-card-title {
  font-size: 16.5px;
  font-weight: 720;
  letter-spacing: -0.012em;
  margin: 0;
}

.job-card-title a {
  color: var(--text);
}

.job-card-title a:hover {
  color: var(--accent-text);
}

.job-card-company {
  align-items: center;
  color: var(--accent-text);
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  gap: 6px;
}

.job-card-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px 14px;
  margin-top: 6px;
}

.job-card-meta span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.job-card-side {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-card-actions {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
}

/* The two rating buttons sit together, flush right. */
.job-card-actions .rate-first {
  margin-left: auto;
}

/* Icon-only buttons: a thumb needs no label beside it. */
.btn.icon-only {
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 38px;
}

.btn.icon-only .icon {
  height: 17px;
  width: 17px;
}

/* Star / bookmark toggle. */
.star {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--border-strong);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  padding: 0;
  transition: color 140ms var(--ease), background 140ms var(--ease),
    transform 140ms var(--ease);
  width: 30px;
}

.star:hover {
  background: var(--surface-2);
  color: var(--accent);
  transform: scale(1.12);
}

.star.on {
  color: #e8a317;
}

.star .icon {
  height: 20px;
  width: 20px;
}

/* A dismissed posting stays readable but recedes. */
.job-card.dimmed {
  opacity: 0.62;
}

.job-card.dimmed:hover {
  opacity: 1;
}

/* "Already seen": deliberately quiet, so unread postings stand out. */
.btn.seen {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

.btn.seen:hover {
  background: var(--surface-3);
  color: var(--text-2);
}

/* Rating buttons. Tinted, not saturated - a feed of these should stay calm. */
.btn.yes {
  background: var(--success-soft);
  border-color: #b9e0cb;
  color: var(--success);
}

.btn.yes:hover,
.btn.yes.on {
  background: #d3efe0;
  border-color: var(--success);
}

.btn.no {
  background: var(--danger-soft);
  border-color: #f0c8c5;
  color: var(--danger);
}

.btn.no:hover,
.btn.no.on {
  background: #fbdedc;
  border-color: var(--danger);
}

.btn.yes.on,
.btn.no.on {
  font-weight: 750;
}

/* Contact expander: <details> so it works with JavaScript disabled. */
.contact-toggle {
  position: relative;
}

/* Cards that come later in the DOM would paint over an open panel, so the
   card holding it is lifted for as long as it is open. */
.job-card:has(.contact-toggle[open]) {
  position: relative;
  z-index: 40;
}

.contact-toggle > summary {
  cursor: pointer;
  list-style: none;
}

.contact-toggle > summary::-webkit-details-marker {
  display: none;
}

.contact-toggle[open] > summary {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.contact-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 14px;
  left: 0;
  margin-top: 8px;
  min-width: 320px;
  padding: 16px;
  position: absolute;
  top: 100%;
  z-index: 30;
}

.contact-person {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.contact-person .label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.contact-person .value {
  font-weight: 650;
}

/* Collapsible group blocks. <details> so they fold without JavaScript. */
.group-block {
  margin-bottom: 24px;
}

.group-head {
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 12px;
  padding-bottom: 8px;
}

.group-head::-webkit-details-marker {
  display: none;
}

.group-title {
  align-items: center;
  display: inline-flex;
  font-size: 15.5px;
  font-weight: 720;
  gap: 7px;
  letter-spacing: -0.01em;
}

.group-caret {
  color: var(--muted);
  height: 15px;
  transform: rotate(-90deg);
  transition: transform 160ms var(--ease);
  width: 15px;
}

.group-block[open] > .group-head .group-caret {
  transform: none;
}

/* Nested levels step in, so the hierarchy is readable at a glance. */
.group-block .group-body {
  padding-left: 0;
}

.group-block.level-1,
.group-block.level-2 {
  margin-bottom: 14px;
}

.group-block.level-1 > .group-head,
.group-block.level-2 > .group-head {
  border-bottom: 0;
  margin-bottom: 8px;
  padding-bottom: 4px;
}

.group-block.level-1 > .group-head .group-title,
.group-block.level-2 > .group-head .group-title {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 650;
}

.group-block.level-1 > .group-body {
  border-left: 2px solid var(--border);
  margin-left: 6px;
  padding-left: 14px;
}

.group-block.level-2 > .group-body {
  border-left: 2px solid var(--surface-3);
  margin-left: 6px;
  padding-left: 14px;
}

/* ------------------------------------------------------- search bar */

.searchbar {
  margin-bottom: 18px;
}

.searchbar-modes {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-bottom: 6px;
  padding-left: 14px;
}

.searchbar-mode-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  font-family: inherit;
  transition: color 140ms var(--ease);
}

.searchbar-mode-link:hover {
  color: var(--text);
}

.searchbar-mode-link.active {
  color: #0d9488;
}

.searchbar-mode-link.smart.active {
  color: #2563eb;
}

.searchbar-row {
  align-items: stretch;
  display: flex;
  gap: 8px;
  position: relative;
}

/* Die KI-Suchzeile enthält die Eingabe-Pille UND die Antwort/Karten als
   Geschwister. In der Standard-Richtung (row) mit align-items:stretch dehnt
   sich die 999px-Pille auf die volle Höhe der Antwortbox und wird zu einem
   riesigen lila Bogen links. Also: Pille oben (natürliche Höhe, volle Breite),
   Antwort voll darunter. */
.searchbar-row[id$="row-smart"] {
  flex-direction: column;
  align-items: stretch;
}
.searchbar-row[id$="row-smart"] > .searchbar-input {
  flex: 0 0 auto;
}
.ai-search-controls {
  align-items: stretch;
  display: flex;
  gap: 8px;
}
.ai-search-controls > .searchbar-input {
  flex: 1 1 auto;
}
@media (max-width: 720px) {
  .ai-search-controls {
    align-items: stretch;
    flex-direction: column;
  }
}

/* KI-Suche als Gespräch: Frage rechts (lila), Antwort links (weiß), die
   Stellenkarten unter der Antwort. Der Verlauf wächst nach unten, damit
   Nachfragen sichtbar bleiben. */
#ai-thread,
#company-ai-thread {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-msg {
  display: flex;
  flex-direction: column;
}
.ai-msg-user {
  align-items: flex-end;
}
.ai-bubble {
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 12px 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-width: 100%;
}
.ai-bubble-user {
  align-self: flex-end;
  max-width: 82%;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  border: none;
  border-radius: 14px 14px 4px 14px;
  padding: 10px 15px;
  font-weight: 500;
  white-space: pre-wrap;
}
.ai-bubble-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}
.ai-bubble-meta {
  margin-top: 8px;
  font-size: 0.82rem;
  color: #6b7280;
  font-weight: 600;
}
.ai-typing {
  color: #2563eb;
}
.ai-abfrage {
  margin-top: 8px;
}
.ai-abfrage > summary {
  cursor: pointer;
  font-size: 0.76rem;
  color: #9ca3af;
  list-style: none;
}
.ai-abfrage > summary::-webkit-details-marker {
  display: none;
}
.ai-abfrage-code {
  margin-top: 4px;
  font-size: 0.76rem;
  color: #6b7280;
  white-space: pre-wrap;
}
.ai-msg-cards {
  margin-top: 10px;
}

/* Kopfzeile des KI-Gesprächs mit Leeren-Knopf, darunter die Kommentare, und
   klar abgesetzt die eine Trefferliste, die sich je Frage aktualisiert. */
.ai-conv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ai-conv-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d4ed8;
  letter-spacing: 0.02em;
}
.ai-clear-btn {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.ai-clear-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
#ai-thread,
#company-ai-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Nur die letzten Nachrichten sichtbar; ältere bleiben per Scrollen im
     Verlauf erreichbar, statt die Trefferliste immer weiter nach unten zu
     schieben. overscroll-behavior: contain, damit das Scrollen am Rand nicht
     die ganze Seite mitzieht. */
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding-right: 6px;
}
/* Der Chatverlauf sitzt in einer hell hinterlegten Box, damit er sich vom
   Rest der Seite abhebt; die Trefferliste darunter bleibt auf normalem Grund. */
.ai-chatbox {
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 14px 16px;
}
/* Modell + geschätzte Kosten unter der Antwort - dezent wie ein Timestamp. */
.ai-bubble-cost {
  margin-top: 6px;
  font-size: 0.74rem;
  color: #9ca3af;
}
/* Die Trefferliste unten vom Gespräch trennen - eine dünne Linie und Luft,
   damit klar ist: oben der Dialog, unten das aktuelle Ergebnis. */
#ai-cards:not(:empty) {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#ki-treffer {
  transition: opacity 120ms var(--ease);
}
#ki-pagination,
#company-ai-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 4px;
  flex-wrap: wrap;
}
.ki-seite-btn {
  border: 1px solid var(--border, #e5e7eb);
  background: #ffffff;
  color: #1d4ed8;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
}
.ki-seite-btn:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #93c5fd;
}
.ki-seite-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.ki-seite-info {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
}

/* Verlauf-Aufklappliste an der KI-Suche: die letzten Suchen zum erneuten
   Ausführen. */
.ai-tools {
  position: relative;
  margin-top: 8px;
}
.ai-verlauf-btn {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ai-verlauf-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.ai-verlauf-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 300px;
  max-width: 460px;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
}
.ai-verlauf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.86rem;
  color: #374151;
}
.ai-verlauf-item:hover {
  background: #eff6ff;
}
.ai-verlauf-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Suchverlauf-Panel (dritter Tab): scrollbare Liste aller Suchen mit einem
   Typ-Badge (KI blau, Standard türkis). */
.verlauf-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 6px;
  background: #ffffff;
}
.verlauf-badge {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.verlauf-badge.ki {
  background: #eff6ff;
  color: #1d4ed8;
}
.verlauf-badge.standard {
  background: #f0fdfa;
  color: #0f766e;
}
.ai-verlauf-wann {
  flex-shrink: 0;
  font-size: 0.74rem;
  color: #9ca3af;
}
.ai-verlauf-leer {
  padding: 10px 12px;
  font-size: 0.84rem;
  color: #9ca3af;
}

/* The text field carries the whole bar's weight; the filter button sits
   beside it rather than inside a second frame. */
.searchbar-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex: 1;
  min-width: 0;
  position: relative;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.searchbar-input:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
}

.searchbar-icon {
  color: var(--muted);
  height: 17px;
  left: 16px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
}

.searchbar-input > input[type="search"] {
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px 11px 42px;
  width: 100%;
}

.searchbar-input > input[type="search"]:focus {
  box-shadow: none;
  outline: none;
}

/* The operator cockpit's filter row - text search plus a few selects, one
   row, one submit. Simpler than `.searchbar-row` (no dropdown panel, no
   chips - a couple of selects do not need one), but the same visual family:
   the text field gets the pill-and-icon treatment `.searchbar-input`
   already defines, so a cockpit list and a customer-facing search read as
   the same product rather than two different eras of it. The bar itself had
   no layout rule at all before this - every field just stacked as a bare
   form control, unaligned and ungrouped. */
.filterbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.filterbar .searchbar-input {
  flex: 1 1 240px;
}

.filterbar select.input {
  flex: 0 1 auto;
  width: auto;
}

.searchbar-menu {
  position: relative;
}

.searchbar-menu > summary {
  border-radius: 999px;
  cursor: pointer;
  height: 100%;
  list-style: none;
  padding: 10px 16px;
  white-space: nowrap;
}

.searchbar-menu > summary::-webkit-details-marker {
  display: none;
}

.searchbar-menu > summary .caret {
  transition: transform 160ms var(--ease);
}

.searchbar-menu[open] > summary {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.searchbar-menu[open] > summary .caret {
  transform: rotate(180deg);
}

/* The dropdown itself: airy, one soft frame, no boxes inside boxes. */
.searchbar-panel {
  animation: panel-in 160ms var(--ease);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: 26px;
  margin-top: 10px;
  padding: 20px 22px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.panel-col {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 210px;
}

.panel-col + .panel-col {
  border-left: 1px solid var(--border);
  padding-left: 26px;
}

.panel-head {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 11.5px;
  font-weight: 750;
  gap: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-head .icon {
  color: var(--accent);
  height: 14px;
  width: 14px;
}

/* Multi-select filter groups inside the panel. */
.filter-groups {
  display: grid;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.filter-group > summary {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  font-size: 13.5px;
  font-weight: 620;
  gap: 7px;
  list-style: none;
  padding: 8px 9px;
}

.filter-group > summary::-webkit-details-marker {
  display: none;
}

.filter-group > summary:hover {
  background: var(--surface-2);
}

.filter-group > summary .caret {
  color: var(--muted);
  height: 14px;
  margin-left: auto;
  transition: transform 160ms var(--ease);
  width: 14px;
}

.filter-group[open] > summary .caret {
  transform: rotate(180deg);
}

.filter-count {
  background: var(--accent);
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 750;
  min-width: 18px;
  padding: 1px 6px;
  text-align: center;
}

.filter-options {
  display: grid;
  gap: 1px;
  max-height: 190px;
  overflow-y: auto;
  padding: 2px 0 6px 9px;
}

.filter-option {
  align-items: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  font-size: 13.5px;
  gap: 8px;
  padding: 5px 8px;
}

.filter-option:hover {
  background: var(--surface-2);
}

.filter-option[hidden] {
  display: none;
}

.filter-option input {
  margin: 0;
  width: auto;
}

.filter-option:has(input:checked) {
  color: var(--accent-text);
  font-weight: 620;
}

.panel-field {
  display: grid;
  gap: 5px;
}

.panel-field > label {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.panel-field select {
  background: var(--surface-2);
  border-color: transparent;
  font-size: 13.5px;
  padding: 8px 10px;
}

.panel-field select:hover {
  background: var(--surface-3);
}

.panel-field select:focus {
  background: var(--surface);
  border-color: var(--accent);
}

.panel-actions {
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 14px;
}

/* Toggle list for grouping, the way a menu behaves in Odoo. */
.menu-item {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  display: flex;
  font-size: 14px;
  gap: 9px;
  padding: 7px 9px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.menu-item.on {
  color: var(--accent-text);
  font-weight: 650;
}

/* Fixed box so the row never shifts when the tick appears. */
.menu-check {
  align-items: center;
  color: var(--accent);
  display: inline-flex;
  flex: none;
  height: 15px;
  justify-content: center;
  opacity: 0;
  width: 15px;
}

.menu-check .icon {
  height: 14px;
  width: 14px;
}

.menu-item.on .menu-check {
  opacity: 1;
}

/* What is currently applied, as removable chips. */
.searchbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-2);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
  padding: 5px 11px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.chip:hover {
  text-decoration: none;
}

.chip-x {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: color 140ms var(--ease);
}

.chip:hover .chip-x {
  color: var(--danger);
}

.chip.keyword {
  background: var(--surface-3);
}

.chip.filter {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.chip.group {
  background: var(--info-soft);
  color: var(--info);
}

.chip.clear {
  background: transparent;
  border-color: var(--border-strong);
  border-style: dashed;
  color: var(--muted);
}

.chip.clear:hover {
  border-color: var(--danger);
  color: var(--danger);
}

@media (max-width: 720px) {
  .searchbar-panel {
    flex-direction: column;
    gap: 18px;
    left: 0;
    right: 0;
  }

  .panel-col + .panel-col {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 18px;
  }
}

/* A metric that is also a filter. */
a.metric.filterable {
  color: inherit;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

a.metric.filterable:hover {
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}

a.metric.filterable.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

a.metric.filterable.active .metric-label,
a.metric.filterable.active .meta {
  color: var(--accent-text);
}

/* --------------------------------------------------------------- badges */

.badge {
  align-items: center;
  background: var(--neutral-soft);
  border-radius: 999px;
  color: var(--text-2);
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  gap: 5px;
  padding: 4px 9px;
  white-space: nowrap;
}

.badge.accent {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.badge.info {
  background: var(--info-soft);
  color: var(--info);
}

.badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.success {
  background: var(--success-soft);
  color: var(--success);
}

.badge .dot {
  background: currentColor;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* -------------------------------------------------------------- filters */

.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  padding: 15px 16px;
}

.filter-grid {
  align-items: end;
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > .field-label,
label.field > span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
  outline: none;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

/* Search-mode tabs (freetext vs. fields). */
.tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 2px;
  margin-bottom: 15px;
}

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  margin-bottom: -1px;
  padding: 8px 13px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--accent-text);
}

.tab-panel[hidden] {
  display: none;
}

.smart-search {
  display: grid;
  gap: 10px;
}

.smart-row {
  display: flex;
  gap: 10px;
}

.smart-row input {
  flex: 1;
}

.smart-hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0;
}

/* --------------------------------------------------------------- tables */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  font-size: 14px;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 13px 15px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr {
  transition: background 120ms var(--ease);
}

tbody tr:hover {
  background: var(--surface-2);
}

tr:last-child td {
  border-bottom: 0;
}

.cell-title {
  font-weight: 680;
  margin-bottom: 2px;
}

.cell-title a {
  color: var(--text);
}

.cell-title a:hover {
  color: var(--accent-text);
}

.meta {
  color: var(--muted);
  font-size: 13px;
}

.stack {
  display: grid;
  gap: 5px;
}

/* --------------------------------------------------------- forms/actions */

.stacked-form {
  display: grid;
  gap: 13px;
  justify-items: start;
}

.stacked-form .field {
  width: 100%;
}

.field-error {
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
}

/* Row of controls for one user. Wraps rather than overflowing on narrow rows. */
.user-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-actions select {
  font-size: 13px;
  padding: 6px 9px;
  width: auto;
}

/* ------------------------------------------------------------- insights */

.window-picker {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.window-picker .field-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-right: 4px;
  text-transform: uppercase;
}

/* Change indicator. Colour alone never carries the meaning: there is always an
   arrow and a sign next to it. */
.delta {
  align-items: center;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 700;
  gap: 3px;
  white-space: nowrap;
}

.delta .icon {
  height: 13px;
  width: 13px;
}

.delta.up {
  color: var(--success);
}

.delta.down {
  color: var(--danger);
}

.delta.flat {
  color: var(--muted);
  font-weight: 600;
}

.bar-list {
  display: grid;
  gap: 13px;
}

.bar-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 5px;
}

.bar-name {
  font-size: 14px;
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-figures {
  align-items: baseline;
  display: inline-flex;
  flex: none;
  gap: 8px;
}

.bar-track {
  background: var(--surface-3);
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.bar-fill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
  min-width: 3px;
  transition: width 420ms var(--ease);
}

/* Weekly column chart, pure CSS so there is no charting dependency. */
.chart {
  align-items: flex-end;
  display: flex;
  gap: 8px;
  min-height: 170px;
  overflow-x: auto;
  padding-top: 6px;
}

.chart-col {
  align-items: center;
  display: flex;
  flex: 1 0 44px;
  flex-direction: column;
  gap: 5px;
  height: 160px;
  justify-content: flex-end;
}

.chart-bar {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 5px 5px 0 0;
  min-height: 3px;
  transition: height 420ms var(--ease);
  width: 100%;
}

.chart-value {
  font-size: 12.5px;
  font-weight: 700;
}

.chart-label {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.signal-row {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.signal-figure {
  flex: none;
  text-align: right;
}

.signal-figure strong {
  display: block;
  font-size: 19px;
  font-weight: 740;
  line-height: 1.2;
}

/* ------------------------------------------------------- misc components */

.empty {
  color: var(--muted);
  padding: 40px 24px;
  text-align: center;
}

.empty strong {
  color: var(--text-2);
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

/* Confirmations appear bottom right and leave on their own, so the page does
   not jump every time something is saved. Errors stay until dismissed. */
.toasts {
  bottom: 20px;
  display: grid;
  gap: 10px;
  justify-items: end;
  max-width: min(380px, calc(100vw - 32px));
  position: fixed;
  right: 20px;
  z-index: 80;
}

.toast {
  align-items: flex-start;
  animation: toast-in 240ms var(--ease);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  display: flex;
  font-size: 14px;
  font-weight: 550;
  gap: 12px;
  padding: 13px 14px;
}

.toast.error {
  border-color: #eeb9b5;
  border-left-color: var(--danger);
  color: var(--danger);
}

.toast.leaving {
  animation: toast-out 220ms var(--ease) forwards;
}

.toast-close {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  margin-left: auto;
  padding: 0 2px;
}

.toast-close:hover {
  color: var(--text);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(16px);
  }
}

@media (max-width: 720px) {
  .toasts {
    left: 16px;
    max-width: none;
    right: 16px;
  }
}

.messages {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.message {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 9px;
  padding: 11px 13px;
}

.message.error {
  background: var(--danger-soft);
  border-color: #eeb9b5;
  color: var(--danger);
}

.layout-split {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
}

.layout-narrow {
  max-width: 620px;
}

.grid-2 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.definition .label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.definition .value {
  font-weight: 620;
  margin-top: 2px;
}

.row-item {
  border-top: 1px solid var(--border);
  padding: 12px 0 2px;
}

.row-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.list {
  display: grid;
  gap: 2px;
}

/* Impersonation banner — must be impossible to miss. */
.impersonation-bar {
  align-items: center;
  background: var(--warn-soft);
  border-bottom: 1px solid #e8d199;
  color: var(--warn);
  display: flex;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 650;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 18px;
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ------------------------------------------------------ scroll animation */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  will-change: opacity, transform;
}

.reveal.shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------- login screen */

.auth {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  padding: 30px;
  width: 100%;
}

.auth-card form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.auth-card .btn {
  justify-content: center;
  padding: 10px 14px;
}

/* --------------------------------------------------------- responsive */

/* ------------------------------------------- collapsed desktop sidebar */

/* Icon-only rail. The labels stay in the DOM so screen readers and the
   `title` tooltips still announce them; only their box is collapsed away. */
@media (min-width: 981px) {
  .shell[data-sidebar-collapsed] {
    --sidebar-w: 74px;
  }

  .shell[data-sidebar-collapsed] .sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .shell[data-sidebar-collapsed] .sidebar-head {
    justify-content: center;
  }

  .shell[data-sidebar-collapsed] .brand,
  .shell[data-sidebar-collapsed] .nav-group-label,
  .shell[data-sidebar-collapsed] .sidebar-user,
  .shell[data-sidebar-collapsed] .sidebar-workspace {
    display: none;
  }

  .shell[data-sidebar-collapsed] .collapse-toggle {
    transform: rotate(180deg);
  }

  .shell[data-sidebar-collapsed] .nav-link {
    /* Zero the label's own font-size; the icon keeps its fixed px size. */
    font-size: 0;
    gap: 0;
    justify-content: center;
    padding: 10px 0;
  }

  .shell[data-sidebar-collapsed] .nav-link.active::before {
    left: -12px;
  }

  .shell[data-sidebar-collapsed] .sidebar-footer {
    justify-items: center;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .shell[data-sidebar-collapsed] .linkbutton {
    font-size: 12px;
  }
}

/* ------------------------------------------------- mobile drawer chrome */

.mobile-bar,
.nav-backdrop {
  display: none;
}

.nav-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

.nav-toggle .icon {
  height: 21px;
  width: 21px;
}

@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .mobile-bar {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .mobile-bar .brand {
    margin: 0;
  }

  /* The drawer replaces the collapse affordance on narrow screens. */
  .collapse-toggle {
    display: none;
  }

  /* Off-canvas drawer. Without JavaScript the `has-js` class is absent and the
     nav simply stays in the flow, so the menu is never unreachable. */
  .has-js .sidebar {
    border-right: 1px solid var(--border);
    bottom: 0;
    box-shadow: var(--shadow-lg);
    left: 0;
    max-width: 310px;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 220ms var(--ease);
    width: 84%;
    z-index: 70;
  }

  .has-js .shell[data-nav-open] .sidebar {
    transform: none;
  }

  .has-js .nav-backdrop {
    background: rgba(10, 32, 39, 0.42);
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 60;
  }

  .has-js .nav-backdrop[hidden] {
    display: none;
  }

  .main {
    padding: 20px 16px 48px;
  }

  .layout-split {
    grid-template-columns: 1fr;
  }

  .page-head h1 {
    font-size: 23px;
  }

  .job-card-top {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .job-card-side {
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .job-card-actions .badge-row {
    margin-left: 0 !important;
    width: 100%;
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .has-js .sidebar {
    transition: none;
  }
}

/* Checkbox with a label beside it, used in small side-panel forms. */
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.check-row input {
  width: auto;
  margin: 0;
}

/* The inline "set password" form must not stretch across the action row. */
.user-actions input[type="text"] {
  min-width: 180px;
}

/* Concurrent-login warning. Deliberately loud and above the whole shell: it
   means somebody else may be using this account. */
.login-alert-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: #7f1d1d;
  color: #fee2e2;
  font-size: 13px;
  font-weight: 500;
}

.login-alert-actions {
  display: flex;
  gap: 8px;
}

.alert-panel {
  border-left: 3px solid var(--danger, #dc2626);
}

.alert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.alert-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Page tabs. Links, not buttons: each section has its own URL. */
.pagetabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.pagetab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.pagetab:hover {
  color: var(--text);
  background: var(--surface-muted, rgba(13, 148, 136, 0.06));
}

.pagetab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.pagetab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.pagetab.active .pagetab-badge {
  background: var(--accent);
  color: #fff;
}

.pagetab-badge.warn {
  background: #fef3c7;
  color: #92400e;
}

/* Document totals sit apart from the lines above them. */
tfoot td {
  border-top: 1px solid var(--border);
  font-weight: 500;
}

/* Collapsible filter block. The list is the point of the page; the filters
   should not push it below the fold. */
.filters-wrap {
  margin-bottom: 18px;
}

.filters-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
}

.filters-summary::-webkit-details-marker {
  display: none;
}

.filters-summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 140ms ease;
}

.filters-wrap[open] > .filters-summary::before {
  transform: rotate(45deg);
}

.filters-wrap[open] > .filters-summary {
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
}

/* Pipeline board. Scrolls sideways rather than squeezing the columns, so a
   card stays readable no matter how many stages there are. */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.board-column {
  background: var(--surface-muted, rgba(15, 23, 42, 0.03));
  border-radius: 14px;
  padding: 12px;
  min-height: 120px;
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.board-total {
  margin: 2px 0 10px;
}

.board-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 10px;
  display: grid;
  gap: 6px;
}

.board-card.overdue {
  border-left: 3px solid #dc2626;
}

.board-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.board-empty {
  padding: 10px 2px;
}

/* People list. One row per person, actions folded away: the destructive ones
   used to sit in the open next to everybody, which made a long list read like
   a minefield. */
.userlist {
  display: grid;
  gap: 2px;
}

.userlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
}

.userlist-row:last-child {
  border-bottom: 0;
}

.userlist-row.needs-attention {
  border-left: 3px solid #f59e0b;
  padding-left: 12px;
}

.userlist-main {
  min-width: 0;
  flex: 1 1 260px;
}

.userlist-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Per-row action menu. <details> so it works without JavaScript. */
.rowmenu {
  position: relative;
}

.rowmenu > summary {
  list-style: none;
  cursor: pointer;
}

.rowmenu > summary::-webkit-details-marker {
  display: none;
}

.rowmenu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 300px;
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.rowmenu-line {
  display: grid;
  gap: 8px;
}

.rowmenu-buttons {
  display: flex;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* The open menu has to sit above the rows underneath it. */
.userlist-row:has(.rowmenu[open]) {
  position: relative;
  z-index: 40;
}

@media (max-width: 720px) {
  .rowmenu-panel {
    position: static;
    width: auto;
    box-shadow: none;
  }
}

/* Support thread. Our answers are indented and tinted so a customer can see at
   a glance who said what. */
.ticket-message.from-us {
  background: rgba(13, 148, 136, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
}

.ticket-message.internal {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
}

/* Pager. Sits under a list, quiet by default. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 4px;
}

.pager .btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* A tight row of buttons meant to sit together, like prev/next arrows in a
   page-head - unlike `.pager`, no forced centering or margin, since it has
   to fit into whatever flex row it is dropped into. */
.btn-group {
  display: flex;
  gap: 6px;
}

.btn-group .btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Sortable table headers. The arrow only appears on the active column, so the
   header row stays quiet until somebody sorts. */
th.sortable {
  padding: 0;
}

th.sortable a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

th.sortable a:hover {
  color: var(--accent);
}

th.sortable.active a {
  color: var(--accent);
}

.sort-arrow {
  font-size: 9px;
  line-height: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A denser table for lists that are read rather than studied. */
table.tight td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* A select that reads as a badge: the status sits in the header next to the
   name, where it is a value first and a control second. */
.head-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.pill-select {
  appearance: none;
  padding: 5px 28px 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: auto;
}

.pill-select.success { background-color: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.pill-select.info    { background-color: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.pill-select.accent  { background-color: #f0fdfa; border-color: #99f6e4; color: #115e59; }
.pill-select.warn    { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
.pill-select.danger  { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Stage settings: one row per stage, order controls on the left. */
.stagelist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.stagelist-row:last-child { border-bottom: 0; }

.stagelist-order {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stagelist-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 420px;
}

.stagelist-form input[type="text"] { width: 160px; }
.stagelist-form select { width: auto; }

.stagelist-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bottom-Right Toast Notifications Container */
.toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #1f2937;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
  border-left: 4px solid #10b981;
  animation: toastSlideUp 0.25s ease-out;
}

.toast.error {
  border-left-color: #ef4444;
}

.toast.leaving {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Left-aligned Mobile and Collapsed Sidebar Alignment Fixes */
.sidebar,
.has-js .sidebar {
  text-align: left !important;
}

.sidebar .nav-link,
.has-js .sidebar .nav-link {
  justify-content: flex-start !important;
  text-align: left !important;
  align-items: center !important;
  display: flex !important;
}

.shell[data-sidebar-collapsed] {
  --sidebar-w: 54px;
}

.shell[data-sidebar-collapsed] .sidebar {
  padding: 22px 8px 18px !important;
  overflow-x: hidden !important;
}

.shell[data-sidebar-collapsed] .sidebar-head .brand,
.shell[data-sidebar-collapsed] .nav-group-label,
.shell[data-sidebar-collapsed] .sidebar-footer span,
.shell[data-sidebar-collapsed] .sidebar-footer form {
  display: none !important;
}

.shell[data-sidebar-collapsed] .nav-link {
  justify-content: flex-start !important;
  padding: 8px 8px !important;
  width: 36px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.shell[data-sidebar-collapsed] .nav-link.active::before {
  left: -8px !important;
}

.pipeline-page {
  width: calc(100% + 36px);
  margin-inline: -18px;
  min-width: 0;
}
.pipeline-head {
  padding-inline: 18px;
  margin-bottom: 22px;
}
.pipeline-page .filter-grid {
  grid-template-columns: minmax(220px, .8fr) minmax(220px, .8fr) minmax(160px, .55fr);
  max-width: none;
  margin-inline: 18px;
}
.pipeline-page > .meta,
.pipeline-page > .notice {
  margin-inline: 18px;
}
.customer-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  align-items: start;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  width: 100%;
}
.customer-kanban-column { min-width: 240px; padding: 12px; background: #f3f5f6; border-top: 2px solid #cbd5e1; }
.kanban-card { position: relative; display: grid; min-width: 0; max-width: 100%; box-sizing: border-box; gap: 10px; padding: 13px 13px 12px; background: white; border: 1px solid #d7dfe2; border-radius: 6px; margin-bottom: 10px; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; cursor: pointer; }
.kanban-card:hover, .kanban-card:focus-visible { border-color: #aebdc3; box-shadow: 0 6px 18px rgba(15, 23, 42, .09); transform: translateY(-1px); outline: 0; }
.kanban-card[aria-busy="true"] { opacity: .62; }
.kanban-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding-right: 30px; }
.kanban-card-title { display: grid; min-width: 0; gap: 2px; }
.kanban-stage-kicker { color: #708590; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kanban-company-name { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.35; }
.kanban-company-name:hover { color: var(--accent); }
.kanban-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px; color: var(--muted); font-size: 12px; }
.kanban-card-meta .icon, .kanban-users .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.kanban-job-count, .kanban-region, .kanban-deadline { display: inline-flex; align-items: center; gap: 5px; }
.kanban-job-count { color: #087f74; font-weight: 650; }
.kanban-job-count:hover { text-decoration: underline; }
.kanban-deadline { color: #7f4e10; }
.kanban-stars { display: inline-flex !important; width: max-content; gap: 1px !important; margin: 0 !important; }
.kanban-stars button { appearance: none; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: #cbd5e1; font-size: 15px; line-height: 1; cursor: pointer; }
.kanban-stars button.active, .kanban-stars button:hover, .kanban-stars button:hover ~ button.active { color: #f2b705; }
.kanban-stars:hover button { color: #f2b705; }
.kanban-stars button:hover ~ button { color: #cbd5e1; }
.kanban-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.kanban-label { --label-color: #0d9488; display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--label-color) 32%, white); border-radius: 999px; background: color-mix(in srgb, var(--label-color) 12%, white); color: color-mix(in srgb, var(--label-color) 70%, #0f172a); font-size: 11px; font-weight: 650; }
.kanban-job-preview { display: grid; gap: 1px; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; padding: 7px 0; }
.kanban-job-preview a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; color: #31424b; font-size: 12px; text-decoration: none; }
.kanban-job-preview a:hover span { color: var(--accent); text-decoration: underline; }
.kanban-job-preview span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-job-preview small { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.kanban-detail { display: grid; gap: 9px; padding: 10px; border: 1px solid #dce6e8; border-radius: 6px; background: #f8fbfb; cursor: default; }
.kanban-detail[hidden] { display: none; }
.kanban-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kanban-detail-grid span { display: grid; gap: 2px; color: #31424b; font-size: 12px; }
.kanban-detail-grid strong { color: #708590; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.kanban-detail p { margin: 0; color: #475569; font-size: 12px; line-height: 1.45; }
.kanban-card-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; }
.kanban-users { display: flex; align-items: flex-start; min-width: 0; gap: 5px; color: #5e6d76; font-size: 11px; line-height: 1.35; }
.kanban-user-list { display: flex; flex: 1; flex-wrap: wrap; min-width: 0; gap: 4px 7px; }
.kanban-user { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; gap: 4px; }
.kanban-user-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%; background: #e8eff1; color: #465961; font-size: 9px; font-weight: 750; }
.kanban-user-name { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-editor { position: absolute; top: 9px; right: 9px; flex: 0 0 auto; cursor: default; }
.kanban-card-editor > summary { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 4px; color: var(--muted); cursor: pointer; list-style: none; }
.kanban-card-editor > summary::-webkit-details-marker { display: none; }
.kanban-card-editor > summary:hover, .kanban-card-editor[open] > summary { background: #eef3f4; color: var(--text); }
.kanban-card-editor > summary .icon { width: 16px; height: 16px; }
.kanban-card-editor-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: min(310px, calc(100vw - 48px)); padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 14px 34px rgba(15, 23, 42, .18); }
.kanban-card-editor-panel > form + form { padding-top: 12px; border-top: 1px solid var(--border); }
.customer-kanban form { display: flex; gap: 6px; margin-top: 10px; }
.customer-kanban select { min-width: 0; }
.master-fields { display: contents; }
.settings-section { padding: 24px 0; border-top: 1px solid var(--border); }
.section-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 16px; }
.section-heading h2 { margin: 0 0 4px; font-size: 1.1rem; }
.settings-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 14px; }
.setting-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; cursor: pointer; }
.setting-option + .setting-option { border-left: 1px solid var(--border); }
.setting-option span { display: grid; gap: 4px; }
.setting-option small { color: var(--muted); }
.setting-option input { width: 18px; height: 18px; accent-color: var(--accent); }
.settings-stage-list { border-top: 1px solid var(--border); }
.settings-stage-row { display: grid; grid-template-columns: 12px minmax(160px, 1fr) auto auto minmax(170px, .8fr) auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.stage-tone { width: 8px; height: 28px; border-radius: 2px; background: #94a3b8; }
.stage-tone.info { background: #3b82f6; }.stage-tone.accent { background: var(--accent); }.stage-tone.warn { background: #d97706; }.stage-tone.success { background: #16a34a; }.stage-tone.danger { background: #dc2626; }
.settings-add-stage { display: flex; gap: 8px; max-width: 460px; margin-top: 14px; }
.job-state-metrics { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.job-state-metrics .metric-label { overflow-wrap: anywhere; }
.job-support-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.job-support-link:hover, .job-support-link:focus-visible { color: var(--accent); }
.settings-tabs { margin-bottom: 24px; overflow-x: auto; }
.settings-tabs a { white-space: nowrap; }
.settings-list { padding: 22px 0 30px; }
.settings-list + .settings-list { border-top: 1px solid var(--border); }
.settings-catalog-table th:first-child { width: 28%; }
.settings-catalog-table th:last-child { width: 170px; }
.catalog-row-form { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.6fr) 170px; gap: 10px; align-items: center; }
.catalog-actions { display: flex; justify-content: flex-end; gap: 6px; }
.catalog-add-form { padding-top: 3px; }
.settings-inline-form { display: flex; align-items: end; gap: 12px; max-width: 520px; }
.settings-inline-form .field { flex: 1; }
.settings-create-user { position: relative; }
.settings-create-user > summary { list-style: none; }
.settings-create-user > summary::-webkit-details-marker { display: none; }
.settings-create-user[open] > .panel { position: absolute; right: 0; top: 42px; z-index: 20; width: min(680px, 90vw); box-shadow: var(--shadow-lg); }
.support-dialog, .mail-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); box-shadow: 0 24px 70px rgba(15, 23, 42, .24); }
.support-dialog::backdrop, .mail-dialog::backdrop { background: rgba(15, 23, 42, .38); }
.support-dialog form, .mail-dialog form { padding: 22px; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { margin: 3px 0 0; font-size: 1.2rem; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.icon-button:hover { background: var(--surface-soft); color: var(--text); }
.dialog-fields { display: grid; gap: 14px; padding: 18px 0; }
.dialog-fields input[readonly] { background: var(--surface-soft); color: var(--muted); }
.dialog-fields small { color: var(--muted); font-weight: 400; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.kanban-markers { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.kanban-rating { color: #64748b; font-size: 13px; letter-spacing: 0; }
.kanban-card-settings { display: grid !important; gap: 9px !important; padding-top: 6px; }
.rating-options, .flag-options { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.rating-options label, .flag-options label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .job-state-metrics { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
  .settings-options { grid-template-columns: 1fr; }
  .setting-option + .setting-option { border-left: 0; border-top: 1px solid var(--border); }
  .settings-stage-row { grid-template-columns: 12px 1fr auto; }
  .settings-stage-row select, .settings-stage-row .danger { grid-column: 2 / -1; }
  .catalog-row-form { grid-template-columns: 1fr; }
  .catalog-actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .job-state-metrics { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
}

/* Ein Knopf, der wie ein Link aussieht.
   Gebraucht dort, wo eine Aktion mitten im Fliesstext sitzt - "Mir zuweisen"
   in der Zeile der Jobkarte. Ein richtiger Knopf wuerde die Zeile sprengen,
   ein <a> koennte die Aktion nicht per POST ausloesen. */
.linklike {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent, #0f766e);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.linklike:hover {
  text-decoration-thickness: 2px;
}

.linklike:focus-visible {
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Eine Angabe im Formular: gleiche Beschriftung wie ein Feld, aber ohne
   Rahmen und ohne Cursor - damit klar ist, dass hier nichts einzutragen ist. */
.field-static {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-static > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.field-static > strong {
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* --- Pflegbare Listen in den Workspace-Einstellungen -------------------- */
/* Ruhig, solange niemand etwas ändert. Der Rahmen kommt beim Anfassen. */

.katalog {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface, #fff);
}

.katalog-kopf,
.katalog-zeile {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 6px 14px;
}

.katalog-kopf {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-muted, #f8fafc);
  border-bottom: 1px solid var(--border);
  padding-top: 10px;
  padding-bottom: 10px;
}

.katalog-zeile + .katalog-zeile,
.katalog-leer + .katalog-zeile {
  border-top: 1px solid var(--border);
}

.katalog-zeile:hover {
  background: var(--surface-muted, #f8fafc);
}

/* Der Kern: kein Rahmen im Ruhezustand. */
.katalog-feld {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: var(--text);
}

.katalog-feld::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.katalog-feld:hover {
  border-color: var(--border);
}

.katalog-feld:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface, #fff);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.katalog-wert {
  font-weight: 500;
}

.katalog-aktionen {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  /* Unsichtbar, aber der Platz bleibt reserviert - sonst springt die Zeile,
     sobald man sie berührt. */
  opacity: 0;
  transition: opacity 120ms ease;
}

.katalog-zeile:hover .katalog-aktionen,
.katalog-zeile:focus-within .katalog-aktionen,
.katalog-neu .katalog-aktionen {
  opacity: 1;
}

.katalog-leer {
  padding: 18px 14px;
}

.katalog-neu {
  border-top: 1px solid var(--border);
  background: var(--surface-muted, #f8fafc);
}

/* Auf schmalen Schirmen untereinander statt gequetscht. */
@media (max-width: 780px) {
  .katalog-kopf { display: none; }

  .katalog-zeile {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }

  /* Ohne Zeigegerät gibt es kein Schweben - die Knöpfe müssen sichtbar sein. */
  .katalog-aktionen {
    opacity: 1;
    justify-content: flex-start;
  }
}

@media (hover: none) {
  .katalog-aktionen { opacity: 1; }
}

/* --- Pipeline-Phasen --------------------------------------------------- */
/* Wie die pflegbaren Listen, plus Farbmarke und ein Löschbereich, der sich
   nur öffnet, wenn er gebraucht wird. */

.phasen-zeile {
  grid-template-columns: 4px minmax(200px, 1fr) auto auto;
  gap: 14px;
  position: relative;
}

.phasen-zeile .stage-tone {
  width: 4px;
  align-self: stretch;
  min-height: 26px;
  border-radius: 2px;
}

.phasen-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.phasen-name .katalog-feld { flex: 1; }

.phasen-speichern,
.phasen-zeile .katalog-aktionen {
  opacity: 0;
  transition: opacity 120ms ease;
}

.phasen-zeile:hover .phasen-speichern,
.phasen-zeile:focus-within .phasen-speichern {
  opacity: 1;
}

.phasen-status {
  display: flex;
  align-items: center;
  min-width: 110px;
  justify-content: flex-end;
}

/* Die Startphase ist eine Aussage über die Zeile, keine Aktion - deshalb
   dauerhaft sichtbar, während "Als Startphase" beim Schweben erscheint. */
.phasen-zeile:not(.ist-start) .phasen-status .linklike {
  opacity: 0;
  transition: opacity 120ms ease;
}

.phasen-zeile:hover .phasen-status .linklike,
.phasen-zeile:focus-within .phasen-status .linklike {
  opacity: 1;
}

.linklike.gefahr {
  color: var(--danger, #b91c1c);
  list-style: none;
}

.linklike.gefahr::-webkit-details-marker { display: none; }

.phasen-loeschen > summary {
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}

.phasen-zeile:hover .phasen-loeschen > summary,
.phasen-zeile:focus-within .phasen-loeschen > summary,
.phasen-loeschen[open] > summary {
  opacity: 1;
}

/* Der Löschbereich schwebt über der Zeile, damit die Liste nicht springt. */
.phasen-loeschen[open] .phasen-loeschen-form {
  position: absolute;
  right: 12px;
  top: calc(100% - 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.phasen-loeschen-form .meta { margin: 0; }

.phasen-neu { grid-template-columns: minmax(200px, 1fr) auto; }

@media (max-width: 780px) {
  .phasen-zeile {
    grid-template-columns: 4px 1fr;
    align-items: start;
  }

  .phasen-status,
  .phasen-loeschen { grid-column: 2; justify-content: flex-start; }

  .phasen-speichern,
  .phasen-zeile .phasen-status .linklike,
  .phasen-loeschen > summary { opacity: 1; }

  .phasen-loeschen[open] .phasen-loeschen-form {
    position: static;
    width: auto;
    box-shadow: none;
  }
}

@media (hover: none) {
  .phasen-speichern,
  .phasen-zeile .phasen-status .linklike,
  .phasen-loeschen > summary { opacity: 1; }
}

/* --- Dialoge ----------------------------------------------------------- */
/* Ein Aussehen für alle: Support melden, Firma anlegen, was noch kommt. */

.app-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.app-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.app-dialog > form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 20px;
}

.app-dialog .dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.app-dialog .dialog-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.app-dialog .dialog-hint { margin: -8px 0 0; }

.app-dialog .dialog-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Zwei Spalten, damit ein Formular mit fünf Feldern nicht zur Rolltreppe
   wird. Fällt unter 520px von selbst auf eine Spalte zurück. */
.dialog-fields-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* Ein Feld, das allein in seiner Reihe steht, nimmt die volle Breite. */
.dialog-fields-zwei > .field:first-child { grid-column: 1 / -1; }

.app-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 16px;
}

.app-dialog .icon-button {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
}

.app-dialog .icon-button:hover { color: var(--text); }

/* --- KI-Agenten -------------------------------------------------------- */

.agent-summe { text-align: right; }
.agent-summe-wert { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.agent-summe-wert span { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.agent-summe-wert.klein { font-size: 18px; margin-top: 10px; }

.agent-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.agent-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.agent-karte:hover {
  border-color: var(--ton-kante, var(--accent));
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Ein nicht eingerichteter Agent liegt sichtbar brach, statt wie ein
   fertiger auszusehen. */
.agent-karte-neu { border-style: dashed; background: transparent; }

.agent-karte-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-karte-kopf h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
}

.agent-karte-kopf .badge { flex: none; }

/* Das Symbol trägt die Farbe des Agenten. Das ist der einzige Ort, an dem
   Farbe vorkommt - dadurch unterscheidet sie, statt zu dekorieren. */
.agent-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  font-size: 16px;
  line-height: 1;
  background: var(--ton-flaeche, #f1f5f9);
  color: var(--ton-schrift, #475569);
}

/* Die Töne. Bewusst gedeckt: Fünf kräftige Farben nebeneinander lenken vom
   Zustand ab, und der ist hier die Information. */
.ton-indigo    { --ton-flaeche: #eef2ff; --ton-schrift: #4338ca; --ton-kante: #c7d2fe; }
.ton-bernstein { --ton-flaeche: #fef3c7; --ton-schrift: #92400e; --ton-kante: #fde68a; }
.ton-gruen     { --ton-flaeche: #dcfce7; --ton-schrift: #15803d; --ton-kante: #bbf7d0; }
.ton-purpur    { --ton-flaeche: #f3e8ff; --ton-schrift: #7e22ce; --ton-kante: #e9d5ff; }
.ton-tuerkis   { --ton-flaeche: #ccfbf1; --ton-schrift: #0f766e; --ton-kante: #99f6e4; }
.ton-tanne     { --ton-flaeche: #e2efe9; --ton-schrift: #1e5c4a; --ton-kante: #bcd9cd; }
.ton-moos      { --ton-flaeche: #ecf4e3; --ton-schrift: #3f6212; --ton-kante: #d3e4b8; }

.agent-karte:hover .agent-symbol { transform: scale(1.05); }
.agent-symbol { transition: transform 120ms ease; }

.agent-zweck { margin: 0; font-size: 14px; line-height: 1.5; }

.agent-grenze {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.agent-kosten { margin-left: auto; font-variant-numeric: tabular-nums; }

.agent-karte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.agent-spalten {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
}

.agent-spalten > div { display: flex; flex-direction: column; gap: 18px; }

.agent-form { display: flex; flex-direction: column; gap: 16px; }

.schluessel-vorhanden {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-muted, #f8fafc);
  margin-bottom: 8px;
}

.agent-key-remove { margin-top: 14px; }

.prompt-anzeige {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-muted, #f8fafc);
  border: 1px solid var(--border);
  max-height: 420px;
  overflow-y: auto;
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kennzahl {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.kennzahl-wert {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kennzahl-wert span { font-size: 14px; font-weight: 500; color: var(--text-muted); }

@media (max-width: 900px) {
  .agent-spalten { grid-template-columns: 1fr; }
}

/* --- Agent-Detailseite ------------------------------------------------- */

.agent-kopf-zeile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.agent-kopf-zeile > div:nth-child(2) { flex: 1; min-width: 0; }
.agent-kopf-status { flex: none; padding-top: 6px; }

.agent-symbol.gross {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 22px;
  margin-top: 4px;
}

/* Das Grenzband: die eine Aussage, die man über einen Agenten gelesen haben
   muss, bevor man ihn einschaltet. */
.agent-grenze-band {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 10px;
  border: 1px solid var(--ton-kante, var(--border));
  background: var(--ton-flaeche, #f8fafc);
}

.agent-grenze-band p { margin: 0; line-height: 1.55; }

.agent-grenze-marke {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ton-schrift, var(--text-muted));
}

@media (max-width: 700px) {
  .agent-kopf-zeile { flex-wrap: wrap; }
  .agent-kopf-status { width: 100%; padding-top: 0; }
  .agent-grenze-band { flex-direction: column; gap: 6px; }
}

/* --- Filterdialog ------------------------------------------------------
   Zentral statt als Aufklappmenü am Bildrand: Dreizehn Filter sind in einem
   Menü nicht mehr zu überblicken, und beim Scrollen schloss es sich. */
.filterdialog {
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  max-height: 82vh;
  max-width: 900px;
  padding: 0;
  width: min(900px, 94vw);
}
.filterdialog::backdrop { background: rgba(15, 23, 42, 0.42); }
.filterdialog-kopf {
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  padding: 0 0.75rem 0 1.25rem;
}
/* Ohne diese Zeile nimmt das Symbol die Breite des Knopfes ein - im Dialog
   waren die beiden Reiter-Symbole so groß wie eine Handfläche. */
.filterreiter .icon { flex: none; height: 15px; width: 15px; }
.filterdialog-x {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
}
.filterdialog-x:hover { color: #0f172a; }
.filterdialog-inhalt { display: flex; flex-direction: column; max-height: calc(82vh - 58px); }
/* Muss hinter der Zeile darüber stehen: [hidden] und .klasse wiegen gleich
   schwer, also gewinnt die spätere Regel. Ohne diese Zeile standen beide
   Reiter-Inhalte gleichzeitig im Dialog. */
.filterdialog-inhalt[hidden] { display: none; }
.gruppierliste { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.filterdialog-reiter { display: flex; gap: 4px; }
.filterreiter {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.95rem 0.9rem;
}
.filterreiter.active { border-bottom-color: #0d9488; color: #0f172a; }
.filterdialog-koerper { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem; }
.filtergruppe + .filtergruppe { border-top: 1px solid #e2e8f0; margin-top: 1.1rem; padding-top: 1.1rem; }
.filtergruppe-titel {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}
.filterdialog .filter-groups { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.filterdialog-fuss {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex: none;
  gap: 8px;
  justify-content: flex-end;
  padding: 0.85rem 1.25rem;
}
.filterzahl {
  background: #0d9488;
  border-radius: 9999px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  padding: 1px 6px;
  text-align: center;
}

/* --- Stellen-Feedback -------------------------------------------------- */
.feedbackdialog { max-width: 520px; width: min(520px, 94vw); }
.job-ausblenden { color: #b91c1c; font-size: 0.95rem; font-weight: 700; line-height: 1; }
.job-ausblenden:hover { color: #7f1d1d; }
.feedback-titel { font-weight: 600; margin: 0 0 0.35rem; }
.feedback-gruende { border: none; margin: 1rem 0 0; padding: 0; }
.feedback-gruende legend {
  color: #0f172a; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; padding: 0; text-transform: uppercase;
}
.feedback-grund {
  align-items: center; cursor: pointer; display: flex; gap: 8px;
  padding: 5px 0; font-size: 0.92rem;
}
.feedback-anmerkung { display: block; margin-top: 1rem; }
.feedback-anmerkung span { color: #64748b; display: block; font-size: 0.8rem; margin-bottom: 4px; }

/* Rotes Kreis-Badge neben einem Navigationspunkt: offene Tickets, offene
   Fehlermeldungen. Zahlengetrieben - ohne offene Fälle ist es nicht da. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.nav-link { display: flex; align-items: center; gap: 8px; }

/* Nur-Lese-Kataloge (globale Listen in den Workspace-Einstellungen) */
.katalog.nur-lesen .katalog-zeile{display:flex;gap:16px;align-items:baseline;padding:8px 12px;border-bottom:1px solid var(--border-color,#e5e7eb)}
.katalog.nur-lesen .katalog-zeile:last-child{border-bottom:none}
.katalog.nur-lesen .katalog-wert{min-width:260px;font-weight:500}
.katalog.nur-lesen .katalog-beschreibung{flex:1}
.katalog-gruppe{margin:18px 0 6px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#64748b)}

/* Support als Chat (09.10.): Verlauf als Gespräch, Blasen statt Zeilen.
   Kundenseite links, unsere Antworten rechts in Tannen-Ton, interne
   Notizen gelblich - dieselbe Semantik wie die alten ticket-message-
   Klassen, nur als Chat gelesen. */
.chat-panel{display:flex;flex-direction:column;gap:16px}
.chat-verlauf{display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow-y:auto;padding:4px}
.chat-nachricht{display:flex;flex-direction:column;align-items:flex-start;max-width:72%}
.chat-nachricht.von-uns{align-self:flex-end;align-items:flex-end}
.chat-meta{font-size:.78rem;color:var(--text-muted,#64748b);margin-bottom:4px}
.chat-blase{background:#fff;border:1px solid var(--border-color,#e2e8f0);border-radius:14px 14px 14px 4px;padding:10px 14px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.chat-nachricht.von-uns .chat-blase{background:#ecfdf5;border-color:#bbe7d4;border-radius:14px 14px 4px 14px}
.chat-nachricht.intern .chat-blase{background:#fefce8;border-color:#fde68a}
.chat-blase p:first-child{margin-top:0}
.chat-blase p:last-child{margin-bottom:0}
.chat-bild img{max-width:320px;max-height:240px;border-radius:10px;display:block;margin-top:8px}
.chat-datei{display:inline-block;margin-top:8px;padding:6px 10px;border:1px solid var(--border-color,#e2e8f0);border-radius:8px;background:#f8fafc;text-decoration:none}
.chat-composer{border-top:1px solid var(--border-color,#e2e8f0);padding-top:14px}
.chat-composer-zeile{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.chat-statuszeile{display:flex;align-items:center;gap:8px}
@media (max-width:720px){.chat-nachricht{max-width:95%}}

/* Wortmarke statt Schriftzug (09.10.). Die Bildgröße steht am <img>,
   damit beim Laden nichts springt; hier nur Darstellung und Dark Mode. */
.brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo {
    filter: brightness(1.15) saturate(1.1);
  }
}
:root[data-theme="dark"] .brand-logo {
  filter: brightness(1.15) saturate(1.1);
}


/* Leeres KI-Guthaben (09.10.): Betreiber-Warnung über jeder Seite. */
.ki-guthaben-warnung {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm, 8px);
  color: var(--warn);
  margin: 0 0 16px;
  padding: 10px 14px;
}
.ki-guthaben-warnung a { color: inherit; text-decoration: underline; }

/* Drei Links je Firma (Startseite, Stellenliste, Impressum) - 10.10.2026 */
.drei-links-liste{display:grid;gap:0;border:1px solid var(--border);border-radius:8px;container-type:inline-size}
.drei-links-feld{display:grid;grid-template-columns:160px minmax(0,1fr);gap:6px 16px;align-items:start;padding:14px 16px;border-top:1px solid var(--border)}
.drei-links-feld:first-child{border-top:0}
.drei-links-kopf{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.drei-links-titel{font-weight:600}
.drei-links-wert{min-width:0}
.drei-links-wert a{font-weight:600;word-break:break-all}
.drei-links-aktionen{grid-column:2;display:flex;gap:6px;flex-wrap:wrap}
.drei-links-aktionen form{display:inline}
.drei-links-form{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.drei-links-form[hidden]{display:none}
.drei-links-form .input{flex:1 1 260px;height:34px}
.danger-text{color:var(--danger)}
.drei-links-vorschlaege{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.drei-links-vorschlaege a{word-break:break-all}
@media (max-width:640px){.drei-links-feld{grid-template-columns:1fr}.drei-links-aktionen{grid-column:1}}
/* Breit genug: Knöpfe rechts neben der Adresse, Formular darunter */
@container (min-width:860px){.drei-links-feld{grid-template-columns:160px minmax(0,1fr) auto}.drei-links-aktionen{grid-column:3;grid-row:1;justify-content:flex-end}}
.link-entscheid{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.link-entscheid .input{height:32px;min-width:180px;flex:1}
.link-uebersicht td{font-variant-numeric:tabular-nums;font-weight:600}
.link-uebersicht td a{display:inline-block;min-width:4ch}
.link-uebersicht-ungeprueft a{color:#b45309}
.link-uebersicht-fehlt a{color:var(--danger)}

/* Exklusiv-Reiter: drei Links je Firma und Einsortierung (11.10.2026) */
.stand-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border)}
.stand-chip{font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--border-strong);text-decoration:none;color:inherit}
.stand-chip.aktiv{background:var(--accent);border-color:var(--accent);color:#fff}
.drei-chips{display:flex;flex-wrap:wrap;gap:4px}
.link-chip{font-size:.72rem;padding:2px 8px;border-radius:999px;white-space:nowrap}
.link-chip.da{background:var(--accent-soft);color:var(--accent-text);text-decoration:none}
.link-chip.fehlt{background:var(--danger-soft);color:var(--danger)}
.stand-text{font-size:.72rem;margin-top:4px;color:var(--muted)}
.stand-text.stand-website-ohne-stellen{color:#92400e;font-weight:600}

/* karriere.at-Zuordnung von Hand (11.10.2026) */
.karriere-zuordnung{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.karriere-zuordnung h3{margin:0 0 4px;font-size:.95rem}
.karriere-zuordnung-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--border)}
.karriere-zuordnung-zeile:first-of-type{border-top:0}
.karriere-zuordnung-name{flex:1 1 220px}
.karriere-zuordnung-zeile .input{flex:1 1 220px;height:32px}
.firma-aendern{margin-top:6px;text-align:left}
.firma-aendern summary{cursor:pointer;font-size:.75rem;color:var(--accent-text)}
.firma-aendern form{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.firma-aendern .input{height:30px;min-width:170px;flex:1}
.entdeckung-wer{font-size:.8rem;margin:2px 0 6px}
.entdeckung-firma{padding:0 16px 12px}


/* Inline-Rückfrage für Formulare mit data-confirm (siehe jobpipe.js). */
.confirm-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.875rem;
}

/* ===== Firmen-Board (pb-*) ================================================ */
.pb-head { align-items: flex-start; }
.pb-overdue-text { color: #b42318; }
.pb-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.pb-toolbar input[type="search"] { flex: 1 1 220px; min-width: 180px; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
.pb-toolbar select { flex: 0 1 auto; width: auto; max-width: 240px; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13px; }
.pb-flag-filter { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.pb-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x proximity; }
.pb-column { --tone: #94a3b8; flex: 0 0 290px; min-width: 290px; display: flex; flex-direction: column; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); scroll-snap-align: start; transition: background .15s ease, box-shadow .15s ease; }
.pb-column.tone-info { --tone: #1d4ed8; } .pb-column.tone-accent { --tone: var(--accent); } .pb-column.tone-success { --tone: #15803d; } .pb-column.tone-warn { --tone: #b45309; } .pb-column.tone-danger { --tone: #b42318; }
.pb-column.is-over { background: color-mix(in srgb, var(--tone) 10%, var(--surface-2)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone) 45%, transparent); }
.pb-column-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 6px; }
.pb-column-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.pb-column-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-column-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); flex: 0 0 auto; }
.pb-column-count { padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 650; }
.pb-column-tools { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.pb-column-jobs { display: inline-flex; align-items: center; gap: 4px; }
.pb-column-jobs .icon { width: 13px; height: 13px; }
.pb-column-add { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 16px; line-height: 1; cursor: pointer; }
.pb-column-add:hover { border-color: var(--accent); color: var(--accent); }
.pb-progress { display: flex; height: 5px; margin: 0 12px 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.pb-progress-seg { display: block; height: 100%; transition: width .25s ease; }
.pb-progress-seg.r3 { background: #b42318; } .pb-progress-seg.r2 { background: #d97706; } .pb-progress-seg.r1 { background: #0d9488; } .pb-progress-seg.r0 { background: transparent; }
.pb-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; min-height: 120px; max-height: calc(100vh - 290px); overflow-y: auto; }
.pb-empty { padding: 18px 8px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.pb-card { display: grid; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 2px rgba(14, 32, 39, .05); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.pb-card:hover, .pb-card:focus-visible { border-color: var(--border-strong); box-shadow: 0 8px 20px rgba(14, 32, 39, .10); transform: translateY(-1px); outline: 0; }
.pb-card.is-open { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.pb-card.is-dragging { opacity: .45; }
.pb-card[aria-busy="true"] { opacity: .6; pointer-events: none; }
.pb-card-head { display: grid; gap: 2px; }
.pb-card-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.pb-card-name:hover { color: var(--accent); }
.pb-card-region { color: var(--muted); font-size: 11.5px; }
.pb-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pb-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; border: 1px solid var(--border); color: var(--text-2); background: var(--surface-2); }
.pb-chip .icon { width: 12px; height: 12px; }
.pb-chip-jobs { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line); }
.pb-chip-jobs.is-empty { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.pb-chip-deadline.is-soon { color: #92400e; background: #fff7e6; border-color: #fcd9a0; }
.pb-chip-deadline.is-overdue { color: #b42318; background: #fff1f0; border-color: #f5b5ae; }
.pb-label { --label-color: #0d9488; display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--label-color) 32%, white); border-radius: 999px; background: color-mix(in srgb, var(--label-color) 12%, white); color: color-mix(in srgb, var(--label-color) 70%, #0f172a); font-size: 11px; font-weight: 650; text-decoration: none; cursor: default; }
a.pb-label, button.pb-label { cursor: pointer; }
button.pb-label { opacity: .55; }
button.pb-label.active, a.pb-label.active { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--label-color) 35%, transparent); }
.pb-card-jobs { margin: 0; padding: 6px 0 0; list-style: none; border-top: 1px solid var(--border); display: grid; gap: 2px; }
.pb-card-jobs li { display: flex; justify-content: space-between; gap: 8px; min-width: 0; font-size: 12px; }
.pb-card-jobs a { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-card-jobs a:hover { color: var(--accent); }
.pb-card-jobs small { color: var(--muted); flex: 0 0 auto; }
.pb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pb-rating { display: inline-flex; gap: 0; margin: 0; }
.pb-rating button { appearance: none; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: #cbd5e1; font-size: 16px; line-height: 1; cursor: pointer; }
.pb-rating button.active { color: #f2b705; }
.pb-rating:hover button { color: #f2b705; }
.pb-rating button:hover ~ button { color: #cbd5e1; }
.pb-rating-lg button { width: 30px; height: 30px; font-size: 24px; }
.pb-rating-text { width: auto !important; height: auto !important; padding: 2px 8px !important; border-radius: 999px; font-size: 11.5px !important; font-weight: 650; color: var(--muted) !important; border: 1px solid var(--border) !important; }
.pb-rating-text.r1, .pb-rating-text.active.r1 { color: #0a6c61 !important; background: var(--accent-soft); }
.pb-rating-text.r2, .pb-rating-text.active.r2 { color: #92400e !important; background: #fff7e6; }
.pb-rating-text.r3, .pb-rating-text.active.r3 { color: #b42318 !important; background: #fff1f0; }
.pb-rating-lg .pb-rating-text:not(.active) { background: transparent; color: var(--muted) !important; }
.pb-avatars { display: flex; }
.pb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--surface); color: var(--accent-deep); font-size: 10px; font-weight: 750; }
.pb-avatar:first-child { margin-left: 0; }
.pb-avatar.is-empty { background: var(--surface-3); color: var(--muted); }
/* Panel */
.pb-backdrop { position: fixed; inset: 0; background: rgba(14, 32, 39, .25); z-index: 90; }
.pb-backdrop[hidden], .pb-panel[hidden], .pb-popover[hidden] { display: none; }
.pb-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(14, 32, 39, .14); z-index: 91; padding: 20px 22px 28px; animation: pb-slide .2s ease; }
@keyframes pb-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pb-panel { animation: none; } .pb-card { transition: none; } }
.pb-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pb-panel-head h2 { margin: 2px 0 4px; font-size: 20px; line-height: 1.25; }
.pb-panel-links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; }
.pb-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); font-size: 18px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.pb-statusbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.pb-statusbar button { --tone: #94a3b8; flex: 1 1 auto; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pb-statusbar button.tone-info { --tone: #1d4ed8; } .pb-statusbar button.tone-accent { --tone: var(--accent); } .pb-statusbar button.tone-success { --tone: #15803d; } .pb-statusbar button.tone-warn { --tone: #b45309; } .pb-statusbar button.tone-danger { --tone: #b42318; }
.pb-statusbar button:hover { background: var(--surface); }
.pb-statusbar button.active { background: var(--tone); color: #fff; box-shadow: 0 1px 2px rgba(14, 32, 39, .15); }
.pb-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 16px; }
.pb-panel-grid section, .pb-panel-section { display: grid; gap: 6px; align-content: start; }
.pb-panel-grid h3, .pb-panel-section h3 { margin: 0; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.pb-panel-section { margin-bottom: 16px; }
.pb-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13.5px; }
.pb-input:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); }
.pb-hint { font-size: 11.5px; font-weight: 650; }
.pb-hint.is-overdue { color: #b42318; } .pb-hint.is-soon { color: #92400e; }
.pb-owners { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-owner { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 2px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; }
.pb-owner .pb-avatar { margin: 0; }
.pb-owner button { border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.pb-owner button:hover { color: #b42318; }
.pb-flag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-panel-jobs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pb-panel-jobs li { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.pb-panel-jobs a { color: var(--text); font-weight: 600; }
.pb-panel-jobs a:hover { color: var(--accent); }
.pb-panel-foot { padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
/* Popover Firma hinzufügen */
.pb-popover { position: absolute; z-index: 92; width: 300px; padding: 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 12px 32px rgba(14, 32, 39, .16); }
.pb-popover input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13px; }
.pb-popover ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; max-height: 220px; overflow-y: auto; overflow-x: hidden; }
.pb-popover li { min-width: 0; }
.pb-popover li button { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; text-align: left; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12.5px; cursor: pointer; }
.pb-popover li button strong { flex: 1 1 auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-popover li button span { flex: 0 0 auto; font-size: 11px; }
.pb-popover li button:hover, .pb-popover li button:focus-visible { background: var(--accent-soft); outline: 0; }
.pb-popover li.meta { padding: 6px 8px; font-size: 12px; }
@media (max-width: 720px) { .pb-column { flex-basis: 84vw; min-width: 84vw; } .pb-panel { width: 100vw; max-width: 100vw; } .pb-panel-grid { grid-template-columns: 1fr; } }

.pb-chip-jobs.is-liked { background: #fff7e6; border-color: #fcd9a0; color: #92400e; }
.pb-chip-jobs strong { font-weight: 800; }
.pb-card-jobs li.is-liked a { color: #92400e; font-weight: 650; }
.pb-card-jobs li.is-liked::before { content: "\2605"; color: #f2b705; margin-right: 4px; font-size: 11px; }
.pb-panel-jobs li.is-liked { border-color: #a7dcc4; background: #f0faf5; }
.pb-liked-mark { display: inline-block; margin-bottom: 2px; padding: 0 6px; border-radius: 999px; background: #d7f3e6; color: #166534; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pb-panel-jobs li.is-disliked { border-color: #f3c6c6; background: #fdf4f4; opacity: .85; }
.pb-panel-jobs li.is-disliked a { color: #7f1d1d; text-decoration: line-through; }
.pb-disliked-mark { background: #fde2e2; color: #991b1b; }


/* ===== Onboarding (ob-*) ================================================== */
.ob-page { max-width: 980px; margin: 0 auto; display: grid; gap: 16px; }
.ob-head { display: grid; gap: 8px; padding: 4px 0 6px; }
.ob-head h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.ob-sub { margin: 0; color: var(--text-2); max-width: 64ch; line-height: 1.5; }
.ob-steps { display: flex; gap: 0; list-style: none; margin: 0 0 10px; padding: 0; }
.ob-steps li { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 0; margin-right: 18px; color: var(--muted); font-size: 13px; font-weight: 600; position: relative; }
.ob-steps li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 1px; background: var(--border-strong); }
.ob-step-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12px; font-weight: 750; }
.ob-steps li.is-active { color: var(--accent-text); }
.ob-steps li.is-active .ob-step-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-steps li.is-done { color: var(--text-2); }
.ob-steps li.is-done .ob-step-no { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.ob-card { display: grid; gap: 18px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(14, 32, 39, .04); }
.ob-card h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ob-h3 { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; }
.ob-section { display: grid; gap: 10px; }
.ob-hint { color: var(--muted); font-size: 12.5px; font-weight: 500; margin: 0; }
.ob-count { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-2); }
.ob-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ob-choice { position: relative; display: flex; align-items: center; min-height: 40px; padding: 8px 12px 8px 36px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: border-color .12s ease, background .12s ease, color .12s ease; }
.ob-choice input { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.ob-choice:hover { border-color: var(--accent-line); }
.ob-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.ob-choice:has(input:focus-visible) { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ob-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-row-tight { display: flex; gap: 6px; align-items: center; }
.ob-input { flex: 1 1 200px; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); font: inherit; }
.ob-select { height: 34px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13px; }
.ob-file { font-size: 13px; }
.ob-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.ob-line:first-of-type { border-top: 0; }
.ob-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.ob-table th, .ob-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ob-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.ob-facts dt { color: var(--muted); font-weight: 600; }
.ob-facts dd { margin: 0; }
.ob-name { max-width: 420px; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--border); }
.ob-actions-left, .ob-actions-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ob-skip { color: var(--muted); }
.ob-done-mark { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-deep); font-size: 24px; font-weight: 800; }
.ob-row-tight .ob-select { min-width: 130px; }
@media (max-width: 1100px) { .ob-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ob-steps li { padding-right: 12px; margin-right: 12px; } .ob-step-label { display: none; } .ob-steps li.is-active .ob-step-label { display: inline; } }

.sidebar-source { display: block; margin-top: 8px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.sidebar-source a { color: inherit; text-decoration: underline; }


/* ===== KI-Chat (kc-*) ===================================================== */
.kc { display: grid; grid-template-columns: 260px 1fr; gap: 0; min-height: calc(100vh - 120px); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.kc-side { display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
.kc-side-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
.kc-new { flex: 1; }
.kc-side-toggle, .kc-side-open { display: none; }
.kc-side-label { padding: 6px 16px; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kc-list { list-style: none; margin: 0; padding: 0 8px 12px; overflow-y: auto; }
.kc-list li button { width: 100%; display: grid; gap: 2px; text-align: left; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; cursor: pointer; color: var(--text-2); }
.kc-list li button:hover { background: var(--surface); }
.kc-list li button.is-active { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.kc-list-text { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-list-when { font-size: 11px; color: var(--muted); }
.kc-list-empty { padding: 10px 12px; color: var(--muted); font-size: 12.5px; }
.kc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kc-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.kc-head .eyebrow { margin: 0; }
.kc-title { margin: 0; font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-scope { margin-left: auto; white-space: nowrap; }
.kc-thread { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--bg); }
.kc-welcome { margin: auto; max-width: 620px; text-align: center; display: grid; gap: 10px; justify-items: center; padding: 30px 10px; }
.kc-welcome[hidden] { display: none; }
.kc-welcome-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.kc-welcome-mark .icon { width: 26px; height: 26px; }
.kc-welcome h2 { margin: 4px 0 0; font-size: 22px; }
.kc-welcome p { margin: 0; color: var(--text-2); }
.kc-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; width: 100%; }
.kc-starters button { text-align: left; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.kc-starters button:hover { border-color: var(--accent); color: var(--accent-deep); }
.kc-row { display: flex; }
.kc-row-user { justify-content: flex-end; }
.kc-bubble { max-width: min(760px, 92%); padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.55; }
.kc-row-user .kc-bubble { background: var(--accent); border-color: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.kc-row-bot .kc-bubble { border-bottom-left-radius: 6px; }
.kc-bubble p { margin: 0 0 8px; }
.kc-bubble p:last-child { margin-bottom: 0; }
.kc-bubble ul { margin: 4px 0 8px; padding-left: 20px; }
.kc-bubble li { margin: 2px 0; }
.kc-error { color: #b42318; }
.kc-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.kc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .35; animation: kc-blink 1.2s infinite; }
.kc-dots i:nth-child(2) { animation-delay: .2s; } .kc-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes kc-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.kc-hint { color: var(--muted); font-size: 13px; margin-left: 6px; }
.kc-results { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.kc-results summary { cursor: pointer; font-weight: 650; color: var(--accent-text); font-size: 13px; }
.kc-results-count { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); text-align: center; margin-right: 4px; }
.kc-cards { margin-top: 10px; display: grid; gap: 10px; }
.kc-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.kc-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.kc-composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 180px; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 12px; font: inherit; font-size: 14.5px; line-height: 1.4; background: var(--surface); }
.kc-composer textarea:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); }
.kc-send { height: 44px; }
.kc-foot { margin: 0; padding: 0 16px 12px; font-size: 11.5px; }
@media (max-width: 900px) {
  .kc { grid-template-columns: 1fr; min-height: calc(100vh - 90px); }
  .kc-side { position: fixed; inset: 0 30% 0 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 24px rgba(14, 32, 39, .2); }
  .kc-side.is-open { transform: none; }
  .kc-side-toggle, .kc-side-open { display: inline-flex; }
  .kc-side-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 18px; }
  .kc-starters { grid-template-columns: 1fr; }
  .kc-thread { padding: 12px; }
  .kc-bubble { max-width: 96%; }
}

.endless { padding: 18px 0 28px; text-align: center; color: var(--muted); font-size: 12.5px; }
.endless[hidden] { display: none; }


/* ===== Suchvarianten (sv-*) ================================================ */
.sv-menu { position: relative; }
.sv-menu > summary { list-style: none; cursor: pointer; }
.sv-menu > summary::-webkit-details-marker { display: none; }
.sv-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 11px; text-align: center; }
.sv-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 320px; max-width: calc(100vw - 48px); padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 16px 40px rgba(14, 32, 39, .18); }
.sv-row { display: flex; align-items: center; gap: 4px; }
.sv-row .menu-item, .sv-row .sv-apply { flex: 1; min-width: 0; }
.sv-row form { margin: 0; }
.sv-icon { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.sv-icon:hover:not(:disabled) { background: var(--surface-2); color: var(--accent-deep); }
.sv-icon:disabled { color: #f2b705; cursor: default; }
.sv-empty { padding: 6px 8px; }
.sv-save { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sv-save input[type="text"] { flex: 1 1 140px; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13px; }
.sv-default { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.sv-row-page { padding: 8px 0; border-top: 1px solid var(--border); gap: 8px; }
.sv-inline { display: inline-flex; gap: 6px; align-items: center; }
.sv-inline input { height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13px; }
@media (max-width: 1100px) { .sv-panel { right: auto; left: 0; } }

/* --- Geführte Tour (static/js/tour.js) ---------------------------------- */
.tour-overlay { position: fixed; inset: 0; z-index: 1200; }
.tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 3px #0d9488;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
.tour-tip {
  position: fixed; width: min(360px, calc(100vw - 24px)); background: #ffffff; color: #0f172a;
  border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  transition: top .18s ease, left .18s ease;
}
.tour-tip h2 { font-size: 1.05rem; margin: 2px 0 6px; }
.tour-text { margin: 0 0 12px; line-height: 1.45; font-size: 0.93rem; color: #334155; }
.tour-zaehler { font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-spacer { flex: 1; }
.tour-actions .tour-skip { font-size: 0.85rem; color: #64748b; }
body.tour-offen { overflow: hidden; }
.sidebar-help { display: block; font-size: 0.82rem; margin: 4px 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.es-liste { margin: 8px 0 0; padding-left: 1.3rem; line-height: 1.55; }
.es-liste li { margin-bottom: 6px; }

/* --- Hilfe-Knopf unten rechts (Tour, Erste Schritte, Support) ----------- */
.hilfe-fab { position: fixed; right: 18px; bottom: 18px; z-index: 1100; }
.hilfe-menu { position: relative; }
.hilfe-menu > summary { list-style: none; }
.hilfe-menu > summary::-webkit-details-marker { display: none; }
.hilfe-knopf {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: #0d9488; color: #ffffff; font-weight: 700; font-size: 1.25rem; cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22); user-select: none;
}
.hilfe-knopf:hover, .hilfe-menu[open] > .hilfe-knopf { background: #0f766e; }
.hilfe-panel {
  position: absolute; right: 0; bottom: 54px; min-width: 190px; background: #ffffff; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22); padding: 6px; display: flex; flex-direction: column;
}
.hilfe-eintrag {
  display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; color: #0f172a;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.hilfe-eintrag:hover { background: #f1f5f9; }
body.tour-offen .hilfe-fab { display: none; }
@media print { .hilfe-fab { display: none; } }

/* "Mir zuweisen" auf der Stellenkarte: ein kleiner Knopf statt eines Textlinks */
.job-card-meta .assign-me { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; font-size: 12px; border-radius: 999px; border: 1px dashed #94a3b8; background: transparent; color: #334155; }
.job-card-meta .assign-me:hover { border-style: solid; border-color: #0d9488; color: #0d9488; background: #f0fdfa; }

/* Erste Schritte: Übersicht aller Touren */
.es-fortschritt { height: 6px; border-radius: 999px; background: #e2e8f0; margin: 8px 0 14px; overflow: hidden; }
.es-fortschritt span { display: block; height: 100%; background: #0d9488; border-radius: 999px; transition: width .3s ease; }
.es-touren { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.es-touren li { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; }
.es-touren li.ist-fertig { background: #f0faf5; border-color: #a7dcc4; }
.es-tour-status { font-weight: 700; color: #94a3b8; text-align: center; }
.ist-fertig .es-tour-status { color: #15803d; }
.es-tour-name { font-weight: 600; }

/* Woher die Stellen kommen (Firmenliste, Firmenseite) */
.stellenquelle { display: inline-block; font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.stellenquelle.fremd { color: #b91c1c; font-weight: 600; }