/* ==========================================================================
   mobile-polish.css — Welle 8 Mobile-Performance-Polish (2026-05-21)
   ADDITIV. Adressiert Sinan-Report "läuft nicht flüssig und sauber".
   Fokus: 300ms-Tap-Delay, momentum-scroll, GPU-acceleration, sticky-hover-bug.
   Brand v2.1 — keine neuen Tokens, nur Performance-Tweaks.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL — gilt auch Desktop, aber wirkt mobile am stärksten
   ────────────────────────────────────────────────────────────────────────── */

/* Tap-Delay 300ms eliminieren auf allen interaktiven Elementen */
button, a, .nav-item, .navBtn, .rf-shell-item, .btnPri, .btnSec, .btnDel,
.addBtn, .mTab, .stageNavItem, .leadCard, .einheit-row, .filterSel,
.statCard, .mobile-fab, .closeBtn, [onclick], [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Globaler Tap-Highlight Reset (Safari/Chrome Mobile) */
* { -webkit-tap-highlight-color: transparent; }

/* Bessere Scroll-Performance auf iOS */
html, body, #app, #mainContent, .overlay, .modal {
  -webkit-overflow-scrolling: touch;
}

/* ──────────────────────────────────────────────────────────────────────────
   SIDEBAR-DRAWER — GPU-Acceleration für Slide-Animation
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .rf-shell-side {
    /* GPU-Layer aktivieren — animation läuft auf Compositor-Thread */
    will-change: transform;
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  body.rf-shell-on.rf-shell-open .rf-shell-side {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Scrim Fade-In smoother */
  .rf-shell-scrim {
    opacity: 0;
    transition: opacity 0.18s ease-out;
    will-change: opacity;
  }
  body.rf-shell-on.rf-shell-open .rf-shell-scrim {
    opacity: 1;
  }

  /* Hamburger Tap-Response */
  .rf-shell-hamburger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s ease-out, transform 0.08s ease-out;
  }
  .rf-shell-hamburger:active { transform: scale(0.94); }

  /* Sidebar-Items während Sidebar offen: kein Lag bei Scroll */
  .rf-shell-items {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   PIPELINE-KANBAN — Mobile-Scroll-Performance
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Horizontaler Kanban-Scroll mit Momentum + Snap */
  .kanban {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 8px;
  }
  .kCol {
    scroll-snap-align: start;
    /* Isolation für Paint/Layout-Performance */
    contain: layout paint;
  }

  /* Vertikaler Scroll INNERHALB einer Spalte */
  .kColBody, .kanbanWrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* CRITICAL: Sticky-Hover-Bug auf Mobile entschärfen
     .leadCard:hover bleibt nach Tap "klebrig" — wir disable hover-effects
     auf hover:none-Devices (pure Touch) */
  @media (hover: none) {
    .leadCard:hover,
    .einheit-row:hover,
    .nav-item:hover,
    .rf-shell-item:hover,
    .navBtn:hover,
    .btnPri:hover,
    .btnSec:hover {
      transform: none !important;
      box-shadow: none !important;
      background: inherit;
    }
  }

  /* Lead-Karten Active-State (statt Hover) für visuelles Feedback */
  .leadCard:active {
    transform: scale(0.985);
    transition: transform 0.06s ease-out;
  }

  /* Karten-Render-Isolation für 60fps Scroll */
  .leadCard {
    contain: layout style;
    will-change: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   MODAL & OVERLAY — Smoother Open/Close
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .overlay {
    -webkit-overflow-scrolling: touch;
    /* Kein backdrop-filter auf Mobile — kostet GPU */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(20, 17, 14, 0.55) !important;
  }

  .overlay .modal {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
  }

  /* Modal-Footer Sticky Action-Buttons — kein layout-thrash */
  .modalFooter {
    contain: layout style;
    will-change: transform;
  }

  /* Tab-Bar im Modal: smoother horizontal scroll */
  .mTabs {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   INPUT & FORM — keine iOS-Zoom + bessere Touch-Response
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important; /* iOS-Anti-Zoom */
    touch-action: manipulation;
  }

  /* Form-Buttons Tap-Feedback */
  .btnPri:active, .btnSec:active, .btnDel:active {
    transform: scale(0.96);
    transition: transform 0.06s ease-out;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   GENERAL — Reduce Motion bei System-Preference + Animation-Slim-Down
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Box-Shadows auf Karten weniger heavy (saves repaint) */
  .leadCard, .einheit-row, .statCard, .as-trigger {
    box-shadow: 0 1px 3px rgba(20, 17, 14, 0.06) !important;
  }

  /* Backdrop-blur global aus auf Mobile (war auf <nav> aktiv) */
  nav, .dashGrid, .as-trigger, .statCard {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Smooth-Scroll auf Anker-Links */
  html { scroll-behavior: smooth; }
}

/* Respekt Accessibility — User mit prefers-reduced-motion bekommt 0 Anim */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   WELLE 10c · Brand-Foundation-Polish (Mobile UX)
   Tokens: ~/Desktop/_brand/deinersterqm-brand-pack/tokens.css
   ════════════════════════════════════════════════════════════════════════════ */

/* App-Bar Default versteckt (rf-shell.js injizt DOM, Mobile media-query zeigt) */
.rf-shell-appbar { display: none; }

@media (max-width: 768px) {
  /* ── Mobile App-Bar ─────────────────────────────────────────────────── */
  body.rf-shell-on .rf-shell-hamburger { display: none !important; }

  body.rf-shell-on .rf-shell-appbar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 12px 0 14px;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--canvas, #F3EFE7);
    border-bottom: 1px solid var(--hairline, rgba(20, 17, 14, 0.08));
    z-index: 9998;
    align-items: center;
    gap: 12px;
    box-sizing: border-box; /* Welle 10e: war content-box → App-Bar wurde dadurch zu hoch + brach Body-Scroll-Math */
  }

  /* Welle 10e: defensive Scroll-Garantien für Mobile */
  html, body {
    overflow-x: hidden !important; /* kein horizontaler Bleed durch off-canvas Sidebar */
  }
  html { -webkit-text-size-adjust: 100%; }
  /* Body MUSS vertikal scrollen können wenn kein Modal aktiv */
  body:not(.modal-open) {
    overflow-y: auto !important;
    position: static !important;
  }

  /* Override rf-shell.css :270 — App-Bar braucht eigene Höhe */
  body.rf-shell-on {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }

  .rf-shell-appbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .rf-shell-appbar-monogram {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    overflow: hidden;
  }
  .rf-shell-appbar-monogram svg {
    display: block;
    border-radius: 7px;
  }
  .rf-shell-appbar-titlewrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    line-height: 1;
  }
  .rf-shell-appbar-overline {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--accent, #A85E3A);
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .rf-shell-appbar-title {
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-1, #14110E);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rf-shell-appbar-burger {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--hairline, rgba(20, 17, 14, 0.10));
    background: transparent;
    color: var(--ink-1, #14110E);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rf-shell-appbar-burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
  }
  .rf-shell-appbar-burger:active {
    background: rgba(20, 17, 14, 0.06);
  }

  /* ── Stage-Pills · Touch-First ──────────────────────────────────────── */
  .stageNavWrap {
    background: var(--canvas, #F3EFE7);
    padding: 12px 14px 10px;
    margin: 0 -12px 8px;
    border-bottom: 1px solid var(--hairline, rgba(20, 17, 14, 0.08));
  }
  .stageNav { gap: 6px; padding: 0 0 4px; }
  .stageNavItem {
    background: var(--surface, #FDFBF6) !important;
    border: 1px solid var(--hairline, rgba(20, 17, 14, 0.10)) !important;
    color: var(--ink-2, rgba(20, 17, 14, 0.65)) !important;
    padding: 9px 14px !important;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: none;
  }
  .stageNavItem.active {
    background: var(--ink-1, #14110E) !important;
    color: var(--canvas, #F3EFE7) !important;
    border-color: var(--ink-1, #14110E) !important;
    font-weight: 600;
  }
  .stageNavItem .stageNavCount {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-feature-settings: 'tnum', 'zero';
    font-size: 10.5px;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    min-width: 22px;
    text-align: center;
    background: rgba(20, 17, 14, 0.06);
    color: var(--ink-1, #14110E);
  }
  .stageNavItem.active .stageNavCount {
    background: var(--accent, #A85E3A);
    color: var(--canvas, #F3EFE7);
  }

  /* ── Lead-Karten · Touch-First Layout ───────────────────────────────── */
  .leadCard, .kCard {
    background: var(--surface, #FDFBF6) !important;
    border: 1px solid var(--hairline, rgba(20, 17, 14, 0.07)) !important;
    border-radius: 10px !important;
    padding: 14px !important;
    box-shadow: none !important;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .leadCard:active, .kCard:active {
    background: var(--canvas, #F3EFE7) !important;
    border-color: rgba(168, 94, 58, 0.30) !important;
  }
  .leadCard .leadCardName, .leadCard .leadName, .kCard .kCardName {
    font-family: var(--font-display, 'Inter Tight', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: var(--ink-1, #14110E) !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  .leadCard .leadCardMeta, .kCard .kCardMeta {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-feature-settings: 'tnum', 'zero' !important;
    font-size: 11px !important;
    color: var(--ink-3, rgba(20, 17, 14, 0.55)) !important;
    letter-spacing: 0.02em !important;
  }
  .leadCard .tag, .kCard .tag {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
  }

  /* ── Dashboard-KPI · 2×2 Grid mit Tabular-Num-Zahlen ────────────────── */
  .dashGrid, .kpiGrid, .statsGrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  .statCard, .kpiCard, .dashCard {
    background: var(--surface, #FDFBF6) !important;
    border: 1px solid var(--hairline, rgba(20, 17, 14, 0.07)) !important;
    border-radius: 10px !important;
    padding: 16px 14px !important;
    box-shadow: none !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 96px !important;
  }
  .statCard .statLabel, .kpiCard .kpiLabel, .dashCard .label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--ink-3, rgba(20, 17, 14, 0.55)) !important;
    margin-bottom: 8px !important;
  }
  .statCard .statNum, .kpiCard .kpiValue, .dashCard .value {
    font-family: var(--font-display, 'Inter Tight', sans-serif) !important;
    font-feature-settings: 'tnum', 'zero' !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink-1, #14110E) !important;
    line-height: 1 !important;
  }
  .dashGrid > .statCard:first-child::before,
  .kpiGrid > .kpiCard:first-child::before {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--accent, #A85E3A);
    margin-bottom: 10px;
  }

  /* ── Section-Headers · Brand-Signature ──────────────────────────────── */
  h1, h2, .pageTitle, .sectionTitle {
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    letter-spacing: -0.025em;
  }
  h1, .pageTitle {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    margin: 16px 14px 12px;
  }
  h2, .sectionTitle {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    margin: 22px 14px 10px;
  }
  .emptyState {
    padding: 40px 24px !important;
    text-align: center !important;
  }
  .emptyState h3, .emptyState .emptyTitle {
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-1, #14110E);
    margin: 14px 0 6px;
  }
  .emptyState p, .emptyState .emptyDesc {
    font-size: 13px;
    color: var(--ink-3, rgba(20, 17, 14, 0.55));
    line-height: 1.5;
  }

  /* ── FAB · disziplinierter in App-Bar-Ära ───────────────────────────── */
  .mobile-fab {
    width: 52px !important;
    height: 52px !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    font-size: 24px !important;
    box-shadow: 0 4px 14px rgba(168, 94, 58, 0.28), 0 1px 3px rgba(20, 17, 14, 0.10) !important;
  }

  /* ── Drawer (Sidebar) · Mobile-Polish ───────────────────────────────── */
  .rf-shell-side {
    width: 86vw !important;
    max-width: 320px !important;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
  }
  .rf-shell-brand { display: none !important; } /* App-Bar trägt Brand */
  .rf-shell-cta {
    margin-top: 4px !important;
    padding: 13px 12px !important;
    font-size: 14px !important;
  }
  .rf-shell-item {
    padding: 12px 14px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
  .rf-shell-group-label {
    padding: 14px 12px 6px !important;
  }
}