/* Pipeline (Kanban) interaction styles, 13.10.2026 (pipeline package step 1).
   Loaded after crm-style.css and crm-workspace.css (see index.html), so equal selectors win here.
   Keyboard: cards are focus stops (tabindex=0), Enter opens, Alt+Arrow moves one stage.
   Touch: long-press on a card starts dragging (crm-script.js, DRAG & DROP PIPELINE). */

/* ---- keyboard focus ---- */
.kanban-board .kanban-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- dragging ---- */
/* Card that is being moved: stays in place as a faint placeholder. Cards no longer fade in on every
   re-render (only .is-new, fill-mode backwards, crm-motion.css), so nothing holds the opacity at 1. */
.kanban-board .kanban-card.kanban-card-dragging {
    opacity: 0.35;
}

/* Floating copy that follows the finger. JS sets transform (translate3d) inline; the tilt uses the separate
   rotate property so it does not fight with that. crm-style.css removes card shadows with !important, so the
   lift comes from a drop-shadow filter instead. */
.kanban-card.kanban-drag-clone {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 100001;
    pointer-events: none;
    animation: none;
    transition: none;
    opacity: 0.95;
    rotate: 1.5deg;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
    will-change: transform;
}

/* While a finger holds a card: no callout, no scroll chaining, no text selection on the held card. Measured
   (CRM flüssig, 14.10.2026): switching the body class restyled the whole document, 44 to 60 ms on a phone at the
   start and again at the drop. The cause was not only the former universal selector: touch-action (about 45 ms)
   and user-select (about 18 ms) on the body force every element to be restyled, the callout costs nothing.
   touch-action only counts when a touch starts, so it never applied to the running drag; kanbanTouchMove stops
   the page from panning (preventDefault). Text selection: the held card below; on touch screens every card has
   user-select none anyway (pointer: coarse block). */
body.kanban-touch-dragging {
    -webkit-touch-callout: none;
    overscroll-behavior: contain;
}
.kanban-board .kanban-card.kanban-card-dragging {
    -webkit-user-select: none;
    user-select: none;
}
/* The phone board snaps to columns (crm-style.css); while a card is dragged the edge auto-scroll moves the
   board in small steps, which snapping would fight. */
body.kanban-touch-dragging .kanban-board {
    scroll-snap-type: none;
}

/* A card gliding to its new column (FLIP after a move, crm-script.js kanbanKarteGleiten) passes over the
   cards of the columns in between: keep it on top for the 180 ms. */
.kanban-board .kanban-card.is-moving {
    z-index: 2;
}

