/* ============================================================
   Tivaos CRM — Design System
   Brand: #fc0174 (pink) · #520071 (deep purple) · #3c0ca0 (blue-purple)
   ============================================================ */

:root {
    /* Brand */
    --brand-pink: #fc0174;
    --brand-purple: #520071;
    --brand-blue: #3c0ca0;
    --brand-gradient: linear-gradient(135deg, #fc0174 0%, #520071 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(252,1,116,.15) 0%, rgba(82,0,113,.15) 100%);

    /* Surfaces */
    --bg: #0a0a14;
    --bg-elevated: #14141f;
    --bg-elevated-2: #1f1f2f;
    --bg-hover: #1a1a28;
    --border: #2a2a3f;
    --border-strong: #3a3a52;

    /* Text */
    --text: #e6e6e6;
    --text-muted: #9aa0a6;
    --text-faint: #6b7280;

    /* Semantic */
    --danger: #ff4757;
    --danger-bg: rgba(255, 71, 87, 0.12);
    --success: #2ed573;
    --success-bg: rgba(46, 213, 115, 0.12);
    --warning: #ffa502;
    --warning-bg: rgba(255, 165, 2, 0.12);
    --info: #5352ed;
    --info-bg: rgba(83, 82, 237, 0.12);

    /* Spacing */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;

    /* Radius */
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    --r-4: 16px;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 2px 8px rgba(252, 1, 116, 0.25);

    color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--brand-pink);
    text-decoration: none;
    transition: opacity 0.15s;
}
a:hover { opacity: 0.8; }

button { font: inherit; }

img { max-width: 100%; height: auto; display: block; }

/* ====== Layout: App shell with sidebar ====== */
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    padding: var(--s-5) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0 var(--s-2);
}
.sidebar-brand .brand-icon {
    height: 40px;
    width: auto;        /* natural aspect ratio — TA-icon is ~1.8:1, so ~72px wide */
    flex-shrink: 0;
    display: block;
}
.sidebar-brand .brand-text-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.sidebar-brand .brand-title {
    font-weight: 700;
    font-size: 1rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sidebar-brand .brand-subtitle {
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.sidebar-nav-section {
    padding: var(--s-2) var(--s-2) var(--s-1);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    color: var(--text-muted);
    font-size: 0.92rem;
}
.sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text);
    opacity: 1;
}
.sidebar-link.active {
    background: var(--brand-gradient-soft);
    color: var(--text);
    border: 1px solid rgba(252, 1, 116, 0.3);
}
.sidebar-link-icon { width: 18px; text-align: center; opacity: 0.85; }

.sidebar-footer {
    margin-top: auto;
    padding: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.sidebar-footer .user-name { color: var(--text); font-weight: 500; }
.sidebar-footer form { display: inline; }
.sidebar-footer button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 0.8rem;
    margin-top: var(--s-2);
}
.sidebar-footer button:hover { color: var(--brand-pink); }

.main { padding: var(--s-6); min-width: 0; }     /* full width — uses all available horizontal space */

/* ====== Top bar (mobile + page header) ====== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-5);
    gap: var(--s-4);
    flex-wrap: wrap;
}
.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
}
.page-header .subtitle { color: var(--text-muted); font-size: 0.9rem; }
.page-header-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* ====== Login screen (no sidebar) ====== */
.auth-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--s-5);
    background:
        radial-gradient(circle at 20% 30%, rgba(252,1,116,0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(60,12,160,0.20) 0%, transparent 40%),
        var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-4);
    padding: var(--s-6);
    box-shadow: var(--shadow-2);
}
.auth-card-header {
    text-align: center;
    margin-bottom: var(--s-6);
}
.auth-card-header img.brand-icon {
    height: 80px;
    width: auto;
    margin: 0 auto var(--s-4);
    display: block;
}
.auth-card-header h1 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--s-1);
}
.auth-card-header p { color: var(--text-muted); font-size: 0.88rem; }

