/* Cross-cutting styles that Tailwind utilities don't cover cleanly. */

/* Visible keyboard focus */
:focus-visible {
    outline: 2px solid #0DB1CD;
    outline-offset: 1px;
}

/* Slim scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Vertical timeline — line runs through the center of each icon */
.timeline {
    --timeline-axis: 0.5625rem; /* horizontal center of icon column (9px) */
    position: relative;
    margin: 0;
    padding: 0 0 0 1.75rem;
    list-style: none;
}

.timeline::before {
    content: "";
    position: absolute;
    left: var(--timeline-axis);
    top: 0.5625rem;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: #e2e8f0;
    border-radius: 1px;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item--empty {
    padding-left: 0;
}

/* Icon sits on the axis; white backing masks the line behind the glyph */
.timeline-dot {
    position: absolute;
    left: calc(-1.75rem + var(--timeline-axis));
    top: 0.0625rem;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 0.125rem 0.0625rem;
}

.timeline-dot svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.timeline-dot--whatsapp { color: #128C7E; }
.timeline-dot--linkedin { color: #0a66c2; }
.timeline-dot--outlook_thread { color: #0078d4; }
.timeline-dot--gmail { color: #ea4335; }
.timeline-dot--zoom { color: #2d8cff; }
.timeline-dot--plaud { color: #141414; }
.timeline-dot--calendar { color: #4285f4; }
.timeline-dot--meeting { color: #7c3aed; }
.timeline-dot--outbound { color: #059669; }
.timeline-dot--inbound { color: #2563eb; }
.timeline-dot--enrichment { color: #9333ea; }
.timeline-dot--status_change { color: #64748b; }
.timeline-dot--note { color: #b45309; }
.timeline-dot--program_step { color: #0a8ea6; }
.timeline-dot--pdf { color: #dc2626; }
.timeline-dot--image { color: #0f766e; }
.timeline-dot--default { color: #94a3b8; }
.timeline-dot--next_step { color: #ff00a0; }
.timeline-dot--next_step svg { stroke-width: 2.25; }

/* Direction corner badge: turns every channel icon into an incoming / outgoing variant.
   Colors match the generic inbound (blue) / outbound (green) types. */
.timeline-dir {
    position: absolute;
    right: -0.3rem;
    bottom: -0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    border: 1.5px solid #fff;
    color: #fff;
    line-height: 0;
}

.timeline-dir--in { background: #2563eb; }
.timeline-dir--out { background: #059669; }

.timeline-dot .timeline-dir svg {
    width: 0.55rem;
    height: 0.55rem;
    stroke-width: 3;
}

/* Brand marks are filled artwork, not stroked Lucide glyphs. */
.timeline-dot--brand {
    padding: 1px;
    border-radius: 4px;
    line-height: 0;
}

.timeline-dot--brand img {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* Inline photo or PDF under a timeline entry. */
.timeline-media {
    display: block;
    margin-top: 0.5rem;
    max-width: 36rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f8fafc;
}

.timeline-media img {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: contain;
    background: #f8fafc;
}

iframe.timeline-media {
    width: 100%;
    height: 22rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
}

/*
 * CRM list tables — fixed column widths so async filter swaps do not reflow columns.
 * Widths are set on <th> in the first row; table-layout: fixed honors them for all rows.
 */
.crm-table {
    table-layout: fixed;
    width: 100%;
}

/* Leads: Kontakt | Projekt | Status | Next Step | Deadline | LoB | Verantw. */
/* Leads: Kontakt | Status | Next Step | Deadline | LoB | Verantw. */
.crm-table--leads th:nth-child(1) { width: 24%; }
.crm-table--leads th:nth-child(2) { width: 12%; }
.crm-table--leads th:nth-child(3) { width: 26%; }
.crm-table--leads th:nth-child(4) { width: 9%; }
.crm-table--leads th:nth-child(5) { width: 10%; }
.crm-table--leads th:nth-child(6) { width: 10%; }

/* Contacts: Name | Firma | Status | Next Step | Deadline | LoB | Verantw. */
.crm-table--contacts th:nth-child(1) { width: 20%; }
.crm-table--contacts th:nth-child(2) { width: 18%; }
.crm-table--contacts th:nth-child(3) { width: 11%; }
.crm-table--contacts th:nth-child(4) { width: 24%; }
.crm-table--contacts th:nth-child(5) { width: 8%; }
.crm-table--contacts th:nth-child(6) { width: 10%; }
.crm-table--contacts th:nth-child(7) { width: 9%; }


/* Ellipsis for long single-line cell text inside fixed columns */
.crm-table .crm-cell-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kanban lanes. Plain CSS so a Tabelle/Board swap does not depend on the Tailwind CDN scan. */
.kanban-scroll {
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.kanban {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: max-content;
}

.kanban-lane {
    flex: 0 0 18rem;
    width: 18rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 11.5rem);
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}

.kanban-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.kanban-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}

.kanban-lane-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding: 0.5rem;
}

.kanban-card {
    display: block;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.kanban-card:hover {
    border-color: #0db1cd;
}

.kanban-card--overdue {
    background: #fffbeb;
    border-color: #fcd34d;
}

.kanban-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Chevron process chart on the contact page.
   One arrow per appointment. The current step is wide; the rest are narrow.
   Color follows the phase. Labels sit above each phase group. */
.chevron-chart {
    display: flex;
    /* Every phase as tall as the tallest one, so the arrow band stays one straight row. */
    align-items: stretch;
    width: 100%;
}

/* 36 arrows (checklist + appointments) need about 47rem. Narrower cards scroll instead of spilling out. */
@media (max-width: 1279px) {
    .chevron-chart {
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }
}

.chevron-group {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Content-sized (so the open arrow widens its phase), plus a per-arrow share of spare room. */
    flex: 1 1 auto;
    /* At least as wide as its arrows (the label is excluded via contain on .chevron-label). */
    min-width: min-content;
    --chevron: #0db1cd;
    --chevron-ink: #fff;
}

/* Later phases paint over a label that is wider than its arrows. */
.chevron-chart .chevron-group:nth-child(1) { z-index: 1; }
.chevron-chart .chevron-group:nth-child(2) { z-index: 2; }
.chevron-chart .chevron-group:nth-child(3) { z-index: 3; }
.chevron-chart .chevron-group:nth-child(4) { z-index: 4; }
.chevron-chart .chevron-group:nth-child(5) { z-index: 5; }

/* The current arrow is wide, but it must not swallow the rest of the chain. */

/* Phase colors: distinct, still in the SI burgundy / teal / gold family. */
.chevron-phase--onboarding { --chevron: #5a102c; --chevron-ink: #fff; }
.chevron-phase--intensiv { --chevron: #0a8ea6; --chevron-ink: #fff; }
.chevron-phase--aufbau { --chevron: #1d4e89; --chevron-ink: #fff; }
.chevron-phase--stabi { --chevron: #6d7a22; --chevron-ink: #fff; }
.chevron-phase--abschluss { --chevron: #ded666; --chevron-ink: #3a3410; }

.chevron-label {
    margin: 0 0 0.35rem;
    padding-right: 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chevron);
    white-space: nowrap;
    /* The label must not widen its phase, otherwise short phases (Aufbau, Abschluss)
       get wider arrows than the rest. Long labels are cut instead (full name in title). */
    contain: inline-size;
    overflow: hidden;
    text-overflow: ellipsis;
}


.chevron-steps {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    width: 100%;
}

.chevron {
    /* One notch depth for every arrow (mini, current, folded). Different depths give
       different angles, and then a tip overlaps or gaps against its neighbour's notch. */
    --notch: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.25rem;
    margin-left: calc(var(--notch) * -1 + 1px);
    padding: 0.45rem calc(var(--notch) + 0.15rem);
    background: var(--chevron);
    color: var(--chevron-ink);
    clip-path: polygon(
        0 0,
        calc(100% - var(--notch)) 0,
        100% 50%,
        calc(100% - var(--notch)) 100%,
        0 100%,
        var(--notch) 50%
    );
    border: 0;
    font: inherit;
    line-height: 1.2;
}

.chevron--lead {
    margin-left: 0;
    padding-left: 0.85rem;
    clip-path: polygon(
        0 0,
        calc(100% - var(--notch)) 0,
        100% 50%,
        calc(100% - var(--notch)) 100%,
        0 100%
    );
}

/* One arrow's place in the chain. Every slot grows by the same share of spare room;
   only flex-basis changes on hover, so the swap between arrows animates smoothly. */
.chevron-slot {
    /* 35 closed + 1 open must fit an ~840px card: 35 × 1rem + 11.5rem ≈ 744px. */
    --open-width: 11.5rem;
    --closed-width: 1rem;
    position: relative;
    display: flex;
    flex: 1 1 var(--closed-width);
    /* Wider than the 8px notch overlap, otherwise the next arrow swallows the hit area. */
    min-width: var(--closed-width);
    transition: flex-basis 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), min-width 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chevron-slot.is-open,
.chevron-slot--current {
    flex-basis: var(--open-width);
    min-width: var(--open-width);
}

/* Another arrow is open: the current one folds down to a plain arrow. */
.chevron-chart.is-browsing .chevron-slot--current {
    flex-basis: var(--closed-width);
    min-width: var(--closed-width);
}

.chevron--mini {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.15s ease, padding 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Checklist tasks (onboarding / closeout): paler tint so they read apart from appointments. */
.chevron--task {
    background: color-mix(in srgb, var(--chevron) 45%, #fff);
}

/* A ticked task looks like a finished appointment. */
.chevron--task.chevron--done {
    background: var(--chevron);
}

.chevron--done {
    filter: brightness(0.78);
}

.chevron-slot.is-open .chevron--mini {
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0 1.1rem 0 1.15rem;
    filter: brightness(1.08);
}

.chevron-slot.is-open .chevron--lead {
    padding-left: 0.8rem;
}

/* Name and date inside an opened arrow. Hidden while the arrow is narrow. */
.chevron-peek {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    opacity: 0;
    transition: max-width 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.1s ease;
}

.chevron-slot.is-open .chevron-peek {
    max-width: 9rem;
    opacity: 1;
    transition-delay: 0s, 0.03s;
}

.chevron-peek-name,
.chevron-peek-when {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chevron-peek-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
}

.chevron-peek-when {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.15;
    opacity: 0.85;
}

/* The current arrow fills its slot; its fields fade out while it is folded. */
.chevron--current {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    overflow: hidden;
    justify-content: flex-start;
    padding-right: calc(var(--notch) + 0.85rem);
    padding-left: calc(var(--notch) + 0.7rem);
    filter: none;
    transition: padding 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chevron-current-body {
    transition: opacity 0.1s ease;
}

.chevron-chart.is-browsing .chevron--current {
    padding-left: 0;
    padding-right: 0;
}

/* Absolute while folded: the date field must not keep the phase wide (min-content). */
.chevron-chart.is-browsing .chevron-current-body {
    position: absolute;
    top: 50%;
    left: 1.2rem;
    width: 9.5rem;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease, visibility 0s linear 0.08s;
}

/* Folded current arrow keeps a white dot so "you are here" stays visible. */
.chevron-slot--current::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.4rem;
    height: 0.4rem;
    margin: -0.2rem 0 0 -0.2rem;
    border-radius: 999px;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.chevron-chart.is-browsing .chevron-slot--current::after {
    opacity: 1;
}

.chevron--lead.chevron--current {
    padding-left: 0.95rem;
}

.chevron-mark {
    font-size: 0.8rem;
    font-weight: 700;
}

.chevron-current-body {
    min-width: 0;
    width: 100%;
}

/* Current arrow uses the same type scale and stacking as .chevron-peek
   (name / date / button), so opening another arrow never changes the chart height. */
.chevron-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chevron-current-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin-top: 0.1rem;
}

/* Read-only appointment time (if one was imported / set via MCP). Same as .chevron-peek-when. */
.chevron-when {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.15;
    opacity: 0.85;
    white-space: nowrap;
}

.chevron-overdue {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #ded666;
}

.chevron-phase--abschluss .chevron-overdue {
    color: #5a102c;
}

/* Done / undo button inside an arrow. White pill in the phase color. */
.chevron-action {
    margin-top: 0.2rem;
    padding: 0.1rem 0.55rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--chevron);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.chevron-action:hover {
    filter: brightness(0.92);
}

.chevron-action:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Gold phase: phase color on white is too pale, use the dark ink instead. */
.chevron-phase--abschluss .chevron-action {
    color: var(--chevron-ink);
}