/* ---- touch screens ---- */
@media (pointer: coarse) {
    /* Long-press means "drag" on cards: no text selection or link callout on top of it. */
    .kanban-board .kanban-card {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* iOS zooms into form fields under 16px. crm-workspace.css sets every select in .view to 12px with
       !important (specificity 0,6,2) and crm-style.css sets .inline-stage-select to 0.78rem !important.
       This rule has to be !important as well to beat them; the view IDs give it the higher specificity. */
    body :is(#view-pipeline, #view-leads) select.inline-stage-select {
        font-size: 16px !important;
    }
}

/* ===== Pipeline numbers (step 2, 13.10.2026): column sums, close probability, close date, risk ===== */
/* Amounts are rendered by crm-script.js as one text node with the € sign (presentation mode masks it). */
body {
    --pipe-danger: #b42318;
    --pipe-danger-bg: rgba(220, 38, 38, 0.10);
    --pipe-warn-bg: rgba(146, 96, 28, 0.12);
}
body.dark-mode {
    --pipe-danger: #f6a59b;
    --pipe-danger-bg: rgba(248, 113, 113, 0.16);
    --pipe-warn-bg: rgba(221, 183, 130, 0.16);
}

/* ---- column header: count in .col-header, sums in .col-sum below it ---- */
.kanban-col .col-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kanban-col .col-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.kanban-col .col-sum-total {
    color: var(--text);
    font-weight: 550;
}

/* ---- card: probability next to the amount (plain chip, unlike the coloured star score) ---- */
.kanban-card .kanban-prob {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 550;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Set by hand (until the next stage change). */
.kanban-card .kanban-prob.is-override {
    border-style: dashed;
    color: var(--text);
}

/* ---- card: close date and risk badges ---- */
.kanban-card .kanban-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 6px;
}
.kanban-card .kanban-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 550;
    /* Phone columns are ~170 px wide inside the card: long labels wrap instead of overflowing the card.
       Number and unit stay together through a no-break space (crm-script.js). */
    white-space: normal;
    overflow-wrap: anywhere;
}
.kanban-card .kanban-badge i {
    font-size: 12px;
}
.kanban-card .kanban-close {
    background: var(--surface-2, rgba(100, 116, 139, 0.12));
    color: var(--muted);
}
.kanban-card .kanban-close.is-overdue {
    background: var(--pipe-danger-bg);
    color: var(--pipe-danger);
}
.kanban-card .kanban-risk {
    background: var(--pipe-warn-bg);
    color: var(--app-warning, #92601c);
}

/* Full text for screen readers; the card (position: relative) anchors it, so it never widens the page. */
.kanban-card .kanban-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- stage pills above the board and the summary bar ---- */
.revenue-pipeline .rev-stage-total {
    border-color: var(--border-strong, var(--border));
}
.revenue-pipeline .rev-stage-name,
.revenue-pipeline .rev-stage-count {
    font-size: 12px;
}
.revenue-pipeline .rev-stage-weighted {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.revenue-pipeline .rev-stage-leer {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}
.pipeline-hinweis .ph-gewichtet {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---- filter toggles next to the star filter (topbar filter panel) ---- */
.topbar-filters .filter-toggle-btn {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: max(12px, 0.85rem);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.topbar-filters .filter-toggle-btn[aria-pressed="true"] {
    background: var(--brand, var(--primary));
    border-color: var(--brand, var(--primary));
    color: var(--on-brand, #fff);
}
.topbar-filters .filter-toggle-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
@media (hover: hover) {
    .topbar-filters .filter-toggle-btn:not([aria-pressed="true"]):hover {
        border-color: var(--primary);
        color: var(--primary);
    }
}
/* Phone filter panel and touch screens: 44 px touch targets. */
@media (max-width: 768px), (pointer: coarse) {
    .topbar-filters .filter-toggle-btn {
        height: auto;
        min-height: 44px;
    }
}

/* ===== Lead form and admin dashboard (step 3, 13.10.2026) ===== */

/* ---- lead form: hints under "Abschlusswahrscheinlichkeit" and "Erwarteter Abschluss" ---- */
.form-group .lead-deal-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.form-group .lead-deal-hint:empty,
.form-group #err-probability:empty {
    display: none;
}
/* Percentages stay visible in presentation mode; crm-praesentation.css blurs every number input. */
html.praesentation #f-probability {
    filter: none;
}
/* Info button (hinweisSymbol) in these hints: crm-workspace.css styles every modal button as a 38 px control with an
   !important corner radius, which turned the 18 px circle into a pill. #lead-modal outranks the long selector of
   that rule; the radius needs !important to beat the !important there. */
#lead-modal .lead-deal-hint > button[data-text] {
    min-height: 0;
    border-radius: 50% !important;
}
/* Phones: crm-workspace.css sets min-height 44px !important on modal buttons. A 44 px square target with a drawn
   20 px ring instead of a stretched oval; !important because of that rule and the inline width, height, border and
   background of hinweisSymbol. */
@media (max-width: 768px) {
    #lead-modal .lead-deal-hint > button[data-text] {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        border: 0 !important;
        background: radial-gradient(circle, transparent 0 9px, var(--border-strong, var(--border)) 9px 10px, transparent 10px) !important;
    }
}

/* ---- lead form on phones: inline 1fr 1fr grids stack to one column (follow-up, 13.10.2026) ---- */
/* index.html builds three blocks of the lead form as inline grids (style="grid-template-columns:1fr 1fr"):
   "Nächste Aktion" (f-next-action .. f-next-action-time), the Wartungsvertrag pair (f-maintenance-amount,
   f-maintenance-deadline) and the services list (#f-maintenance-services). crm-workspace.css stacks such grids
   only inside .workspace-overlay; the lead modal is a .modal-overlay, so at 390 px the selects pushed about
   145 px past the modal edge. Selector: every inline grid inside #lead-form that holds form controls, the same
   shape as the workspace rule, scoped by the form id (the blocks have no class of their own, index.html is
   not touched). !important is needed to beat the inline style; nothing else sets these columns. */
@media (max-width: 768px) {
    #lead-form [style*="grid-template-columns"]:has(input, select, textarea) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    /* Stacked field pairs keep the 1rem rhythm of .form-grid (inline gap 0.75rem); the checkbox list keeps its
       tight gap. */
    #lead-form [style*="grid-template-columns"]:has(select, input:not([type="checkbox"])) {
        gap: 1rem !important;
    }
}

/* ---- admin dashboard: KPI notes and the "Gefährdete Deals" panel ---- */
/* Notes under the KPI values at 12 px (were 10/11 px), all four tiles alike. */
body .dash-kpis .dash-metric-note {
    font-size: 12px;
}
.dash-risk {
    border-top: 1px solid var(--border);
    padding-top: 22px;
    margin-bottom: 30px;
}
.dash-risk .dash-risk-sum {
    margin: 4px 0 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.dash-risk .dash-row-main > span,
.dash-risk .dash-risk-more {
    font-size: 12px;
}
.dash-risk .dash-risk-value {
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- notes per tab (customer-card.js, spec "Notizzettel je Reiter"): presentation mode blurs the note text only;
   headings, area chips, dates, authors and counts stay readable. ---- */
html.praesentation .customer-note-text,
html.praesentation .customer-note-files,
html.praesentation .customer-notes-pending {
    filter: blur(6px);
}