/* ====== Forms ====== */
.form-group { margin-bottom: var(--s-4); }
.form-label {
    display: block;
    margin-bottom: var(--s-1);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
/* Force native OS dropdown popups to render in dark theme — fixes white-block
   on focus/hover that browsers (Chrome/Edge/Firefox) paint above <option>s.
   Applied per-element so it ONLY affects selects, not the entire page chrome. */
select,
.form-select,
.inline-status,
.lightbox-zoom-select {
    color-scheme: dark;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
/* Force dark dropdown popup on <option> elements (Chrome/Edge/Firefox) */
.form-select option,
.inline-status option,
select option {
    background-color: #1f1f2f;
    color: #e6e6e6;
}
.form-select option:checked,
.inline-status option:checked,
select option:checked {
    background-color: #fc0174;
    color: #ffffff;
    font-weight: 600;
}
.form-select optgroup,
.inline-status optgroup,
select optgroup {
    background-color: #14141f;
    color: #9aa0a6;
    font-weight: 600;
}

/* ==================================================================
   Custom dropdown — used for inline-status + assign selects where
   native <option> styling is unreliable on Windows/Chrome.
   Activated by JS that wraps a .inline-status <select> in this markup.
   ================================================================== */
.cs {
    position: relative;
    display: inline-block;
    font-size: 0.78rem;
}
.cs-trigger {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    color: var(--text);
    padding: 3px 22px 3px 8px;
    font-size: 0.78rem;
    cursor: pointer;
    min-width: 120px;
    text-align: left;
    position: relative;
    font: inherit;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-trigger::after {
    content: "▾";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.7rem;
}
.cs-trigger:hover { border-color: var(--brand-pink); color: var(--text); }
.cs[open] .cs-trigger { border-color: var(--brand-pink); }
.cs-list {
    position: fixed;        /* fixed so parent overflow can't clip it */
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    background: #1f1f2f;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 1000;
    padding: 4px;
    list-style: none;
    margin: 0;
    display: none;
}
.cs[open] .cs-list { display: block; }
.cs-list li {
    padding: 7px 12px;
    color: var(--text);
    cursor: pointer;
    border-radius: var(--r-1);
    font-size: 0.85rem;
    transition: background 0.1s;
    white-space: nowrap;
}
.cs-list li:hover, .cs-list li[aria-selected="true"]:hover {
    background: var(--bg-hover);
}
.cs-list li[aria-selected="true"] {
    background: var(--brand-pink);
    color: white;
    font-weight: 600;
}
.form-input::placeholder { color: var(--text-faint); }
.form-textarea { min-height: 100px; resize: vertical; }

.form-error {
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: var(--s-1);
}
.form-help {
    color: var(--text-faint);
    font-size: 0.8rem;
    margin-top: var(--s-1);
}

.form-row { display: grid; gap: var(--s-3); }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) {
    .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text-muted);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.form-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #8b8ba8;          /* clearly visible light-grey border in unchecked state */
    border-radius: var(--r-1);
    background: var(--bg-elevated-2);   /* lighter than panel bg, makes empty box pop */
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.form-checkbox input[type="checkbox"]:hover {
    border-color: var(--brand-pink);
    background: var(--bg-hover);
}
.form-checkbox input[type="checkbox"]:active { transform: scale(0.95); }
.form-checkbox input[type="checkbox"]:checked {
    background: var(--brand-pink);
    border-color: var(--brand-pink);
}
.form-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.form-checkbox input[type="checkbox"]:disabled {
    border-color: var(--border);
    background: var(--bg);
    cursor: not-allowed;
    opacity: 0.7;
}
.form-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand-pink);
    outline-offset: 2px;
}
.form-checkbox:hover { color: var(--text); }

/* ====== Buttons ====== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-2);
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.05s, opacity 0.15s, background 0.15s;
    text-decoration: none;
    line-height: 1.2;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: #fc0174;          /* solid brand pink — no gradient on buttons */
    color: white;
    border: 1px solid #fc0174;    /* explicit border so it never falls back to default */
    box-shadow: none;
}
.btn-primary:hover {
    background: #d3036b;
    border-color: #d3036b;
}
.btn-primary:focus { outline: none; box-shadow: none; }
.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.btn-secondary {
    background: var(--bg-elevated-2);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); }

.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
}

.btn-call {
    background: #052e16;             /* near-black forest green — maximum darkness */
    color: white;
    font-weight: 600;
    border: 1px solid #16a34a;       /* subtle medium-green outline for definition */
}
.btn-call:hover { background: #14532d; border-color: #22c55e; }
.btn-call:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
}

