/* ==========================================================================
   CRM – Oberfläche
   Farbwelt, Knöpfe, Eingabefelder, Seitenleiste, Modale und Hinweise sind
   aus dem Web Agent übernommen, damit beide Anwendungen gleich aussehen und
   sich gleich bedienen lassen. Ergänzt sind die CRM-Bausteine: Tabellen,
   Kontakt-Detailansicht, Formularraster und Blätterleiste.
   ========================================================================== */

:root {
    /* Sagt dem Browser, dass die Oberfläche dunkel ist. Davon leben die
       vom System gemalten Teile: die aufgeklappte Liste eines <select>,
       Bildlaufleisten, der Datumswähler. Ohne das leuchten sie weiß. */
    color-scheme: dark;

    --bg: #0f1420;
    --panel: #171e2e;
    --panel-2: #1e2740;
    --line: #2a3552;
    --text: #e6ecf7;
    --muted: #8b97b3;
    /* Die Signalfarbe trägt zwei Rollen, und eine Farbe kann beide nicht
       gut erfüllen: Was auf dunklem Grund gut lesbar ist, ist zu hell für
       weiße Schrift darauf. Vorher stand hier ein Kompromiss (#4f7cff),
       der beides knapp verfehlte – 4.49 auf der Fläche, 3.71 unter weißer
       Schrift. Deshalb getrennt. */
    --accent: #6f9bff;       /* Vordergrund: Links, Reiter, Chips, Fokus (6.19, AA) */
    --accent-fill: #3a63e0;  /* Fläche mit weißer Schrift darauf (5.20, AA) */
    --accent-2: #2f56d4;     /* dieselbe Fläche beim Überfahren (6.17, AA) */
    --danger: #e5484d;
    --ok: #3dbb7f;
    --warn: #e0a35a;

    /* Herkunft statt Zustand. Die gesättigten Farben oben sind vergeben –
       Rot heißt überfällig, Gelb heißt fällig, Grün heißt erledigt, Blau
       heißt Aktion. Woher eine Angabe stammt, ist kein Zustand, deshalb
       zwei Tönungen von Weiß: Sie unterscheiden sich nur in der
       Farbtemperatur, fallen einzeln nicht auf und nebeneinander sofort.
       Siehe PLANUNG.md, Abschnitt 9. */
    --meta: #d6ecdd;       /* Wert aus den Metadaten */
    --meta-link: #f0e3b4;  /* dasselbe, aber anklickbar */

    --radius: 10px;
}

/* ---------- Helles Thema ----------
   Aktiviert durch data-theme="light" auf <html> (JavaScript, gespeichert
   unter localStorage 'crm.theme'). Dieselben Variablen, helle Werte. */