.btn-sm { padding: var(--s-2) var(--s-3); font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ====== Cards ====== */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: var(--s-5);
}
.card-header {
    margin-bottom: var(--s-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-title { font-size: 1rem; font-weight: 600; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-4);
}
.stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-5);
}
.stat-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-size: 1.6rem; font-weight: 600; margin-top: var(--s-2); }
.stat-trend { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--s-1); }

/* ====== Alerts / flash messages ====== */
.alert {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    margin-bottom: var(--s-4);
    font-size: 0.9rem;
    border: 1px solid;
}
.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert-error   { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.alert-info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info); }

/* ====== Responsive content images — Bilder in Markdown/Notizen/KB nie über den Container hinaus (Mobile) ====== */
.note-body img { max-width: 100%; height: auto; }

/* ====== Mobile Lead-Karten (ersetzen die Lead-Tabelle auf dem Handy) ====== */
.lead-cards-mobile { display: none; }
@media (max-width: 720px) {
    .table-wrap:has(table[data-lead-table]) { display: none; }
    .lead-cards-mobile { display: flex; flex-direction: column; gap: 0.6rem; }
    .lead-card { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid #fc0174; border-radius: var(--r-3); padding: 0.7rem 0.85rem; cursor: pointer; }
    .lead-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
    .lead-card-meta { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.2rem; }
    .lead-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.5rem; }
}

/* ====== WYSIWYG-Editor ====== */
.wysiwyg-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--bg-elevated-2); border: 1px solid var(--border); border-bottom: none; border-radius: var(--r-2) var(--r-2) 0 0; }
.wysiwyg-btn { min-width: 32px; height: 30px; padding: 0 8px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text); cursor: pointer; font-size: 0.85rem; line-height: 1; }
.wysiwyg-btn:hover { background: rgba(252,1,116,0.12); border-color: #fc0174; }
/* Editor mit weißem „Papier" + dunklem Text = sieht aus wie die echte (cleane) Mail (WYSIWYG). */
.wysiwyg { min-height: 220px; padding: 0.75rem 0.9rem; background: #fff; border: 1px solid var(--border); border-radius: 0 0 var(--r-2) var(--r-2); color: #1a1a1a; line-height: 1.6; overflow-y: auto; }
.wysiwyg:focus { outline: none; border-color: #fc0174; }
.wysiwyg:empty:before { content: attr(data-placeholder); color: var(--text-faint); }
.wysiwyg a { color: #fc0174; }
/* Listen wieder einrücken — das globale Reset (* {padding:0}) nimmt ul/ol sonst Bullets + Einzug,
   wodurch Aufzählungen im Editor + in gerenderten Notizen/Mail-Vorschau „kaputt"/nicht eingerückt aussehen. */
.wysiwyg ul, .note-body ul, .kb-modal-body ul { list-style: disc outside; padding-left: 1.5em; margin: 0.5em 0; }
.wysiwyg ol, .note-body ol, .kb-modal-body ol { list-style: decimal outside; padding-left: 1.6em; margin: 0.5em 0; }
.wysiwyg li, .note-body li, .kb-modal-body li { margin: 0.25em 0; }

/* ====== Tables ====== */
.table-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    /* horizontal scroll only — vertical visible damit Dropdowns/Action-Menüs nicht abgeschnitten werden */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

/* Chip-Style Filter (Lead-Liste Quick-Filter)
   Kompakte Pill-Form mit klarer aktiv/inaktiv-Unterscheidung. */
.chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-strong);
    font-size: 0.82rem;
    user-select: none;
    transition: all 0.12s;
    white-space: nowrap;
}
.chip-filter:hover { background: rgba(252,1,116,0.08); border-color: #fc0174; }
.chip-filter:has(input:checked) {
    background: rgba(252,1,116,0.15);
    border-color: #fc0174;
    color: var(--text);
    font-weight: 500;
}
.chip-filter input[type="checkbox"] { margin: 0; }

.radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: all 0.12s;
    user-select: none;
}
.radio-pill:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.radio-pill:has(input:checked) {
    background: #fc0174;
    color: white;
    font-weight: 500;
}
.radio-pill input[type="radio"] { display: none; }

/* Sticky horizontal scrollbar — bleibt am unteren Viewport-Rand sichtbar
   damit User die breite Lead-Tabelle scrollen kann ohne bis ans Ende zu scrollen.
   JS in app.js syncronisiert die scroll-Position mit der echten .table-wrap. */
.sticky-hscroll {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(13, 13, 16, 0.95);
    border-top: 1px solid var(--border-strong);
    z-index: 80;
    display: none; /* JS zeigt nur wenn nötig */
    /* Scrollbar visuell prominenter */
}
.sticky-hscroll-inner { height: 1px; }
.sticky-hscroll.visible { display: block; }
.sticky-hscroll::-webkit-scrollbar { height: 14px; }
.sticky-hscroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.sticky-hscroll::-webkit-scrollbar-thumb { background: #fc0174; border-radius: 7px; }
.sticky-hscroll::-webkit-scrollbar-thumb:hover { background: #ff1c8a; }
/* Lead-Tabelle hat viele Spalten — soll horizontal scrollbar werden statt sich
   zusammenzudrücken. min-width:max-content nimmt die natürliche Spaltenbreite an,
   .table-wrap (overflow-x:auto) übernimmt das Scrollen. */
.data-table[data-lead-table] { min-width: max-content; }
.data-table[data-lead-table] th,
.data-table[data-lead-table] td { white-space: nowrap; }
/* Erlaube Zeilenumbruch in Note-Spalten falls mal vorhanden */
.data-table[data-lead-table] td.allow-wrap { white-space: normal; }
.data-table thead {
    background: var(--bg-elevated-2);
}
.data-table th {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
/* `.data-table th` (0,1,1) würde sonst `.text-right`/`.text-center` (0,1,0) überstimmen →
   rechtsbündige Zahlen-Spalten hätten linksbündige Überschriften (versetzt). Hier gleichgezogen. */
.data-table th.text-right, .data-table td.text-right { text-align: right; }
.data-table th.text-center, .data-table td.text-center { text-align: center; }
/* Lead-Rows sind komplett klickbar — visueller Hover-Hinweis. */
.data-table[data-lead-table] tbody tr[data-lead-row] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-table[data-lead-table] tbody tr[data-lead-row]:hover {
    background: rgba(252, 1, 116, 0.06);
    box-shadow: inset 3px 0 0 #fc0174;
}

/* ====== Badges ====== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--s-2);
    border-radius: var(--r-1);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}
.badge-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.badge-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info); }
.badge-neutral { background: var(--bg-elevated-2); border-color: var(--border); color: var(--text-muted); }

.badge-admin   { background: var(--brand-gradient-soft); border-color: var(--brand-pink); color: var(--brand-pink); }
.badge-caller  { background: var(--info-bg); border-color: var(--info); color: var(--info); }

/* ====== Filters bar ====== */
.filters {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: var(--s-4);
    margin-bottom: var(--s-5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
    align-items: end;
}

/* ====== Column toggle dropdown ====== */
.col-toggle {
    position: relative;
    display: inline-block;
}
.col-toggle summary {
    list-style: none;
    cursor: pointer;
}
.col-toggle summary::-webkit-details-marker { display: none; }
.col-toggle[open] > summary {
    background: var(--bg-hover);
}
.col-toggle-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    padding: var(--s-3);
    min-width: 260px;
    z-index: 30;
    box-shadow: var(--shadow-2);
}
.col-toggle-hint {
    font-size: 0.72rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 0 8px;
}
.col-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 6px;
    border-radius: var(--r-1);
    cursor: grab;
    transition: background 0.15s;
}
.col-toggle-row:hover { background: var(--bg-hover); }
.col-toggle-row.dragging { opacity: 0.4; }
.col-toggle-row.drop-target { box-shadow: inset 0 2px 0 var(--brand-pink); }
.col-toggle-row .drag-handle {
    color: var(--text-faint);
    user-select: none;
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}
.col-toggle-row .form-checkbox { padding: 0; flex: 1; }

/* Highlight the row that was just viewed when returning from detail */
.data-table tr.row-highlight {
    animation: rowHighlight 3s ease-out;
}
@keyframes rowHighlight {
    0%   { background: rgba(252, 1, 116, 0.30); box-shadow: inset 4px 0 0 var(--brand-pink); }
    100% { background: transparent; box-shadow: inset 4px 0 0 transparent; }
}

/* Screenshot preview thumbnails inside lead table.
   Show at NATURAL aspect ratio (no cover/crop). Mouseover → fixed-positioned popover
   with a 4x larger image, click → fullscreen lightbox. */
.preview-thumb {
    position: relative;
    display: inline-block;
    border-radius: var(--r-1);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    line-height: 0;
    padding: 0;
    cursor: zoom-in;
}
.preview-thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 100px;
    object-fit: contain;
}
/* Listen-Vorschau (Spalten Desktop/Mobile): FESTE Höhe reserviert den Platz schon vor dem Laden
   → kein Zeilen-Springen (CLS), wenn die lazy-geladenen Screenshot-Thumbnails reinkommen. Breite
   bleibt natürlich (gedeckelt). Detail-Seite (.screenshots-large) ist NICHT betroffen. */
td[data-col="preview_d"] .preview-thumb,
td[data-col="preview_m"] .preview-thumb { min-height: 60px; min-width: 40px; }
td[data-col="preview_d"] .preview-thumb img,
td[data-col="preview_m"] .preview-thumb img {
    height: 60px;
    max-height: 60px;
    width: auto;
    max-width: 130px;
}

/* Floating hover preview — built/destroyed by JS, fixed-positioned near cursor */
.preview-hover {
    position: fixed;
    z-index: 180;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    padding: 4px;
    pointer-events: none;
    line-height: 0;
}
.preview-hover img {
    display: block;
    width: auto;
    height: auto;
    max-width: 480px;
    max-height: 420px;
    object-fit: contain;
    border-radius: 4px;
}
/* Pending-Placeholder wenn Screenshots noch nicht gewärmt sind — fixe Größe damit Layout nicht springt */
.preview-thumb-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 60px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: var(--r-1);
    color: var(--text-faint);
    font-size: 1.1rem;
    cursor: help;
}
.preview-thumb-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1;
    pointer-events: none;
}

/* Lightbox modal — full-screen screenshot viewer */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(6px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
}
.lightbox.open { display: flex; }
.lightbox-image-wrap {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    /* Beide Achsen scrollbar — Zoom kann das Bild größer als Viewport machen */
    overflow: auto;
    padding: var(--s-4) 0;
    position: relative;
}
/* Wenn Zoom <= 100% kein horizontaler Scrollbar nötig */
.lightbox-image-wrap.zoom-fit { overflow-x: hidden; }
.lightbox-image-wrap::-webkit-scrollbar { width: 8px; }
.lightbox-image-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.lightbox-image-wrap.loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: var(--brand-pink);
    border-radius: 50%;
    animation: lbSpin 0.9s linear infinite;
    z-index: 1;
}
.lightbox-image-wrap.loading::before {
    content: "Lädt …";
    position: absolute;
    top: calc(50% + 50px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1;
}
@keyframes lbSpin { to { transform: rotate(360deg); } }
.lightbox img {
    max-width: 95vw;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r-2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    background: white;
    transition: opacity 0.3s;
}
/* Sales-Script-Player: 2-spaltig am Desktop, 1-spaltig am Handy (Inline-Grid wäre per Media-Query
   nicht überschreibbar gewesen → hierher verlagert, sonst horizontales Scrollen auf schmalen Screens). */
.script-player { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; align-items: start; }
@media (max-width: 768px) { .script-player { grid-template-columns: 1fr; } }

.lightbox-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 99px;
    padding: 6px 14px;
    color: white;
    font-size: 0.88rem;
    max-width: 92vw;
}
.lightbox-btn {
    background: transparent;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}