html[data-theme="light"] {
    color-scheme: light;

    --bg: #f2f4f9;          /* Seitenhintergrund (hellbläulich) */
    --panel: #ffffff;       /* Karten, Listen, Eingabefelder */
    --panel-2: #eef1f7;     /* Hover, Kopfzeilen, Badge-Grund */
    --line: #d6dce8;        /* Trennlinien, Rahmen */
    --text: #1c2436;        /* Grundschrift */
    --muted: #5b667e;       /* Sekundärtext, weiterhin AA auf weiß */

    /* Signalfarbe neu abgestimmt: auf hellem Grund braucht sie mehr
       Tiefe, sonst wirkt sie ausgewaschen. */
    --accent: #2453d6;      /* Vordergrund: Links, Reiter, Chips (6.0 AA) */
    --accent-fill: #2453d6; /* Fläche mit weißer Schrift (7.0 AA auf weiß) */
    --accent-2: #1c42ac;    /* Hover, etwas dunkler */

    --danger: #c9333a;
    --ok: #1f8f5f;
    --warn: #a96f18;

    /* Herkunft: die gleichen zwei Farbtemperatur-Tönungen, aber dunkel
       statt hell – auf weißem Grund mit AA lesbar. */
    --meta: #2d6a4f;        /* grünlich */
    --meta-link: #8a6a1f;   /* gelblich */
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    /* Nur der Inhaltsbereich scrollt, nicht die ganze Seite. */
    overflow: hidden;
    background: var(--panel);
    color: var(--text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.error { color: var(--danger); }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------- Knöpfe ---------- */

button {
    background: var(--accent-fill);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
button:hover { background: var(--accent-2); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
button.ghost:hover { background: var(--panel-2); }
button.mini { padding: 3px 8px; font-size: 12px; }
button.danger { background: var(--danger); }
button.danger:hover { background: #c73b40; }
button.icon-btn { padding: 6px 8px; line-height: 0; }
button.icon-btn svg { display: block; }
/* Werkzeugknopf für etwas Unwiderrufliches: erst beim Zeigen rot, damit er
   in der Leiste nicht dauernd Alarm schlägt. */
button.danger-icon:hover:not(:disabled) { color: var(--danger); }
button.link-btn {
    background: none; border: 0; color: var(--accent); padding: 0;
    font: inherit; font-size: inherit; cursor: pointer;
}
button.link-btn:hover { background: none; text-decoration: underline; }

/* ---------- Eingabefelder ---------- */

input, textarea, select {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    padding: 9px 11px;
    font: inherit;
    /* iOS zoomt bei < 16px beim Fokus automatisch hinein -> mind. 16px */
    font-size: 16px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { resize: vertical; min-height: 80px; }

/* Auswahlfelder sehen sonst aus wie vom Betriebssystem gemalt: kleiner,
   mit eigenem Rahmen und eigener Höhe – die Regel oben greift bei ihnen
   nur halb. `appearance: none` schaltet das ab; dafür muss der Pfeil
   selbst kommen, als eingebettetes SVG (kein zusätzlicher Netzzugriff,
   und die Farbe steht im Bild statt in einer zweiten Regel). */
select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238b97b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1.5 6,6.5 11,1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px 8px;
    /* Platz für den Pfeil, damit langer Text nicht darunter läuft. */
    padding-right: 34px;
}
select:hover { border-color: var(--muted); }
/* Ohne Optionen (noch nicht geladen) sieht ein leeres Feld sonst kaputt aus. */
select:disabled { opacity: .5; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="file"] { padding: 8px; }

label { display: block; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
label > input, label > textarea, label > select { margin-top: 5px; color: var(--text); }
label.row, label.toggle { display: flex; align-items: center; gap: 8px; margin: 0; }
label.row input, label.toggle input { width: auto; margin: 0; }
label .req { color: var(--danger); }

/* Datumsfeld mit Knopf daneben. Der Knopf schrumpft nicht, das Feld
   nimmt den Rest. */
.date-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.date-row input { margin-top: 0; }
.date-row button { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Anmeldung ---------- */

.center {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    display: grid; place-items: center; padding: 20px;
}

/* Hintergrundbild der Anmeldung.
   Zwei Bilder, nicht eines mit `cover`: Das Motiv ist quer aufgebaut und
   verliert im Hochformat seine Mitte. `login.jpg` ist 1376×768,
   `login_mobile.jpg` 768×1376 – umgeschaltet wird nach der **Ausrichtung**
   und nicht nach der Breite, denn ein liegendes Telefon braucht das
   Querbild und ein schmales Fenster am Rechner das hohe. */
.login-bg {
    position: relative;
    background-image: url("img/login.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Der Farbwert bleibt darunter stehen: Solange das Bild lädt – oder
       wenn es fehlt – ist der Hintergrund dunkel und nicht weiß. */
    background-color: var(--bg);
}
@media (orientation: portrait) {
    .login-bg { background-image: url("img/login_mobile.jpg"); }
}

/* Ein Schleier zwischen Bild und Karte. Ohne ihn hängt die Lesbarkeit
   des Formulars davon ab, was zufällig hinter ihm liegt. */
.login-bg::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,20,32,.55), rgba(15,20,32,.78));
}
.login-bg > * { position: relative; }

/* Die Karte selbst wird etwas undurchsichtiger und bekommt einen
   Schatten – sonst schwimmt sie auf dem Bild. */
.login-bg .card {
    background: rgba(23, 30, 46, .92);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.login { width: 340px; max-width: 100%; }
.login h1 { margin: 0 0 4px; font-size: 20px; }
.login p { margin: 0 0 18px; }
.login button[type="submit"] { width: 100%; margin-top: 8px; }
.hint { margin-top: 14px; }

.spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--line); border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Grundgerüst ---------- */

.app {
    display: flex; flex-direction: column;
    background: var(--bg);
    height: 100vh;   /* Fallback für ältere Browser */
    height: 100dvh;  /* füllt den Bildschirm inkl. Safe-Areas */
}
@supports not (height: 100dvh) {
    .app { height: var(--app-height, 100vh); }
}

.topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
    /* Safe-Area im iOS-Standalone-Modus (Notch/Statusleiste) */
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
}
.brand { font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.brand-user { font-weight: 400; font-size: 12.5px; color: var(--muted); letter-spacing: 0; }
@media (max-width: 560px) { .brand-user { display: none; } }

/* Profil-Aufklappmenü */
.profile-menu { position: relative; }
.profile-dropdown {
    position: absolute; right: 0; top: calc(100% + 4px);
    margin: 0; padding: 4px; list-style: none; z-index: 80;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.profile-dropdown li {
    padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; white-space: nowrap;
}
.profile-dropdown li:hover { background: var(--accent-fill); color: #fff; }
.profile-dropdown li.danger:hover { background: var(--danger); }

.layout { flex: 1; display: flex; min-height: 0; position: relative; }

/* ---------- Seitenleiste ---------- */

.sidebar {
    width: 240px; flex: none; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; background: var(--panel); min-height: 0;
    transition: margin-left .25s ease;
    margin-left: 0;
    padding-bottom: env(safe-area-inset-bottom);
}
.sidebar:not(.open) { margin-left: -240px; }

.sidebar-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 20; }

/* Desktop: die Seitenleiste schiebt das Layout, kein Overlay */
@media (min-width: 769px) {
    .sidebar { position: relative; z-index: auto; }
    .sidebar-backdrop { display: none !important; }
}
/* Mobil: Seitenleiste als Overlay darüberlegen */
@media (max-width: 768px) {
    .sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 30; box-shadow: 2px 0 12px rgba(0,0,0,.3); }
    .sidebar:not(.open) { margin-left: -250px; }
}

.nav { padding: 10px 8px; overflow-y: auto; flex: 1; }
.nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; margin-bottom: 2px; border-radius: 8px;
    background: transparent; border: 0; color: var(--muted);
    font-size: 14px; text-align: left; cursor: pointer;
}
.nav-item svg { flex: none; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--accent-fill); color: #fff; }
.nav-count {
    margin-left: auto; font-size: 11px; font-weight: 600;
    background: var(--danger); color: #fff; border-radius: 20px; padding: 1px 7px;
}
.nav-item.active .nav-count { background: rgba(0,0,0,.3); }
.nav-sep { margin: 10px 12px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

.sidebar-foot {
    border-top: 1px solid var(--line); padding: 10px 14px;
    font-size: 12px; color: var(--muted);
    display: flex; align-items: center; gap: 8px;
}

/* ---------- Inhaltsbereich ---------- */

.content {
    flex: 1; min-width: 0; overflow-y: auto;
    padding: 18px 20px calc(28px + env(safe-area-inset-bottom));
}
@media (max-width: 640px) { .content { padding: 14px 12px 28px; } }

.page-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.page-head h1 { font-size: 20px; }
.page-head .sub { font-size: 12.5px; color: var(--muted); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.panel-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; margin-bottom: 16px;
}
.panel-card > h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin-bottom: 12px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel-head h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

.empty {
    padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13.5px;
}

/* ---------- Kennzahlen ---------- */

.stat-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
.stat-tile {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px 14px;
}
.stat-tile.alert { border-color: var(--danger); }
/* Anklickbar: Der Rahmen hebt sich beim Zeigen, mehr braucht es nicht –
   eine Kachel, die aussieht wie ein Knopf, wäre eine Kachel zu viel. */
.stat-tile.clickable { cursor: pointer; }
.stat-tile.clickable:hover { border-color: var(--accent); background: var(--panel-2); }
.stat-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 26px; font-weight: 600; line-height: 1.25; }
.stat-tile.alert .stat-value { color: var(--danger); }

/* ---------- Such- und Filterleiste ---------- */

.toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.toolbar .search { flex: 1 1 240px; min-width: 180px; }
/* Feld und Auswahl standen hier 1,5 Pixel auseinander: verschiedene
   Schriftgrößen bei gleichem Polster. Gleiche Schrift, und der Unterschied
   ist weg; der Pfeil braucht rechts weiterhin seinen Platz. */
.toolbar select {
    width: auto; min-width: 150px;
    font-size: 15px; padding: 8px 32px 8px 10px;
    background-position: right 10px center;
}
.toolbar .search input { font-size: 15px; padding: 8px 11px; }

/* ---------- Tabellen ---------- */

.table-wrap {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow-x: auto;
}
table.data {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
}
table.data th, table.data td {
    padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.data thead th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 600; white-space: nowrap;
    background: var(--panel-2); position: sticky; top: 0; z-index: 1;
}
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--text); }
table.data thead th .arrow { color: var(--accent); font-size: 10px; margin-left: 3px; }
table.data tbody tr { cursor: default; }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr:hover { background: var(--panel-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.actions { white-space: nowrap; text-align: right; }
table.data .row-title { font-weight: 600; color: var(--text); }
table.data .row-sub { font-size: 12px; color: var(--muted); }

/* Auf schmalen Geräten werden Tabellenzeilen zu Karten – nebeneinander
   passen acht Spalten dort nicht, und waagerechtes Scrollen liest sich
   schlecht. Die Überschriften stehen dann als data-label vor dem Wert. */
@media (max-width: 700px) {
    table.data thead { display: none; }
    table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
    table.data tr { border-bottom: 1px solid var(--line); padding: 8px 4px; }
    table.data tr:last-child { border-bottom: 0; }
    table.data td { border: 0; padding: 3px 12px; }
    table.data td::before {
        content: attr(data-label) ": "; color: var(--muted); font-size: 11.5px;
    }
    table.data td:empty { display: none; }
    table.data td.actions { text-align: left; padding-top: 8px; }
    table.data td.actions::before { content: ""; }
    /* Symbolspalten haben keine Überschrift, die vorangestellt werden
       könnte – und eine leere Symbolzelle nimmt in der Karte nur Platz. */
    table.data td.col-icon { text-align: left; }
    table.data td.col-icon::before { content: ""; }
    table.data td.col-icon.is-leer { display: none; }
}

/* Blätterleiste */
.pager {
    display: flex; align-items: center; gap: 10px; justify-content: flex-end;
    margin-top: 12px; font-size: 13px; color: var(--muted);
}
.pager button { padding: 5px 10px; font-size: 13px; }

/* ---------- Kontakt-Detailansicht ---------- */

.detail-head {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.detail-head h1 { font-size: 22px; }
.detail-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.field-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px;
}
.field { min-width: 0; }
.field .label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.field .value { font-size: 14px; word-break: break-word; }
/* Die Bezeichnung eines gefundenen Werts – „Geschäftsführer" hinter dem
   Namen. Steht daneben, nicht darunter: eine Zeile je Feld. */
.field .value .row-sub { font-size: 12px; color: var(--muted); margin-left: 6px; }
.field .value.empty-value { color: var(--muted); padding: 0; text-align: left; }

.phone-list { list-style: none; margin: 0; padding: 0; }
.phone-item {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 0; border-bottom: 1px solid var(--line);
}
.phone-item:last-child { border-bottom: 0; }
.phone-label { font-size: 12px; color: var(--muted); min-width: 100px; }
.phone-number { font-size: 15px; font-variant-numeric: tabular-nums; }

/* Reiter in der Detailansicht */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--muted); padding: 8px 14px; cursor: pointer; font-size: 14px; border-radius: 0;
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }
.tab .count { font-size: 11px; color: var(--muted); margin-left: 4px; }

/* Notizen und Aufgaben */
.entry {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 10px;
}
.entry-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; color: var(--muted); margin-bottom: 6px;
}
.entry-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.entry-actions { display: flex; gap: 6px; margin-left: auto; }
.entry.done .entry-title { text-decoration: line-through; color: var(--muted); }
.entry-title { font-size: 15px; font-weight: 600; }
.entry-check { display: flex; align-items: center; gap: 10px; }

/* ---------- Kennzeichnungen ---------- */

.badge {
    display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px;
    letter-spacing: .3px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.badge.admin { background: #2a4a8a; border-color: #3a63e0; color: #dbe4ff; }
/* Gruppen ohne Kennfarbe bleiben grau; mit Farbe setzt groupBadgeStyle()
   Hintergrund (halbtransparent), Rand und Schriftfarbe als Inline-Style. */
.badge.group { background: var(--panel-2); margin: 1px 4px 1px 0; }
/* Der Zähler für abgekürzte Gruppen („+2“) in der Kontaktliste. */
.badge.group.more { cursor: help; }
.badge.todo { background: #2a4a8a; border-color: #3a63e0; color: #dbe4ff; }
.badge.note { background: #3a3060; border-color: #5a3a8a; color: #e3daff; }
.badge.done { background: #143d2a; border-color: #1f6b46; color: #b7f0d4; }
.badge.open { background: var(--panel-2); }
/* Gesperrt: dieselbe Farbe wie der Kontaktwiderspruch – beides heißt
   „hier geht nichts mehr". */
.badge.blocked { background: #4a1f24; border-color: #8a3a44; color: #ffd7dc; }

/* Farbpunkt vor Gruppennamen in Auswahllisten (Kontaktformular,
   CSV-Import, Benutzerformular). */
.group-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    flex: none; margin-right: 2px;
}
/* Die Gruppen-Spalte darf in die Breite gehen, die Badges brechen um. */
.groups-cell { min-width: 140px; }

/* Farbwahl im Gruppenformular: Systempicker, Häkchen, Vorschau. */
.color-row { display: flex; align-items: center; gap: 12px; }
.color-input {
    width: 44px; height: 30px; padding: 0; border: 1px solid var(--line);
    border-radius: 6px; background: var(--panel-2); cursor: pointer;
}
.color-input:disabled { opacity: .35; cursor: default; }

/* Rechte im Benutzerformular: nach Bereichen gegliedert, damit man beim
   Durchsehen weiß, worüber man gerade entscheidet. */
.perm-templates { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.perm-group { margin-bottom: 12px; }
.perm-group-head {
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
    color: var(--muted); text-transform: uppercase; margin-bottom: 4px;
}
.perm-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 4px 0; border-top: 1px solid var(--line);
}
.perm-row:first-of-type { border-top: 0; }
.perm-row .check-item { flex: 1; min-width: 0; }
.perm-hint { display: block; font-size: 11.5px; color: var(--muted); }
/* Die Zahl steht unter ihrem Recht, nicht daneben: Neben der
   Bezeichnung blieb für Platzhalter und Einheit kein Platz mehr, und
   beides wurde abgeschnitten. Eingerückt bis unter den Text, damit
   erkennbar bleibt, wozu sie gehört. */
.perm-value {
    display: flex; align-items: center; gap: 8px;
    /* 100 % **minus** der Einrückung: Sonst ist die Zeile breiter als der
       Kasten, und der Dialog bekommt eine waagerechte Bildlaufleiste. */
    flex: 0 0 calc(100% - 28px); margin: 2px 0 4px 28px; white-space: nowrap;
}
.perm-value input { width: 132px; }

/* Die Sperre im Benutzerformular steht abgesetzt: Sie ist keine
   Eigenschaft wie Name oder Rufnummer, sondern ein Eingriff. */
.block-box {
    margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--panel-2);
}

/* Fälligkeiten: rot überfällig, gelb heute, sonst unauffällig */
.due { font-variant-numeric: tabular-nums; white-space: nowrap; }
.due.overdue { color: var(--danger); font-weight: 600; }
.due.today { color: var(--warn); font-weight: 600; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* Mehrfachauswahl (Gruppen, Zuweisungen) */
.check-list {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 8px; padding: 4px 0;
}
.check-item {
    display: flex; align-items: center; gap: 8px; padding: 5px 10px;
    margin: 0; font-size: 13.5px; color: var(--text); cursor: pointer;
}
.check-item:hover { background: var(--panel-2); }
.check-item input { flex: none; }
.check-item .sub { color: var(--muted); font-size: 12px; }

/* ---------- Formulare ---------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Telefonnummern im Formular: Bezeichnung, Nummer, Entfernen */
.phone-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.phone-row .label-input { flex: 0 0 34%; }
.phone-row .number-input { flex: 1; }
.phone-row input { margin: 0; font-size: 15px; padding: 8px 10px; }

/* ---------- Modale Dialoge ---------- */

.modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: grid; place-items: center; padding: 20px; z-index: 50;
}
.modal-box {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; width: min(460px, 92vw);
    max-height: 90vh; display: flex; flex-direction: column;
}
.modal-box.large { width: min(820px, 94vw); }
/* Die Auftragsmaske: Eine Position ist eine Zeile aus vier Feldern, und
   die braucht Breite – sonst steht jedes Feld untereinander und drei
   Positionen füllen zwei Bildschirme. */
.modal-box.wide { width: min(1020px, 96vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex: none; }
.modal-head h2 { font-size: 17px; }
.modal-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 2px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; flex: none; }
.modal-actions .spacer { flex: 1; }

/* Dialog für einen Vorgang, der sich nicht zurücknehmen lässt. Die rote
   Umrandung ist die Ansage, bevor der Text gelesen wird. */
.modal-box.danger-box { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.danger-title { color: var(--danger); }

/* ---------- Hinweise ---------- */

.toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--panel-2); border: 1px solid var(--line);
    padding: 10px 16px; border-radius: 8px; z-index: 60; max-width: 90vw;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.toast.error { border-color: var(--danger); }

.notice {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 10px 12px; margin-bottom: 14px; font-size: 13px; line-height: 1.5;
}
.notice.warn-notice { border-color: var(--warn); }
.notice.error-notice { border-color: var(--danger); }

/* ---------- Import ---------- */

.import-steps { display: flex; gap: 8px; margin-bottom: 16px; font-size: 12.5px; color: var(--muted); }
.import-step { display: flex; align-items: center; gap: 6px; }
.import-step .num {
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    background: var(--panel-2); border: 1px solid var(--line); font-size: 11px; font-weight: 700;
}
.import-step.active { color: var(--text); }
.import-step.active .num { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.preview-wrap { max-height: 46vh; overflow: auto; }
.preview-wrap table.data thead th { top: 0; }

/* ---------- Recherche ---------- */

/* Eine Zeile auf dem Desktop, gestapelt auf dem Handy. Die Branche bekommt
   den meisten Platz – dort steht der längste Text. */
.search-bar {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.search-bar label { margin: 0; flex: 1 1 140px; min-width: 0; }
.search-bar label:nth-child(2) { flex: 2 1 200px; }
.search-bar button {
    flex: 0 0 auto;
    /* Der Knopf steht in einer Reihe mit den Feldern und soll so hoch sein
       wie sie: Schriftgröße 16 + 2×9 Polster + 2×1 Rahmen = 44 Pixel. Ohne
       das ist er sieben Pixel niedriger, was in genau dieser Zeile auffällt
       – anderswo steht er allein und bleibt bei seiner eigenen Größe. */
    min-height: 44px;
    padding: 8px 18px;
}

@media (max-width: 700px) {
    .search-bar { flex-direction: column; align-items: stretch; }
    .search-bar label, .search-bar button { flex: 1 1 auto; width: 100%; }
}

/* Die Auftragszeile unter der Suchleiste. */
.job-bar {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.job-bar label { margin: 0; }
.job-bar .job-pick { flex: 0 1 260px; min-width: 160px; }
.job-bar button { flex: 0 0 auto; }
.job-bar > .muted { align-self: center; }

/* Der laufende Auftrag – eine Zeile über dem Fortschrittsbalken. */
.job-progress {
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}

/* Eine Position in der Auftragsmaske: eine Zeile, die auf schmalen
   Fenstern umbricht. */
.job-item {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 10px; margin-bottom: 8px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.job-item.inaktiv { opacity: .55; }
.job-item label { margin: 0; }
.job-item .combo { flex: 1 1 200px; min-width: 160px; }
.job-item-no { color: var(--muted); font-size: 13px; padding-bottom: 10px; min-width: 20px; }
.job-item-hint { display: block; margin-top: 3px; }
.job-item-tools { display: flex; gap: 4px; margin-left: auto; }
tr.inaktiv td { opacity: .55; }

/* Die Zeile unter der Suchleiste: Kostenhinweis links, Schalter rechts. */
.search-note { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

/* Woraus die Trefferliste besteht – erst ab dem zweiten Lauf sichtbar. */
.collection-age {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    margin: -4px 0 10px; font-size: 12px; color: var(--muted);
}
/* Älter als die Wiederholungssperre: Treffer, die man nicht mehr für
   frisch halten sollte. */
.collection-age .alt { color: var(--warn); }

/* Eigene Vorschlagsliste. Ein <datalist> zeigt so viele Zeilen, wie der
   Browser für richtig hält – in Chrome sechs, ohne jede Möglichkeit,
   das zu ändern. Bei 208 Branchen ist das zu wenig, also steht hier
   eine eigene Liste: vierzehn Zeilen sichtbar, der Rest rollt. */
.combo { position: relative; }
.combo-liste {
    position: absolute; top: 100%; left: 0; z-index: 40;
    margin-top: 4px;
    /* Mindestens so breit wie das Feld, sonst so breit wie ihr Inhalt:
       Das Ortfeld ist schmal, „2 Suchen" stand darin abgeschnitten als
       „2 S…". Eine Liste darf über ihr Feld hinausragen – abgeschnittene
       Wörter sind schlimmer als eine breite Liste. */
    min-width: 100%;
    width: max-content;
    max-width: min(460px, 90vw);
    max-height: 462px;              /* 14 Zeilen à 33 Pixel */
    overflow-y: auto;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
.combo-zeile {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 11px; cursor: pointer;
    font-size: 14px; line-height: 21px;
    white-space: nowrap;
}
/* Tastatur und Maus zeigen dieselbe Zeile an – zwei verschiedene
   Hervorhebungen gleichzeitig verwirren mehr, als sie helfen. */
.combo-zeile.aktiv { background: var(--accent); color: #fff; }
/* Der Wert gibt nach, nicht der Hinweis: Wohin ein Synonym führt, ist
   die halbe Auskunft der Zeile. */
.combo-zeile > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.combo-hinweis {
    flex: 0 0 auto;
    margin-left: auto; padding-left: 12px;
    font-size: 12px; color: var(--muted);
}
.combo-zeile.aktiv .combo-hinweis { color: rgba(255, 255, 255, .75); }

/* Geteilte Ansicht: Liste links, Karte rechts. Die Karte bleibt beim
   Blättern durch die Liste stehen. */
.research-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 16px; align-items: start;
}
.research-split.map-hidden { grid-template-columns: minmax(0, 1fr); }
.research-list { margin-bottom: 0; }
.research-map-card { margin-bottom: 0; position: sticky; top: 0; }

.map-canvas {
    height: 460px; border-radius: 8px; overflow: hidden;
    background: var(--panel-2); border: 1px solid var(--line);
}

/* Leaflet bringt eine helle Grundfarbe mit – die passt nicht zum Theme. */
.map-canvas .leaflet-container { background: var(--panel-2); font: inherit; }
.map-canvas .leaflet-control-attribution {
    background: rgba(15, 20, 32, .78); color: var(--muted); font-size: 10.5px;
}
.map-canvas .leaflet-control-attribution a { color: var(--muted); }
.map-canvas .leaflet-bar a {
    background: var(--panel); color: var(--text); border-bottom-color: var(--line);
}
.map-canvas .leaflet-bar a:hover { background: var(--panel-2); }
.map-canvas .leaflet-tooltip {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); box-shadow: none;
}
.map-canvas .leaflet-tooltip-top::before { border-top-color: var(--line); }

.map-legend { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.map-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.map-legend .dot:first-child { margin-left: 0; }
.dot-new     { background: var(--accent); }
.dot-contact { background: var(--ok); }
.dot-maybe   { background: var(--warn); }
.dot-pool    { background: var(--muted); }

/* Zeile, auf die gerade gezeigt wird oder deren Marker angeklickt wurde. */
table.data tr.row-hot td { background: var(--panel-2); }

@media (max-width: 900px) {
    /* Karte über die Liste, nicht daneben – nebeneinander bliebe für beide
       zu wenig Platz. */
    .research-split { grid-template-columns: minmax(0, 1fr); }
    .research-map-card { position: static; order: -1; }
    .map-canvas { height: 300px; }
}

/* Auswahlleiste über Treffer- und Poolliste */
.select-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 10px; margin-bottom: 12px;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
/* Angaben aus den Metadaten. Der Farbton sagt: gefunden, nicht gepflegt.
   In der Spalte Ansprechpartner steht er nur beim Rückfall – dieselbe
   Spalte zeigt dann Handarbeit kühlweiß und Maschinenarbeit grünlich. */
.from-meta { color: var(--meta); }
.from-meta a { color: var(--meta-link); }
.from-meta .row-sub { color: var(--muted); }

/* Zwei Angaben in einer Zelle, untereinander statt nebeneinander.
   Bewusst nur an den Verweisen: Ein `display` an der Zelle selbst hätte
   höhere Spezifität als die Kartenregel weiter unten und würde sie auf
   schmalen Fenstern aushebeln – dann stünde genau diese eine Zelle quer,
   während alle anderen umbrechen. */
table.data td.stacked a { display: block; max-width: 22ch; overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }

/* Spalte, in der nur ein Symbol steht – so schmal wie möglich.
   `vertical-align: middle` gegen die Vorgabe `top` der übrigen Zellen:
   Zeilen können zweizeilig werden (E-Mail über Web-Adresse, Name über
   Bezeichnung), und ein einzelnes Symbol am oberen Rand sähe verrutscht
   aus. Text bleibt oben ausgerichtet, ein Symbol gehört in die Mitte. */
table.data th.col-icon, table.data td.col-icon {
    width: 28px; text-align: center; padding: 0 4px; vertical-align: middle;
    /* Ohne das bliebe der Zeilenabstand der Zelle unter dem Symbol stehen
       und schöbe es um zwei, drei Pixel nach oben. Es steht ohnehin kein
       Text darin. */
    line-height: 0;
}
.map-link { display: inline-flex; color: var(--muted); }
.map-link:hover { color: var(--meta-link); }
.map-link svg { display: block; }

table.data th.col-check, table.data td.col-check { width: 32px; text-align: center; padding-right: 0; }
table.data td.col-check input { margin: 0; }

@media (max-width: 700px) {
    /* In der Kartenansicht schmaler Fenster hat die Spaltenbezeichnung
       vor dem Kästchen keinen Sinn. */
    table.data td.col-check { text-align: left; }
    table.data td.col-check::before { content: ""; }
}

/* Bilanz über der Trefferliste: wie viel davon ist wirklich neu? */
.match-summary {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; font-size: 13px;
}
.inline-check {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: 12.5px; white-space: nowrap;
}
.inline-check input { margin: 0; }
/* Mehrzeilige Variante für den Auftragsdialog: Name und Beschreibung
   dürfen umbrechen. */
.inline-check.block {
    display: flex; align-items: flex-start; gap: 8px;
    white-space: normal; font-size: 13.5px; padding: 5px 0;
}

/* Stand der Warteschlange. Fest am unteren Rand, damit er beim Wechsel
   der Ansicht stehen bleibt – die Arbeit läuft ja auch weiter. */
.queue-bar {
    position: fixed; bottom: 20px; right: 20px; z-index: 55;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px; font-size: 13px;
    background: var(--panel-2); border: 1px solid var(--line);
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.spinner-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (max-width: 700px) {
    /* Auf schmalen Fenstern kollidiert die Leiste mit der Meldung. */
    .queue-bar { bottom: 70px; right: 10px; left: 10px; justify-content: center; }
}

.chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
}
.chip-new     { border-color: var(--accent); color: var(--accent); }
.chip-contact { border-color: var(--ok);     color: var(--ok); }
.chip-maybe   { border-color: var(--warn);   color: var(--warn); }
.chip-pool    { border-color: var(--muted);  color: var(--muted); }
/* Widerspruch nach Art. 21 – muss vor einem Anruf sofort ins Auge fallen. */
.chip-blocked { border-color: var(--danger); color: var(--danger); }
/* Ein Zeichen statt eines Wortes. Schriftgröße und Innenabstand bleiben
   die der übrigen Marken – sonst stünde der Haken zwei Pixel höher als
   seine Nachbarn in derselben Zeile. Die Bedeutung steht im Titel. */
.chip-icon { padding-left: 0; padding-right: 0; width: 20px; text-align: center; }
/* Trägt die Marke eine Zeichnung statt eines Zeichens, muss die auf die
   Schriftlinie gesetzt werden – sonst sitzt sie oben im Ring. */
.chip-icon svg { display: inline-block; vertical-align: -1px; }

/* Zwischenüberschrift in einem längeren Dialog. */
.modal-section {
    margin: 22px 0 12px; padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
/* Die Zeile für den Plesk-Zeitplan: lang, zum Kopieren, darf umbrechen. */
.cron-line {
    display: block; margin-top: 8px; padding: 6px 8px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
    font-size: 11.5px; word-break: break-all; user-select: all;
}

/* Bereits erfasste Betriebe treten zurück, bleiben aber lesbar. */
table.data tr.row-muted td { opacity: .62; }

/* ---------- Metadaten ---------- */

.meta-block { margin-bottom: 14px; }
.meta-block:last-child { margin-bottom: 0; }
.meta-block-head {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin-bottom: 6px;
}
/* Nach Fund gegliedert ist die Überschrift kein Rubrikname, sondern ein
   Wert aus den Metadaten – der Name der gefundenen Person. Sie bekommt
   deshalb dieselbe Farbe wie die Werte darunter. „Einzelne Angaben"
   bleibt grau: Das ist eine Rubrik, keine Angabe. */
.meta-block-head.from-data { color: var(--meta); }
.meta-block-head.from-data .meta-block-sub { color: var(--muted); }
.meta-row {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.meta-label { color: var(--muted); flex: 0 0 auto; min-width: 130px; }
/* Wie in der Kontaktliste: der Farbton sagt, woher der Wert kommt.
   Die Verweise sind warm statt blau – Blau bleibt den Aktionen. */
.meta-value { flex: 1 1 220px; min-width: 0; word-break: break-word; color: var(--meta); }
.meta-value a { color: var(--meta-link); }
.meta-value .meta-text { white-space: pre-wrap; }
.meta-source { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* Umschalter mit zwei Stellungen. Kein Auswahlfeld: Bei genau zwei
   Möglichkeiten ist ein Aufklappen ein Klick zu viel. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button {
    background: transparent; color: var(--muted); border: 0; border-radius: 0;
    padding: 4px 10px; font-size: 12px;
}
.seg button:hover { background: var(--panel-2); color: var(--text); }
.seg button.active { background: var(--accent-fill); color: #fff; }

/* Die Art des Werts, wenn nach Fund gegliedert ist – „Einkauf" allein
   sagt nicht, ob Name oder E-Mail gemeint ist. */
.meta-type { color: var(--muted); opacity: .8; }
.meta-type::after { content: " ·"; }
.meta-block-sub { color: var(--muted); font-weight: 400; margin-left: 8px; }

/* Zu welchem Fund ein Wert gehört. Zurückhaltend: Es ist eine Zutat zum
   Wert, keine eigene Angabe – deshalb kein Chip, sondern nur der Name mit
   einem Pfeil davor. */
.meta-group {
    font-size: 12px; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.meta-group::before { content: "↳ "; }

/* Der maßgebliche Wert seines Typs – der, den Liste und Suche zeigen. */
.meta-star { color: var(--line); padding: 2px 6px; line-height: 1; }
.meta-star:hover { color: var(--muted); }
.meta-star.is-primary { color: var(--warn); }

@media (max-width: 700px) {
    .meta-label { min-width: 0; flex: 1 0 100%; }
    .meta-row { gap: 6px; }
}

/* ---------- Anrufe ---------- */

/* Der Hörer steht neben „Ändern" und „Löschen". Etwas größer als die
   Nachbarn, weil ein Symbol allein sonst kleiner wirkt als Text. */
.call-btn { font-size: 15px; line-height: 1; padding: 3px 8px; margin-right: 6px; }
.call-btn:not(:disabled) { color: var(--ok); }
.call-btn:disabled { color: var(--line); }

/* Zeigt beim Tippen, was bei der Anlage ankommt. */
.call-bulk { margin-top: -6px; }

/* Richtung eines Anrufs: ↗ hinaus, ↙ herein, rot = herein und verpasst. */
.call-dir { display: inline-block; font-weight: 700; font-size: 15px; line-height: 1; min-width: 14px; text-align: center; }
.call-dir.out { color: var(--meta); }
.call-dir.in { color: var(--ok, #2e9e5b); }
.call-dir.in.missed { color: var(--danger, #b3261e); }
.call-dir-tabs { margin-top: -4px; }
.call-dir-tabs .call-dir { margin-right: 2px; }

/* Der Anruf im Aufbau: vier Schritte, einer davon läuft. */
.call-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.call-steps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--muted); }
.call-steps li.done { color: var(--text); }
.call-steps li.active { color: var(--text); font-weight: 600; }
.call-step-mark { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.call-steps li.done .call-step-mark { background: var(--ok, #2e9e5b); border-color: var(--ok, #2e9e5b); }
.call-steps li.active .call-step-mark { border-color: var(--meta); animation: call-pulse 1.2s ease-in-out infinite; }
@keyframes call-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,.15); } 50% { box-shadow: 0 0 0 5px rgba(0,0,0,0); } }
.call-outcome { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.call-outcome.ok { background: rgba(46,158,91,.12); color: var(--ok, #2e9e5b); }
.call-outcome.bad { background: rgba(200,50,50,.1); color: var(--danger, #b3261e); }
.call-preview { min-height: 16px; }
.call-preview strong { color: var(--meta); font-weight: 600; letter-spacing: .3px; }

/* Fremdes HTML bringt eigene Vorstellungen von Schriftgröße und Abstand
   mit. Der Rahmen setzt sie zurück – und lässt breite Tabellen in sich
   rollen, statt die Detailansicht zu sprengen. */
.transcript {
    margin-top: 10px; padding: 10px 12px;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px; line-height: 1.55; overflow-x: auto;
}
.transcript > *:first-child { margin-top: 0; }
.transcript > *:last-child { margin-bottom: 0; }
.transcript p { margin: 0 0 8px; }
.transcript ul, .transcript ol { margin: 0 0 8px; padding-left: 20px; }
.transcript li { margin: 2px 0; }
.transcript h3, .transcript h4 { font-size: 14px; margin: 10px 0 6px; }
.transcript a { color: var(--meta-link); }
.transcript table { border-collapse: collapse; font-size: 13px; }
.transcript td, .transcript th { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.transcript pre { white-space: pre-wrap; word-break: break-word; }

/* Das strukturierte Protokoll: ein Satz oben, Angaben darunter. */
.transcript-summary { margin: 0 0 10px; }
.transcript-facts {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
    margin: 0; font-size: 13px;
}
.transcript-facts > div { display: contents; }
.transcript-facts dt { color: var(--muted); white-space: nowrap; }
.transcript-facts dd { margin: 0; color: var(--meta); }

.transcript-todos { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.transcript-todos-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.transcript-todo {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; padding: 2px 0;
}
.transcript-todo::before { content: "→"; color: var(--muted); }
/* Erledigt: durchgestrichen wie in der Aufgabenliste. Der Punkt bleibt
   stehen – er gehört zum Beleg und verschwindet nicht, nur weil jemand
   ihn abgehakt hat. */
.transcript-todo.is-done > span:first-of-type {
    text-decoration: line-through; color: var(--muted);
}
.transcript-todo.is-gone > span:first-of-type { color: var(--muted); }

@media (max-width: 700px) {
    .transcript-facts { grid-template-columns: 1fr; gap: 0 0; }
    .transcript-facts dt { margin-top: 6px; }
}

/* ---------- Kosten ---------- */

.cost-days { margin-top: 8px; }
.cost-day {
    display: flex; align-items: center; gap: 10px;
    padding: 3px 0; font-size: 13px;
}
.cost-date { flex: 0 0 110px; color: var(--muted); }
/* Der Balken ist Größenvergleich, keine Messung – deshalb ohne Achse und
   ohne Zahlen daran. Der Betrag steht daneben. */
.cost-bar { flex: 1 1 auto; height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.cost-bar span { display: block; height: 100%; background: var(--accent); }
.cost-value { flex: 0 0 72px; text-align: right; color: var(--meta); }
.cost-calls { flex: 0 0 44px; text-align: right; color: var(--muted); font-size: 12px; }

/* ---------- Warteschlange ---------- */

.queue-summary {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: 13px; color: var(--muted);
}
.queue-summary strong { color: var(--text); font-size: 15px; margin-right: 3px; }

.queue-section { margin-top: 18px; }
.queue-job {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-top: 1px solid var(--line);
}
.queue-job-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.queue-job .row-title { font-size: 14px; }
.queue-job .row-sub { font-size: 12px; color: var(--muted); }
.queue-job .entry-actions { margin-left: auto; flex: 0 0 auto; }

.queue-bar.clickable { cursor: pointer; }
.queue-bar.clickable:hover { border-color: var(--accent); }

/* ---------- Anrufliste ---------- */

/* Vier Zahlen in einer Kachel: „heute" groß, der Rest als Maßstab. */
.stat-calls .stat-sub {
    display: flex; flex-wrap: wrap; gap: 2px 10px;
    margin-top: 4px; font-size: 11.5px; color: var(--muted);
}
.stat-calls .stat-sub span span { color: var(--text); font-weight: 600; }

.call-row td { vertical-align: middle; }
/* Rufnummer und Hörer gehören auf eine Zeile. Bricht die Spalte um, steht
   das Symbol unter der Nummer und die Zeile wird doppelt so hoch. */
.call-target { white-space: nowrap; }
.call-target .call-btn { margin-right: 6px; vertical-align: middle; }
/* Der Firmenname ist ein Verweis, soll aber nicht wie einer schreien –
   die ganze Zeile ist ohnehin anklickbar. Erst beim Zeigen wird es
   deutlich. */
.call-row a.row-title { color: inherit; }
.call-row a.row-title:hover { color: var(--accent); text-decoration: underline; }
.call-row .suggest-toggle { color: var(--muted); }
.call-detail-row td { background: var(--bg); border-top: 0; padding: 0; }
.call-detail { padding: 12px 14px 14px; }
.call-detail-actions { margin-top: 12px; }

@media (max-width: 700px) {
    /* In der Kartenansicht hat das Dreieck keine eigene Zelle mehr. */
    .call-detail-row td { padding: 0; }
}

/* Zwei bis drei Marken nebeneinander, aber nie untereinander: Umgebrochen
   sieht der Stand aus wie zwei Zeilen und die Tabelle wird unruhig. */
.pool-status { white-space: nowrap; }

/* Ein Vorschlag im aufgeklappten Pool-Eintrag. Die Zeile trägt viel:
   Bezeichnung, Wert, Sicherheit, Fundstelle und die Entscheidung. Was
   ausgeschrieben werden kann, ohne den Wert zu verdrängen, bleibt Wort;
   der Rest ist Zeichen mit Titel. */
/* Sechs feste Spalten: Bezeichnung, Wert, Sicherheit, Fundstelle und
   zwei für die Entscheidung. Jedes Stück bekommt seine Spalte
   ausdrücklich zugewiesen – x-show blendet aus, was gerade nicht gilt,
   und ein ausgeblendetes Element belegt keine Spalte mehr. Ohne die
   Zuweisung rückte in einer Zeile mit nur einer Marke alles um zwei
   Stellen nach rechts, und die Tabelle stünde treppenförmig da. */
.find-row {
    display: grid;
    grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 62px 26px 30px 30px;
    align-items: center;
    column-gap: 10px;
}
.find-row > .meta-label { grid-column: 1; min-width: 0; }
.find-row > .meta-value { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
/* Die Sicherheit steht links in ihrer Spalte, damit „hoch", „mittel"
   und „niedrig" an derselben Kante beginnen. */
.find-row > .chip:not(.chip-icon) { grid-column: 3; justify-self: start; }
.find-row > .find-icon { grid-column: 4; justify-self: center; }
.find-row > .find-yes,
.find-row > .chip-icon { grid-column: 5; justify-self: center; }
.find-row > .find-no,
.find-row > .find-undo { grid-column: 6; justify-self: center; }

.find-icon {
    display: inline-flex; align-items: center; color: var(--muted);
    line-height: 0; padding: 2px; border-radius: 6px;
}
.find-icon:hover { color: var(--accent); background: var(--panel-2); }
/* Ein Wert von einer fremden Seite ist weniger wert als einer aus dem
   eigenen Impressum. Vorher stand das als „fremde Quelle" daneben. */
.find-icon.is-foreign { color: var(--warn); }

/* Die beiden Winkel neben der Auswahl. Sie stehen dicht beieinander –
   zwei Griffe für dieselbe Sache, nicht zwei getrennte Befehle. */
.fold-all { display: inline-flex; gap: 4px; margin-left: 4px; }
.fold-btn { padding: 3px 8px; line-height: 0; color: var(--muted); }
.fold-btn:not(:disabled):hover { color: var(--accent); }

/* Warnfarben und nicht rot: Verwerfen nimmt nichts weg, es legt beiseite.
   Rot bleibt dem Unwiederbringlichen vorbehalten. */
.dismiss-rest:not(:disabled) { color: var(--warn); }
.dismiss-rest:not(:disabled):hover { border-color: var(--warn); }

.find-yes, .find-no, .find-undo {
    font-size: 15px; line-height: 1; padding: 2px 0; width: 100%; min-width: 0;
}
.find-yes:not(:disabled) { color: var(--ok); }
.find-no:not(:disabled)  { color: var(--danger); }
.find-yes:not(:disabled):hover { border-color: var(--ok); }
.find-no:not(:disabled):hover  { border-color: var(--danger); }

/* Verworfen heißt nicht weg: Der Wert bleibt lesbar, aber erkennbar
   beiseitegelegt – sonst wüsste beim Zurückholen niemand mehr, was er
   zurückholt. */
.find-row.is-dismissed .meta-value,
.find-row.is-dismissed .meta-label { text-decoration: line-through; opacity: .55; }
.find-row.is-dismissed .chip { opacity: .55; }

@media (max-width: 700px) {
    /* Sechs Spalten sind auf dem Telefon vier zu viel: Dort fällt die
       Zeile auf den Umbruch zurück, wie die übrigen Metadatenzeilen. */
    .find-row { display: flex; flex-wrap: wrap; align-items: center; }
    .find-row > * { grid-column: auto; }
    .find-yes, .find-no, .find-undo { width: auto; padding: 2px 8px; }
}

/* Was aus der gewählten Branche tatsächlich hinausgeht. Ohne diese Zeile
   ist nicht nachvollziehbar, warum zwei Quellen verschiedene Treffer
   liefern. */
.branche-hinweis {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: -4px 0 14px; font-size: 12.5px; color: var(--muted);
}
.branche-hinweis strong { color: var(--text); font-weight: 600; }
.branche-hinweis code { color: var(--meta-link); }

/* Die Probe in der Pflegemaske: erst ausprobieren, dann speichern. */
.probe-box {
    margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--panel-2);
}

/* Fortschritt eines Suchlaufs. Kein Zappelbalken ohne Zahlen: Die
   Beschriftung sagt, was gerade geholt wird und wie viel davon. */
.search-progress {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.search-progress-head { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.progress-track {
    margin-top: 8px; height: 8px; border-radius: 999px;
    background: var(--panel-2); overflow: hidden;
}
.progress-fill {
    height: 100%; background: var(--accent-fill); border-radius: 999px;
    transition: width .3s ease;
}

/* Der aufgeklappte Pool-Eintrag: dieselbe Machart wie beim Anruf. */
.pool-detail-row td { background: var(--bg); border-top: 0; padding: 0; }
.pool-detail { padding: 12px 14px 14px; }
.pool-detail .panel-head { margin: 0 0 8px; }
.pool-detail .meta-block:first-of-type { margin-top: 0; }
/* Das Dreieck steht vor dem Firmennamen, nicht davor und darunter. */
.data .suggest-toggle { padding: 0 6px 0 0; line-height: 1; }

/* Die beiden Listen der Startseite – die ganze Kopfzeile klappt auf. */
.later-head { cursor: pointer; }
.later-head + .table-wrap + .later-head,
.table-wrap + .later-head { margin-top: 22px; }
.later-head .suggest-toggle { padding: 0 4px; line-height: 1; }

/* Die Kopfzeile klappt auf und zu. Ein Protokoll kostet sonst eine
   Bildschirmhöhe, und gelesen wird fast immer nur das letzte. */
.transcript-head { cursor: pointer; margin-bottom: 0; }
.transcript-head .suggest-toggle { padding: 0 4px; line-height: 1; }
.transcript-teaser {
    margin: 6px 0 0; font-size: 13px; color: var(--muted); cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Die wörtliche Mitschrift. Eingeklappt, weil die Zusammenfassung darüber
   in aller Regel genügt. */
.transcript-words { margin-top: 12px; font-size: 13px; }
.transcript-words summary { color: var(--accent); cursor: pointer; }
.transcript-words > div {
    margin-top: 8px; padding: 8px; max-height: 420px; overflow: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
.transcript-words table { border-collapse: collapse; width: 100%; }
.transcript-words td, .transcript-words th {
    border: 1px solid var(--line); padding: 5px 8px;
    text-align: left; vertical-align: top;
}
.transcript-words th { color: var(--muted); font-weight: 600; }
/* Die erste Spalte trägt nur den Sprecher – sie darf nicht mitwachsen. */
.transcript-words td:first-child { width: 1%; white-space: nowrap; color: var(--muted); }

/* Die Rohmeldung – die Antwort auf „wo ist der Rest hin?". */
.transcript-raw { margin-top: 8px; font-size: 12px; }
.transcript-raw summary { color: var(--muted); cursor: pointer; }
.transcript-raw pre {
    margin: 8px 0 0; padding: 8px; max-height: 240px; overflow: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
    white-space: pre-wrap; word-break: break-all; color: var(--muted);
}

/* ---------- Anreicherung: Vorschläge ---------- */

.inline-select {
    width: auto; min-width: 150px; max-width: 220px;
    font-size: 13px; padding: 4px 26px 4px 8px; margin: 0;
    background-position: right 8px center;
}
.suggest-box {
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
}
/* Ein durchgesehener Lauf tritt zurück, verschwindet aber nicht: Was
   dort steht, ist bezahlt und bleibt greifbar. */
.suggest-box.is-done { opacity: .72; }
.suggest-box.is-done:hover { opacity: 1; }

.suggest-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.suggest-box .meta-row:first-of-type { border-top: 0; }
.suggest-box .meta-source { text-decoration: underline; }

/* Der Auf-/Zuklapper trägt den Auftragsnamen – die ganze Zeile ist
   damit die Schaltfläche, nicht nur ein kleines Dreieck. */
.suggest-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text); font-size: 13.5px;
}
.suggest-toggle:hover { text-decoration: none; color: var(--accent); }
.suggest-toggle span:first-child { color: var(--muted); font-size: 11px; }

/* Zeile über allen Läufen: wie viel ist insgesamt noch zu tun? */
.suggest-summary {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12.5px; margin: 4px 0 10px;
}

/* Ein Fund aus mehreren zusammengehörigen Werten – Name, Durchwahl und
   E-Mail einer Person – wird als ein Block gezeigt, damit erkennbar
   bleibt, wen man unter welcher Nummer verlangt. */
.suggest-group.is-block {
    border-left: 3px solid var(--accent);
    padding-left: 10px;
    margin: 6px 0;
}
.suggest-group.is-block .meta-row:first-of-type { border-top: 0; }

/* ---------- Herkunft aus der Recherche ---------- */

.source-line {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 13px; margin-bottom: 6px;
}
.source-line:last-child { margin-bottom: 0; }

/* ---------- Platzhalterseite ---------- */

.placeholder {
    max-width: 620px; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px;
}
.placeholder h2 { font-size: 17px; margin-bottom: 8px; }
.placeholder p { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.placeholder ul { color: var(--muted); font-size: 14px; margin: 0; padding-left: 20px; }
.placeholder li { margin-bottom: 6px; }

/* ==========================================================================
   Helles Thema – Feinschliff
   Die Variablen oben tragen schon das meiste. Hier folgen nur die Stellen,
   deren Farben fest im dunklen Thema stehen und die für das helle Thema
   neu abgemischt werden müssen. Alles hängt an `html[data-theme="light"]`.
   ========================================================================== */

html[data-theme="light"] .modal,
html[data-theme="light"] .sidebar-backdrop { background: rgba(28, 36, 54, .4); }

/* Die Login-Karte liegt auf einem Foto; hell heißt: heller Schleier,
   halbtransparente weiße Karte. */
html[data-theme="light"] .login-bg::before {
    background: linear-gradient(180deg, rgba(242,244,249,.45), rgba(242,244,249,.72));
}
html[data-theme="light"] .login-bg .card {
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 18px 50px rgba(28, 36, 54, .28);
}

/* Weiße Schrift auf gefüllten Flächen bleibt weiß – aber bei den
   Kennzeichnungen stehen die dunklen Töne so, dass weiß auf dunkel
   gewählt war. Für hell: getönte Fläche, dunkle Schrift in derselben
   Farbfamilie. */
html[data-theme="light"] .badge.admin,
html[data-theme="light"] .badge.todo { background: #e2e9fc; border-color: #9fb3ec; color: #21377e; }
html[data-theme="light"] .badge.note { background: #ece4f8; border-color: #c5aee2; color: #553d80; }
html[data-theme="light"] .badge.done { background: #d9efe4; border-color: #8ac7a8; color: #1e5d3c; }
html[data-theme="light"] .badge.blocked { background: #fadfdf; border-color: #e59aa2; color: #8c2430; }

/* Leaflet-Attribution ist auf Dunkel zugeschnitten. */
html[data-theme="light"] .map-canvas .leaflet-control-attribution {
    background: rgba(255, 255, 255, .82); color: var(--muted);
}

/* Schlagschatten sollen im hellen Thema weicher fallen. */
html[data-theme="light"] .profile-dropdown,
html[data-theme="light"] .combo-liste { box-shadow: 0 12px 28px rgba(28, 36, 54, .18); }
html[data-theme="light"] .toast { box-shadow: 0 6px 20px rgba(28, 36, 54, .18); }

/* ==========================================================================
   Theme-Umschalter
   Kleiner Bildschirmknopf unten in der Seitenleiste, rechts neben dem
   eigenen Namen. Zeigt das Gegenstück an: Im dunklen Thema die Sonne,
   im hellen der Mond.
   ========================================================================== */
.sidebar-user {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-toggle {
    flex: none; width: 28px; height: 28px; padding: 0;
    display: grid; place-items: center; border-radius: 7px;
    background: transparent; border: 1px solid var(--line); color: var(--muted);
    cursor: pointer;
}
.theme-toggle:hover { background: var(--panel-2); color: var(--text); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