.lightbox-btn:hover { background: rgba(255,255,255,0.15); }
.lightbox-btn-close {
    position: fixed;
    top: var(--s-4);
    right: var(--s-4);
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    z-index: 250;       /* above .lightbox-image-wrap so it stays clickable */
}
.lightbox-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.15);
    margin: 0 4px;
}
.lightbox-zoom-select {
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--r-2);
    padding: 6px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 70px;
}
.lightbox-zoom-select option {
    background: #1f1f2f;
    color: #e6e6e6;
}
.lightbox-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 99px;
    padding: 3px;
}
.lightbox-toggle button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    padding: 6px 14px;
    border-radius: 99px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.lightbox-toggle button:hover:not(.active) {
    background: rgba(255,255,255,0.1);
    color: white;
}
.lightbox-toggle button.active {
    background: var(--brand-pink);
    color: white;
}
.lightbox-toggle button.active:hover {
    background: var(--brand-pink);    /* don't fade out when hovering active */
    color: white;
}
.lightbox-url {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    text-align: center;
    max-width: 80vw;
    word-break: break-all;
}
.lightbox-url a { color: var(--brand-pink); }

/* Finding cards on lead-detail */
.finding-card {
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--r-2);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
}
.finding-card.sev-critical { border-left-color: var(--danger); }
.finding-card.sev-high     { border-left-color: var(--warning); }
.finding-card.sev-medium   { border-left-color: var(--warning); }
.finding-card.sev-low      { border-left-color: var(--info); }
.finding-card.sev-info     { border-left-color: var(--border-strong); }
.finding-card-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.finding-card-title { font-weight: 600; flex: 1; }
.finding-card-explain {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 6px 0 8px;
    line-height: 1.5;
}
.finding-card-say {
    font-size: 0.88rem;
    background: var(--bg);
    border-left: 2px solid var(--brand-pink);
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--text);
    line-height: 1.5;
}
.finding-card-say::before {
    content: "💬 Was sagen: ";
    color: var(--brand-pink);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 4px;
}

/* Large screenshots block on lead-detail.
   Bulletproof: <button class="preview-thumb"> wird relativ positioniert, img absolut
   gefüllt — so funktioniert es auch mit Button-Default-Padding und Browser-Eigenheiten. */
.screenshots-large {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-4);
    margin-top: var(--s-4);
}
@media (max-width: 720px) { .screenshots-large { grid-template-columns: 1fr; } }
.screenshots-large .preview-thumb {
    display: block !important;
    width: 100% !important;
    height: 360px !important;
    overflow: hidden !important;
    background: #0d0d10 !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    cursor: zoom-in !important;
    line-height: 0;
}
.screenshots-large .preview-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}
.screenshots-large .preview-thumb .preview-thumb-icon {
    position: absolute !important;
    z-index: 2;
}

/* Action menu (admin user list, etc.)
   position:fixed damit es nicht von Parent-overflow (table-wrap/scroll) geclippt wird.
   JS in app.js positioniert den Panel relativ zum Summary-Button via getBoundingClientRect(). */
.action-menu {
    position: relative;
    display: inline-block;
}
.action-menu summary { list-style: none; cursor: pointer; }
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu-panel {
    position: fixed;
    /* top/left werden via JS gesetzt sobald das details aufgeht */
    max-height: 80vh;
    overflow-y: auto;
    min-width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
    padding: 4px;
    z-index: 50;
}
.action-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: var(--s-3);
    border-radius: var(--r-1);
    font-size: 0.9rem;
}
.action-item:hover { background: var(--bg-hover); }
.action-item-danger:hover { background: var(--danger-bg); color: var(--danger); }
.action-item-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-top: 2px;
    font-weight: normal;
}
.action-sub summary { padding: 0; }
.action-sub-form {
    background: var(--bg);
    padding: var(--s-3);
    border-radius: var(--r-1);
    margin: 4px 0;
}

/* Inline status select inside table */
.inline-status {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    color: var(--text);
    padding: 2px var(--s-2);
    font-size: 0.78rem;
    cursor: pointer;
}
.inline-status:hover { border-color: var(--brand-pink); }
.inline-status:focus { outline: none; border-color: var(--brand-pink); }

/* ====== Empty state ====== */
.empty-state {
    text-align: center;
    padding: var(--s-7) var(--s-5);
    color: var(--text-muted);
}
.empty-state h2 { color: var(--text); font-size: 1.1rem; margin-bottom: var(--s-2); }

/* ====== Pagination ====== */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--s-1);
    margin-top: var(--s-5);
}
.pagination a, .pagination span {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    min-width: 36px;
    text-align: center;
}
.pagination a:hover { background: var(--bg-hover); color: var(--text); opacity: 1; }
.pagination .active {
    background: var(--brand-gradient);
    color: white;
    border-color: transparent;
}

/* ====== Util ====== */
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-gap-2 { gap: var(--s-2); }
.flex-gap-3 { gap: var(--s-3); }
.flex-gap-4 { gap: var(--s-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.hidden { display: none; }

/* ============================================================
   Mobile header (only visible < 900px)
   ============================================================ */
.mobile-header {
    display: none;
}
.mobile-header .hamburger {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--r-2);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.2rem;
}
.mobile-header .logo {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.mobile-header .logo img {
    height: 28px;
    width: auto;
    flex-shrink: 0;
    display: block;
}
.mobile-header .logo span {
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 0.95rem;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    backdrop-filter: blur(2px);
}

/* ============================================================
   Responsive — Tablet + Mobile
   ============================================================ */
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 100;
        box-shadow: var(--shadow-2);
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }

    .mobile-header {
        display: flex;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        padding: 0 var(--s-4);
        align-items: center;
        justify-content: space-between;
        z-index: 50;
    }

    .main { padding: var(--s-4); }

    .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
    .stat { padding: var(--s-3); }
    .stat-value { font-size: 1.3rem; }

    .filters { grid-template-columns: 1fr; }

    .page-header { flex-direction: column; align-items: flex-start; }
    .page-header h1 { font-size: 1.3rem; }
    .page-header-actions { width: 100%; }

    .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }

    /* Tables: horizontal scroll with sticky first column ish */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 720px; font-size: 0.85rem; }
    .data-table th, .data-table td { padding: var(--s-2) var(--s-3); }

    /* Buttons: tap-friendly */
    .btn { min-height: 44px; padding: var(--s-3) var(--s-4); }
    .btn-sm { min-height: 36px; }

    /* Forms: larger inputs for thumbs */
    .form-input, .form-select, .form-textarea {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom */
    }
    .form-textarea { min-height: 100px; }

    .auth-card { padding: var(--s-5) var(--s-4); }
    .auth-card-header img.brand-icon { height: 52px; width: auto; }
}

/* Extra small phones */
@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .data-table { min-width: 600px; font-size: 0.82rem; }
    .main { padding: var(--s-3); }
}

/* ============================================================
   Mobile: einfache Daten-Tabellen als gestapelte Karten statt
   breitem Horizontal-Scroll. Ausgenommen: die komplexe Lead-Tabelle
   ([data-lead-table] → eigenes Mobile-Layout) und der interaktive
   Anrufzeiten-Grid (#slot-table). data-label wird per JS (app.js)
   aus dem <thead> gesetzt.
   ============================================================ */
@media (max-width: 720px) {
    .table-wrap:has(.data-table:not([data-lead-table])),
    .table-wrap:has(table.table:not(#slot-table)) {
        overflow: visible;
        border: none;
        background: none;
        border-radius: 0;
        padding: 0;
    }
    .data-table:not([data-lead-table]),
    table.table:not(#slot-table) { min-width: 0 !important; width: 100%; }

    /* Header-Zeile visuell ausblenden (bleibt für Screenreader/JS-Labels) */
    .data-table:not([data-lead-table]) thead,
    table.table:not(#slot-table) thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap; border: 0;
    }
    .data-table:not([data-lead-table]) tbody tr,
    table.table:not(#slot-table) tbody tr {
        display: block;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--r-3);
        margin-bottom: var(--s-3);
        padding: var(--s-2) var(--s-3);
    }
    .data-table:not([data-lead-table]) tbody td,
    table.table:not(#slot-table) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--s-4);
        padding: var(--s-2) 0;
        border: none;
        border-bottom: 1px solid var(--border);
        white-space: normal !important;
        text-align: right;
        min-width: 0;
    }
    .data-table:not([data-lead-table]) tbody tr td:last-child,
    table.table:not(#slot-table) tbody tr td:last-child { border-bottom: none; }
    .data-table:not([data-lead-table]) tbody td[data-label]::before,
    table.table:not(#slot-table) tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 0.68rem;
        letter-spacing: 0.03em;
        text-align: left;
        flex: 0 0 38%;
        white-space: normal;
    }
    /* Leerzustands-/colspan-Zeilen mittig statt rechtsbündig */
    .data-table:not([data-lead-table]) tbody td[colspan],
    table.table:not(#slot-table) tbody td[colspan] { justify-content: center; text-align: center; }
}

/* On desktop, hide the mobile-only chrome */
@media (min-width: 901px) {
    .mobile-header, .sidebar-overlay { display: none !important; }
}

/* ===== Wissensdatenbank: Hover-Popover + Klick-Modal (a[data-kb-code]) ===== */
.kb-popover {
    position: absolute; z-index: 9998; max-width: 340px;
    background: var(--bg-elevated-2); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 8px;
    padding: 10px 12px; font-size: 0.85rem; line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0,0,0,.5); pointer-events: none;
}
.kb-popover-sum { margin-top: 4px; color: var(--text-muted); }
.kb-popover-hint { margin-top: 6px; font-size: 0.72rem; color: var(--text-faint); }
.kb-modal-overlay {
    position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.62);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 1rem 2rem; overflow-y: auto;
}
.kb-modal {
    position: relative; width: 100%; max-width: 680px;
    background: var(--bg-elevated); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 12px;
    padding: 1.5rem 1.6rem; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.kb-modal-close {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    color: var(--text-muted); font-size: 1.15rem; cursor: pointer; line-height: 1;
}
.kb-modal-close:hover { color: var(--text); }
.kb-modal-cat { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.kb-modal-title { margin: 0 0 0.9rem; font-size: 1.25rem; }
.kb-modal-body { font-size: 0.92rem; line-height: 1.65; }
.kb-modal-foot { margin-top: 1.3rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.kb-modal-foot a { color: var(--brand-pink); text-decoration: none; font-size: 0.85rem; }

/* ===== PageSpeed-Kreise (Google-Style conic-gradient-Donut) ===== */
.ps-gauges { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: flex-start; }
.ps-gauge { text-align: center; width: 66px; }
.ps-gauge-ring {
    width: 54px; height: 54px; border-radius: 50%; position: relative; margin: 0 auto;
    background: conic-gradient(var(--col) var(--deg), var(--bg-elevated-2) 0);
}
.ps-gauge-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg-elevated); }
.ps-gauge-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; z-index: 1; }
.ps-gauge-label { font-size: 0.66rem; color: var(--text-muted); margin-top: 5px; line-height: 1.2; }
.ps-metrics { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.7rem; }
.ps-metric { font-size: 0.78rem; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 3px 9px; border-radius: 6px; }
.ps-metric strong { color: var(--text); }
/* Popover-Variante (Hover über die Speed-Spalte) erbt dieselben Klassen */
.ps-gauge-pop { position: absolute; z-index: 9998; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ps-gauge-pop .ps-gauge-ring::after { background: var(--bg-elevated); }

/* ============================================================
   Mobile-Fundament 2026-06 — KEIN horizontaler Seiten-Scroll ("springt nie") + Spezial-Grids.
   ============================================================ */
/* Harte Grundregel: der Content-Bereich darf die Seite seitlich nie aufweiten.
   Off-Canvas-Sidebar liegt außerhalb von .main (position:fixed) → davon unberührt. */
@media (max-width: 900px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .main { max-width: 100%; overflow-x: hidden; }
}
@media (max-width: 720px) {
    /* Lange Wörter / URLs / E-Mails umbrechen, statt die Seite breit zu ziehen. */
    .card, .lead-card, .note-body, .rem-note, td, .kb-modal-body, .subtitle { overflow-wrap: anywhere; word-break: break-word; }
    img, svg, video, iframe, pre { max-width: 100%; }
    /* Volle Breite für Karten/Header — nichts ragt raus. */
    .card, .stat, .page-header { max-width: 100%; }

    /* Branchen-Performance (feste colgroup-Spalten) → scrollt IM eigenen Wrap statt Layout-Bruch. */
    .branch-perf-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .branch-perf-table { min-width: 560px; }

    /* Anruf-Trichter: schmalere Label-/Wert-Spalten, damit der Balken Platz behält. */
    .funnel-row { grid-template-columns: 84px 1fr 50px !important; gap: 8px !important; }
    .funnel-row > div:first-child { font-size: 0.8rem !important; }

    /* Anrufzeiten-Editor (#slot-table): nicht karten-fähig (Inputs je Zelle) → in sich scrollen statt abgeschnitten. */
    #slot-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}