/* ═══════════════════════════════════════════════════════════════════════════════
   VP-MIB V2 — Design Token Override Layer
   Loads AFTER style.css to override all custom properties.
   Remove this file to revert to V1 instantly.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Base Reset ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── V2 Design Tokens ────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Gestaltungsfestlegung vom 15.08.2026 — siehe PRODUCT.md, "Brand Commitments"

   Kein Motiv, keine Metapher, kein Materialbezug. Die Oberflaeche ist ein
   Werkzeug ohne Erzaehlung. Daraus folgen vier Regeln, die dieser Block
   durchsetzt:

   1. DICHTE VOR GROSSZUEGIGKEIT. Radien sind klein (4-10px statt 8-20px),
      Zeilen niedrig, Abstaende knapp. Es soll viel gleichzeitig sichtbar sein.
   2. TRENNUNG DURCH LINIE, NICHT DURCH SCHATTEN. Flaechen liegen nebeneinander,
      nicht uebereinander. Schatten gibt es nur noch fuer Dinge, die wirklich
      schweben: Dialoge und Menues.
   3. FARBE IST EIN ZUSTANDSSIGNAL. Die Grundflaechen sind farblos-neutral mit
      einem Hauch Kuehle. Chroma erscheint nur dort, wo sie etwas bedeutet:
      faellig, Termin, abgeschlossen, gesperrt, ausgewaehlt.
   4. ZIFFERN STEHEN IN EINER FLUCHT. Rufnummern, Betraege und Daten laufen in
      Geist Mono mit gleich breiten Ziffern.

   Hell und dunkel sind gleichwertig — keine ist die abgewandelte andere. Die
   VOREINSTELLUNG ist hell (Entscheidung vom 15.08.2026, siehe DESIGN.md);
   gesetzt wird sie in public/theme-init.js, nicht hier.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Akzent ───────────────────────────────────────────────────────────────
     Bewusst gedaempft und dunkler als das uebliche SaaS-Blau. Er markiert
     Auswahl, Fokus und die eine Hauptaktion je Ansicht — sonst nichts. Er
     liegt weit genug von Rot, Bernstein und Gruen, damit er nie mit einem
     Zustand verwechselt wird. */
  --primary: #2F6FD0;
  --primary-hover: #2559A8;
  --primary-light: rgba(47,111,208,0.08);
  --primary-tint: rgba(47,111,208,0.14);

  /* Altnamen — im Bestand verbreitet, deshalb weitergefuehrt */
  --apple-blue: #2F6FD0;
  --apple-blue-hover: #2559A8;
  --apple-blue-light: rgba(47,111,208,0.08);
  --apple-blue-tint: rgba(47,111,208,0.14);
  --apple-indigo: #2F6FD0;

  /* ─── Zustandsfarben ──────────────────────────────────────────────────────
     Entsaettigt gegenueber den Vorgaengern. Ueber acht Stunden ermuedet
     Vollsaettigung; die Signalwirkung entsteht ohnehin aus dem Kontrast zum
     farblosen Grund, nicht aus der Leuchtkraft. */
  --success: #2E8B57;
  --success-light: rgba(46,139,87,0.10);
  --apple-green: #2E8B57;
  --apple-green-light: rgba(46,139,87,0.10);

  --warning: #B8730E;
  --warning-light: rgba(184,115,14,0.10);
  --apple-orange: #B8730E;
  --apple-orange-light: rgba(184,115,14,0.10);

  --danger: #C8372D;
  --danger-light: rgba(200,55,45,0.09);
  --apple-red: #C8372D;
  --apple-red-light: rgba(200,55,45,0.09);

  --apple-purple: #6B5BC4;
  --apple-pink: #B0417A;
  --apple-teal: #2A7F8F;

  /* ─── Flaechen (hell) ─────────────────────────────────────────────────────
     Neutralgrau mit minimaler Kuehle — nicht das blaustichige Slate, das jede
     Vorlage benutzt. Der Grund ist ruhig, die Karte liegt hell darauf. */
  --page-bg: #F5F6F7;
  --card-bg: #FFFFFF;
  --raised-bg: #FAFBFB;
  --hover-bg: rgba(16,20,24,0.045);
  --border: #E1E4E7;
  --border-light: #EBEDEF;
  --border-strong: #CFD4D8;
  --separator: #E1E4E7;

  /* ─── Text (hell) ─────────────────────────────────────────────────────── */
  --text-primary: #14181C;
  --text-secondary: #5A646E;
  --text-muted: #8B949D;

  /* ─── Seitenleiste (hell) ─────────────────────────────────────────────────
     Frueher eine dunkle Wand neben heller Seite — zwei Welten in einem Bild.
     Jetzt eine Stufe dunkler als der Grund, mit Kante. Ruhiger und heller. */
  --sidebar-bg: #ECEEF0;
  --sidebar-border: #DDE1E4;
  --sidebar-text: #5A646E;
  --sidebar-text-hover: #14181C;
  --sidebar-active-bg: rgba(47,111,208,0.10);
  --sidebar-active-text: #2559A8;

  /* ─── Schatten ────────────────────────────────────────────────────────────
     Fast abgeschafft. Karten und Zeilen trennt eine Linie, kein Schlagschatten.
     Nur was wirklich ueber der Seite schwebt, wirft einen. */
  --shadow-sm: none;
  --shadow-card: none;
  --shadow-md: 0 2px 6px rgba(16,20,24,0.07), 0 0 0 1px rgba(16,20,24,0.04);
  --shadow-lg: 0 8px 28px rgba(16,20,24,0.12), 0 0 0 1px rgba(16,20,24,0.05);

  /* ─── Radien ──────────────────────────────────────────────────────────────
     Halbiert. Weiche Ecken lassen eine dichte Liste unruhig aussehen, weil
     jede Zeile eine eigene Kontur bekommt. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* ─── Schrift ─────────────────────────────────────────────────────────────
     Geist: enge Laufweite, offene Punzen, ruhig auf kleinen Graden.
     Geist Mono: alles, was in Spalten untereinander steht. */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Masse fuer Dichte ───────────────────────────────────────────────────
     Neu eingefuehrt, damit Zeilenhoehe und Abstaende an einer Stelle stehen
     statt verstreut in den Komponenten. */
  --zeile-hoehe: 34px;
  --zeile-hoehe-eng: 30px;
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;

  /* ─── Bewegung ────────────────────────────────────────────────────────────
     Kuerzer als vorher. In einem Werkzeug ist Animation Wartezeit. */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 90ms;
  --duration-normal: 130ms;
  --duration-slow: 200ms;
}


/* ─── Die dunkle Ansicht ─────────────────────────────────────────────────────
   Kein invertiertes Hell. Der Grund ist ein sehr dunkles Neutral, nicht
   Marineblau; die Flaechen stufen sich in kleinen Schritten, damit
   Seitenleiste, Seite, Karte und gehobene Flaeche unterscheidbar bleiben,
   ohne dass es kontrastreich flackert. Die Akzent- und Zustandsfarben werden
   aufgehellt, weil dieselbe Farbe auf dunklem Grund dunkler wirkt.
   ────────────────────────────────────────────────────────────────────────── */

.theme-dark {
  --primary: #5C9AE8;
  --primary-hover: #7CB0F0;
  --primary-light: rgba(92,154,232,0.12);
  --primary-tint: rgba(92,154,232,0.20);
  --apple-blue: #5C9AE8;
  --apple-blue-hover: #7CB0F0;
  --apple-blue-light: rgba(92,154,232,0.12);
  --apple-blue-tint: rgba(92,154,232,0.20);
  --apple-indigo: #5C9AE8;

  --success: #4CAF7D;
  --success-light: rgba(76,175,125,0.14);
  --apple-green: #4CAF7D;
  --apple-green-light: rgba(76,175,125,0.14);

  --warning: #D99A2B;
  --warning-light: rgba(217,154,43,0.14);
  --apple-orange: #D99A2B;
  --apple-orange-light: rgba(217,154,43,0.14);

  --danger: #E5675C;
  --danger-light: rgba(229,103,92,0.13);
  --apple-red: #E5675C;
  --apple-red-light: rgba(229,103,92,0.13);

  --apple-purple: #9084DB;
  --apple-pink: #D4739F;
  --apple-teal: #4FA3B3;

  --page-bg: #131619;
  --card-bg: #191D21;
  --raised-bg: #1F242A;
  --hover-bg: rgba(255,255,255,0.05);
  --border: #262C33;
  --border-light: #1F242A;
  --border-strong: #363E47;
  --separator: #262C33;

  --text-primary: #E6E9EC;
  --text-secondary: #98A1AB;
  --text-muted: #6B747E;

  --sidebar-bg: #0D0F12;
  --sidebar-border: #1F242A;
  --sidebar-text: #98A1AB;
  --sidebar-text-hover: #E6E9EC;
  --sidebar-active-bg: rgba(92,154,232,0.14);
  --sidebar-active-text: #8FBAF0;

  --shadow-sm: none;
  --shadow-card: none;
  --shadow-md: 0 2px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07);

  color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FEHLENDE TOKENS — nachgetragen am 15.08.2026
   ---------------------------------------------------------------------------
   Beim Umbau der Farbwelt kam heraus, dass fuenfzehn Variablen im Code
   *gelesen*, aber nirgends *definiert* waren. CSS meldet das nicht: Es nimmt
   still den Rueckfallwert hinter dem Komma. Diese Rueckfallwerte stammen
   durchweg aus der hellen Ansicht — `var(--bg-card, #fff)`, `#F1F5F9`,
   `#6366F1`. In der dunklen Ansicht blieben die betroffenen Stellen deshalb
   weiss oder grellblau stehen.

   Sichtbar war das an der Filterleiste der Kontakte (weisses Suchfeld auf
   dunklem Grund) und im Kalender, dessen Ueberfahren-Farbe gar nicht existierte.
   Betroffen waren u. a. --surface-secondary (11 Fundstellen), --text-tertiary
   (36) und --bg-secondary (8), auch in public/css/presence.css.

   Statt in fuenfzehn Dateien einzeln zu suchen, sind die Namen hier als Verweis
   auf die bestehenden Tokens definiert. Damit greifen alle Fundstellen auf
   einen Schlag und in beiden Ansichten. Der eigentliche Tippfehler
   (--bg-card statt --card-bg) ist zusaetzlich an der Fundstelle berichtigt.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Eine gedaempfte Flaeche zwischen Seite und Karte: Kalenderfelder,
     Tabellenkoepfe, inaktive Reiter. */
  --flaeche-gedaempft: #ECEEF0;

  --bg-card: var(--card-bg);
  --bg-primary: var(--card-bg);
  --input-bg: var(--card-bg);

  /* Diese beiden hat erst der Test test/design-tokens.test.js gefunden. Sie
     stehen ohne Rueckfallwert im Code — `var(--bg)` ganz ohne Komma. Der
     Browser hat dort also gar nichts gesetzt: In der Aufgaben-Ansicht
     (public/views/tasks.js, neun Stellen) waren die Felder durchsichtig statt
     abgesetzt, in beiden Ansichten. */
  --bg: var(--card-bg);
  --text: var(--text-primary);
  --bg-secondary: var(--flaeche-gedaempft);
  --surface-secondary: var(--flaeche-gedaempft);
  --bg-subtle: var(--hover-bg);
  --accent: var(--primary);
  --text-tertiary: var(--text-muted);
  --label-color: var(--text-secondary);
  --phase-pill-bg: var(--primary-light);
  --phase-pill-color: var(--primary);
  --phase-pill-shadow: transparent;
}

.theme-dark {
  --flaeche-gedaempft: #1F242A;
}


/* Dark Mode overrides moved to end of file for cascade priority */

.theme-dark .column-count {
  background: rgba(30,41,59,0.85);
  color: var(--text-secondary);
}

.theme-dark .data-table th {
  background: rgba(255,255,255,0.02) !important;
}

.theme-dark .data-table tbody tr:hover {
  background: rgba(47,111,208,0.06) !important;
}

.theme-dark .data-table tbody tr.selected {
  background: rgba(47,111,208,0.12) !important;
}

.theme-dark .board-column {
  background: rgba(255,255,255,0.03) !important;
}

.theme-dark .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary);
}
.theme-dark .btn-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
}

.theme-dark .btn-icon:hover {
  background: rgba(255,255,255,0.06) !important;
}

.theme-dark .search-input,
.theme-dark .data-table-search,
.theme-dark .form-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.theme-dark .search-input:focus,
.theme-dark .data-table-search:focus,
.theme-dark .form-input:focus {
  background: var(--card-bg) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(47,111,208,0.2) !important;
}

html.theme-dark body {
  background: var(--page-bg) !important;
}

.theme-dark .main-wrapper {
  background: var(--page-bg) !important;
}

.theme-dark .top-bar {
  background: rgba(11,15,26,0.8) !important;
  border-bottom-color: var(--separator);
}

.theme-dark .modal-backdrop {
  background: rgba(0,0,0,0.6);
}

.theme-dark .deal-slideover-backdrop {
  background: rgba(0,0,0,0.5);
}

.theme-dark .phase-filter-btn {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-secondary) !important;
}
.theme-dark .phase-filter-btn:hover {
  background: rgba(255,255,255,0.1) !important;
}

.theme-dark .pagination-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.theme-dark .pagination-btn:hover {
  background: rgba(255,255,255,0.1);
}

.theme-dark .view-toggle {
  background: rgba(255,255,255,0.06) !important;
}
.theme-dark .view-toggle-btn.active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.theme-dark .badge-gray {
  background: rgba(255,255,255,0.06) !important;
}

.theme-dark .so-note-box {
  background: rgba(255,255,255,0.04) !important;
}

.theme-dark .toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

.theme-dark .settings-card-icon {
  background: var(--primary-light);
}

.theme-dark .th-resizer {
  background: rgba(255,255,255,0.1);
}
.theme-dark .th-resizer:hover {
  background: rgba(255,255,255,0.2);
}

.theme-dark .inline-add-btn {
  color: var(--text-muted);
}
.theme-dark .inline-add-btn:hover {
  color: var(--text-secondary);
}

.theme-dark .label-toggle {
  border-color: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}

.theme-dark .modal-close {
  background: rgba(255,255,255,0.06);
}
.theme-dark .modal-close:hover {
  background: rgba(255,255,255,0.1);
}

.theme-dark .modal-header,
.theme-dark .modal-footer {
  border-color: var(--separator);
}

.theme-dark .data-table td {
  border-bottom-color: rgba(255,255,255,0.04);
}

.theme-dark .sidebar-active-text {
  color: #8FBAF0;
}

.theme-dark .nav-item.active {
  color: #E0E7FF;
}

.theme-dark .so-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Scrollbar dark */
.theme-dark .column-cards::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
}
.theme-dark .column-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}


/* ─── Desktop Layout Base (from style.css migration) ─────────────────────── */

.sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  border-right: 1px solid var(--sidebar-border);
  overflow: hidden;
}

.main-wrapper {
  margin-left: 260px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--page-bg);
}

.page-content {
  flex: 1;
  padding: 24px;
}

/* ─── Buttons Base (from style.css migration) ────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font);
  line-height: 1.35;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  white-space: nowrap;
  user-select: none;
  position: relative;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: scale(1.02);
}
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: rgba(0,0,0,0.04);
  color: var(--text-primary);
  border: none;
}
.btn-secondary:hover { background: rgba(0,0,0,0.08); }
.btn-secondary:active { transform: scale(0.98); }

.btn-danger {
  background: var(--danger-light);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(255,59,48,0.14); }

.btn-sm {
  padding: 5px 10px;
  font-size: 0.75rem;
}

.btn-icon {
  padding: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.btn-icon:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); }

/* ─── Slide-Over Base (from style.css migration) ─────────────────────────── */

.slideover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slideover-backdrop.visible { opacity: 1; }

.slideover-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 620px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px);
  background: #FBFBFD;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 120px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08);
  z-index: 210;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease;
  opacity: 0;
}
.slideover-panel.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.slideover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
  background: var(--card-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.slideover-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.so-header-actions { display: flex; align-items: center; gap: 8px; }

.so-btn-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--apple-green);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.so-btn-call:hover { background: #2DB84D; transform: scale(1.03); }

.so-btn-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.05);
  color: var(--text-primary);
  border: none;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.so-btn-email:hover { background: rgba(0,0,0,0.09); }

.so-btn-more {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.2rem;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.so-btn-more:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }

.slideover-close {
  background: rgba(0,0,0,0.04);
  border: none;
  font-size: 1rem;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s ease;
}
.slideover-close:hover { background: rgba(0,0,0,0.08); color: var(--text-primary); }

.slideover-tabs {
  display: flex;
  padding: 10px 22px;
  flex-shrink: 0;
  background: var(--card-bg);
  border-bottom: 1px solid var(--separator);
}

.slideover-tabs-inner {
  display: flex;
  width: 100%;
  background: rgba(118,118,128,0.12);
  border-radius: 9px;
  padding: 2px;
}

.slideover-tab {
  flex: 1;
  padding: 10px 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  text-align: center;
}
.slideover-tab:hover { color: var(--text-primary); }
.slideover-tab.active {
  color: white;
  background: var(--apple-blue);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,122,255,0.3);
}

.slideover-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

.slideover-tab-content {
  min-height: calc(100vh - 280px);
}

.slideover-section {
  margin-bottom: 6px;
  padding: 16px 18px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.slideover-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.slideover-section-header:hover .slideover-section-title { color: var(--text-primary); }

.slideover-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.slideover-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slideover-section-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  flex-shrink: 0;
}
.slideover-section.collapsed .slideover-section-chevron {
  transform: rotate(180deg);
}

.slideover-section-body {
  margin-top: 14px;
  overflow: hidden;
  max-height: 1200px;
  transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, margin 0.35s ease;
  opacity: 1;
}
.slideover-section.collapsed .slideover-section-body {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.slideover-footer {
  padding: 18px 22px;
  border-top: 1px solid var(--separator);
  flex-shrink: 0;
  background: var(--card-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ─── KPI Cards Base (from style.css migration) ──────────────────────────── */

.dash-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}

.dash-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--text-muted, #8E8E93);
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.dash-info-btn:hover {
  background: rgba(0,122,255,0.08);
  border-color: rgba(0,122,255,0.25);
  color: var(--apple-blue, #007AFF);
}

.dash-kpi-value-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.dash-kpi-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.dash-kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.015);
}

.dash-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.dash-kpi-info { flex: 1; }

.dash-kpi-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.dash-kpi-label {
  font-size: 0.725rem;
  color: var(--text-secondary);
  margin-top: 2px;
  font-weight: 500;
}

.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

/* ─── Page Header Base (from style.css migration) ────────────────────────── */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

.page-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── View Toggle Base (from style.css migration) ────────────────────────── */

.view-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.05);
  border-radius: 9px;
  padding: 2px;
}

.view-toggle-btn {
  padding: 6px 14px;
  font-size: 0.775rem;
  font-weight: 500;
  font-family: var(--font);
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.view-toggle-btn.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
  font-weight: 600;
}

/* ─── Dashboard Cards Base (from style.css migration) ────────────────────── */

.dash-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.dash-card-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.dash-card-body { padding: 14px 18px 18px; }

.dash-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  padding: 24px 0;
}

/* ─── V2: Refined Component Styles ────────────────────────────────────────── */

/* Smoother sidebar backdrop */
.sidebar {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  transition: width var(--duration-slow) var(--ease-out),
              min-width var(--duration-slow) var(--ease-out);
}

/* Nav items: smoother interaction */
.nav-item,
.nav-pipeline {
  transition: all var(--duration-normal) var(--ease-out);
}

/* Buttons: refined press */
.btn {
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47,111,208,0.25);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* Cards: subtle lift */
.deal-card:hover,
.settings-card:hover,
.pipeline-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Inputs: better focus ring */
.form-input:focus,
.search-input:focus,
.data-table-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47,111,208,0.15);
}

/* Data cells: tabular nums for alignment */
.data-table td,
.dash-kpi-value,
.card-value,
.pagination-info,
.column-count {
  font-variant-numeric: tabular-nums;
}

/* Modal: shadow handled by master override at end of file */

/* Top bar: cleaner feel */
.top-bar {
  min-height: 48px;
  padding: 8px 24px;
}


/* ─── Dark Mode Toggle Button ─────────────────────────────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: pointer;
  color: var(--sidebar-text);
  transition: all var(--duration-fast) var(--ease-out);
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: var(--sidebar-text-hover);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}


/* ─── Phase 2: View Transitions + Stagger Animations ────────────────────── */

/* View enter: fade + slide up */
@keyframes viewEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app.view-entering {
  animation: viewEnter 250ms var(--ease-out) both;
}

/* Stagger children: each child fades in with delay */
@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-item {
  opacity: 0;
  animation: staggerIn 300ms var(--ease-out) both;
}

/* Reduced Motion: respect system preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #app.view-entering {
    animation: none;
    opacity: 1;
  }

  .stagger-item {
    animation: none;
    opacity: 1;
  }
}


/* ─── Phase 3: Toast Notifications ──────────────────────────────────────── */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-width: 280px;
  max-width: 420px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  color: var(--text-primary);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: all 300ms cubic-bezier(0.2, 0, 0, 1);
}

.toast-visible {
  transform: translateX(0);
  opacity: 1;
}

.toast-exit {
  transform: translateX(120%);
  opacity: 0;
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
}

.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--primary); }

.toast-message {
  flex: 1;
  line-height: 1.4;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 150ms;
}
.toast-close:hover {
  color: var(--text-primary);
}

.theme-dark .toast {
  background: #191D21;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}


/* ─── Phase 4: Collapsible Sidebar ──────────────────────────────────────── */

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  cursor: pointer;
  color: var(--sidebar-text);
  transition: all 150ms ease;
  padding: 0;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--sidebar-text-hover);
}
.sidebar-collapse-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

/* Collapsed state */
.sidebar.collapsed {
  width: 60px !important;
  min-width: 60px !important;
}

.sidebar.collapsed .sidebar-header {
  padding: 16px 0;
  justify-content: center;
}

/* Hide ALL text in collapsed sidebar */
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-pipeline-name,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed #sidebar-user-name,
.sidebar.collapsed .sidebar-logout-btn {
  display: none !important;
}

/* Nav items: hide text nodes via font-size trick, keep icons */
.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-pipeline,
.sidebar.collapsed .nav-item-sub,
.sidebar.collapsed .nav-item-settings {
  font-size: 0 !important;
  justify-content: center !important;
  padding: 10px 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}

.sidebar.collapsed .nav-item .nav-icon,
.sidebar.collapsed .nav-pipeline .nav-icon {
  margin-right: 0 !important;
  width: 20px !important;
  height: 20px !important;
}

/* Hide section titles + settings toggle completely */
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-section-toggle {
  display: none !important;
}

/* Hide settings sub-items in collapsed mode */
.sidebar.collapsed #sidebar-settings-items {
  display: none !important;
}

/* Footer: stack actions vertically */
.sidebar.collapsed .sidebar-footer {
  padding: 10px 6px !important;
}

.sidebar.collapsed .sidebar-user {
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

.sidebar.collapsed .sidebar-user-info {
  display: none !important;
}

.sidebar.collapsed .sidebar-user-actions {
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.sidebar.collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-nav {
  padding: 0 6px;
}

.sidebar.collapsed .sidebar-section {
  padding: 0;
}

/* Logo: just icon, no text */
.sidebar.collapsed .sidebar-logo a span {
  display: none !important;
}

/* Adjust main content when sidebar is collapsed */
.sidebar.collapsed + .main-content,
.sidebar.collapsed ~ .main-content {
  margin-left: 60px;
}

/* Tooltip on hover for collapsed items */
.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-pipeline {
  position: relative;
}

.sidebar.collapsed .nav-item:hover::after,
.sidebar.collapsed .nav-pipeline:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #14181C;
  color: #E6E9EC;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
}

.theme-dark .sidebar.collapsed .nav-item:hover::after,
.theme-dark .sidebar.collapsed .nav-pipeline:hover::after {
  background: #191D21;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}


/* ─── Modal: positioning handled by master override at end of file ────── */


/* ─── Phase 5b: Skeleton Loading ────────────────────────────────────────── */

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.skeleton-cell {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--border-light) 50%, var(--border) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

.skeleton-cell-sm { width: 60px; }
.skeleton-cell-md { width: 120px; }
.skeleton-cell-lg { width: 200px; flex: 1; }
.skeleton-cell-xl { width: 280px; }

.theme-dark .skeleton-cell {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 800px 100%;
}


/* ─── Phase 5c: Sticky Table Headers ────────────────────────────────────── */

.data-table-wrapper {
  position: relative;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card-bg);
}

.theme-dark .data-table thead th {
  background: var(--card-bg);
}


/* ─── Phase 6: Accessibility ────────────────────────────────────────────── */

/* Focus-visible: only show focus ring on keyboard navigation */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Better focus ring for buttons */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(47,111,208,0.15);
}

/* Focus ring for form elements */
.form-input:focus-visible,
.search-input:focus-visible,
.data-table-search:focus-visible,
select.form-input:focus-visible,
textarea.form-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47,111,208,0.15);
}

/* Focus ring for nav items */
.nav-item:focus-visible,
.nav-pipeline:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Focus ring for cards */
.deal-card:focus-visible,
.settings-card:focus-visible,
.contact-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  z-index: 100000;
  transition: top 200ms ease;
  text-decoration: none;
}

.skip-to-content:focus {
  top: 16px;
}

/* Sortable column indicator */
.data-table th[aria-sort] {
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   WOW PHASE: Dramatic Visual Overhaul
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Gradient KPI Cards ─────────────────────────────────────────────────── */

.dash-kpi-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dash-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  border-radius: inherit;
}

.dash-kpi-card:hover::before {
  opacity: 1;
}

.dash-kpi-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(47,111,208,0.1) !important;
}

/* Gradient background per KPI card */
.dash-kpi-card:nth-child(1) {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #C7D2FE 100%) !important;
  border-color: rgba(47,111,208,0.15) !important;
}
.dash-kpi-card:nth-child(1)::before {
  background: linear-gradient(135deg, #2F6FD0 0%, #818CF8 100%);
}
.dash-kpi-card:nth-child(1):hover {
  box-shadow: 0 20px 40px rgba(47,111,208,0.2), 0 0 60px rgba(47,111,208,0.1) !important;
}
.dash-kpi-card:nth-child(1):hover * { color: white !important; }
.dash-kpi-card:nth-child(1):hover .dash-kpi-icon { background: rgba(255,255,255,0.2) !important; }

.dash-kpi-card:nth-child(2) {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%) !important;
  border-color: rgba(46,139,87,0.15) !important;
}
.dash-kpi-card:nth-child(2)::before {
  background: linear-gradient(135deg, #2E8B57 0%, #26734A 100%);
}
.dash-kpi-card:nth-child(2):hover {
  box-shadow: 0 20px 40px rgba(46,139,87,0.2), 0 0 60px rgba(46,139,87,0.1) !important;
}
.dash-kpi-card:nth-child(2):hover * { color: white !important; }
.dash-kpi-card:nth-child(2):hover .dash-kpi-icon { background: rgba(255,255,255,0.2) !important; }

.dash-kpi-card:nth-child(3) {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%) !important;
  border-color: rgba(184,115,14,0.15) !important;
}
.dash-kpi-card:nth-child(3)::before {
  background: linear-gradient(135deg, #B8730E 0%, #965E0B 100%);
}
.dash-kpi-card:nth-child(3):hover {
  box-shadow: 0 20px 40px rgba(184,115,14,0.2), 0 0 60px rgba(184,115,14,0.1) !important;
}
.dash-kpi-card:nth-child(3):hover * { color: white !important; }
.dash-kpi-card:nth-child(3):hover .dash-kpi-icon { background: rgba(255,255,255,0.2) !important; }

.dash-kpi-card:nth-child(4) {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 50%, #FECDD3 100%) !important;
  border-color: rgba(200,55,45,0.15) !important;
}
.dash-kpi-card:nth-child(4)::before {
  background: linear-gradient(135deg, #C8372D 0%, #A82D24 100%);
}
.dash-kpi-card:nth-child(4):hover {
  box-shadow: 0 20px 40px rgba(200,55,45,0.2), 0 0 60px rgba(200,55,45,0.1) !important;
}
.dash-kpi-card:nth-child(4):hover * { color: white !important; }
.dash-kpi-card:nth-child(4):hover .dash-kpi-icon { background: rgba(255,255,255,0.2) !important; }

.dash-kpi-card:nth-child(5) {
  background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 50%, #99F6E4 100%) !important;
  border-color: rgba(6,182,212,0.15) !important;
}
.dash-kpi-card:nth-child(5)::before {
  background: linear-gradient(135deg, #5C9AE8 0%, #0891B2 100%);
}
.dash-kpi-card:nth-child(5):hover {
  box-shadow: 0 20px 40px rgba(6,182,212,0.2), 0 0 60px rgba(6,182,212,0.1) !important;
}
.dash-kpi-card:nth-child(5):hover * { color: white !important; }
.dash-kpi-card:nth-child(5):hover .dash-kpi-icon { background: rgba(255,255,255,0.2) !important; }

/* Dark mode KPI cards — subtle tinted backgrounds */
.theme-dark .dash-kpi-card:nth-child(1) {
  background: rgba(47,111,208,0.08) !important;
  border-color: rgba(47,111,208,0.15) !important;
}
.theme-dark .dash-kpi-card:nth-child(2) {
  background: rgba(46,139,87,0.08) !important;
  border-color: rgba(46,139,87,0.15) !important;
}
.theme-dark .dash-kpi-card:nth-child(3) {
  background: rgba(184,115,14,0.08) !important;
  border-color: rgba(184,115,14,0.15) !important;
}
.theme-dark .dash-kpi-card:nth-child(4) {
  background: rgba(200,55,45,0.08) !important;
  border-color: rgba(200,55,45,0.15) !important;
}
.theme-dark .dash-kpi-card:nth-child(5) {
  background: rgba(6,182,212,0.08) !important;
  border-color: rgba(6,182,212,0.15) !important;
}


/* ─── Sidebar Glow Effects ───────────────────────────────────────────────── */

.sidebar {
  background: linear-gradient(180deg, #14181C 0%, #0B1120 60%, #0D0F1A 100%) !important;
}

.nav-item.active,
.nav-pipeline.active {
  position: relative;
  background: rgba(47,111,208,0.15) !important;
  box-shadow: 0 0 20px rgba(47,111,208,0.15), inset 0 0 20px rgba(47,111,208,0.05);
}

/* Glowing left border on active */
.nav-item.active::before,
.nav-pipeline.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  background: linear-gradient(180deg, #2F6FD0, #2A7F8F);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(47,111,208,0.6), 0 0 30px rgba(47,111,208,0.3);
}

/* Subtle hover glow on nav items */
.nav-item:hover,
.nav-pipeline:hover {
  background: rgba(47,111,208,0.08) !important;
  box-shadow: 0 0 15px rgba(47,111,208,0.08);
}

/* Sidebar logo glow */
.sidebar-logo svg rect:first-child {
  filter: drop-shadow(0 0 15px rgba(47,111,208,0.4));
}


/* ─── Dashboard Cards: Glass Effect ──────────────────────────────────────── */

.dash-card {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04) !important;
  border-color: rgba(47,111,208,0.15) !important;
}

.theme-dark .dash-card {
  background: rgba(30,41,59,0.6) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1) !important;
}

.theme-dark .dash-card:hover {
  border-color: rgba(47,111,208,0.25) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 30px rgba(47,111,208,0.08) !important;
}


/* ─── Chart Bars: Gradient ───────────────────────────────────────────────── */

.dash-chart-bar {
  background: linear-gradient(180deg, #2F6FD0 0%, #5C9AE8 50%, #2A7F8F 100%) !important;
  border-radius: 6px 6px 2px 2px !important;
  box-shadow: 0 -4px 12px rgba(47,111,208,0.2);
  transition: all 0.3s ease !important;
}

.dash-chart-bar:hover {
  box-shadow: 0 -8px 24px rgba(47,111,208,0.35) !important;
  filter: brightness(1.1);
}


/* ─── Source Bars: Animated Fill ─────────────────────────────────────────── */

.dash-source-bar {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: barGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes barGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}


/* ─── Progress Bar Segments: Glow ────────────────────────────────────────── */

.dash-progress-seg {
  transition: all 0.3s ease;
  position: relative;
}

.dash-progress-seg:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 12px currentColor;
}


/* ─── Top Bar: Glass Effect ──────────────────────────────────────────────── */

.top-bar {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

.theme-dark .top-bar {
  background: rgba(11,15,26,0.7) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}


/* ─── Search Input: Glow on Focus ────────────────────────────────────────── */

.search-input:focus,
.data-table-search:focus {
  box-shadow: 0 0 0 3px rgba(47,111,208,0.15), 0 0 20px rgba(47,111,208,0.08) !important;
}


/* ─── Buttons: Enhanced Primary ──────────────────────────────────────────── */

.btn-primary {
  background: linear-gradient(135deg, #2F6FD0 0%, #5C9AE8 100%) !important;
  box-shadow: 0 4px 15px rgba(47,111,208,0.3) !important;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(47,111,208,0.4), 0 0 40px rgba(47,111,208,0.1) !important;
}


/* ─── Deal Cards: Hover Glow ─────────────────────────────────────────────── */

.deal-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(47,111,208,0.1) !important;
  border-color: rgba(47,111,208,0.15) !important;
}

.theme-dark .deal-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(47,111,208,0.1) !important;
}


/* ─── Contact Cards: Glass + Hover ───────────────────────────────────────── */

.contact-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid var(--border);
}

.contact-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
  border-color: rgba(47,111,208,0.15) !important;
}


/* ─── Settings Cards: Glass + Gradient Icon ──────────────────────────────── */

.settings-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.settings-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(47,111,208,0.08) !important;
}

.settings-card-icon {
  background: linear-gradient(135deg, rgba(47,111,208,0.1) 0%, rgba(6,182,212,0.1) 100%) !important;
}


/* ─── Modal: decorative border only (positioning at end of file) ─────────── */


/* ─── Board Columns: Subtle Gradient ─────────────────────────────────────── */

.board-column {
  background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-radius: var(--radius-md) !important;
}

.theme-dark .board-column {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}


/* ─── Page Title: Gradient Text ──────────────────────────────────────────── */

.page-title {
  background: linear-gradient(135deg, #14181C 0%, #3A434C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.theme-dark .page-title {
  background: linear-gradient(135deg, #E6E9EC 0%, #8B949D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ─── Command Palette ────────────────────────────────────────────────────── */

.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  animation: cmdFadeIn 0.15s ease both;
}

@keyframes cmdFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cmd-palette {
  width: 560px;
  max-width: 90vw;
  background: var(--card-bg);
  border: 1px solid rgba(47,111,208,0.15);
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.2),
    0 0 0 1px rgba(0,0,0,0.05),
    0 0 60px rgba(47,111,208,0.08);
  overflow: hidden;
  animation: cmdSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cmdSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.cmd-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.cmd-palette-input-wrap svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cmd-palette-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
}

.cmd-palette-input::placeholder {
  color: var(--text-muted);
}

.cmd-palette-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
}

.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary);
}

.cmd-palette-item:hover,
.cmd-palette-item.active {
  background: var(--primary-light);
}

.cmd-palette-item.active {
  background: rgba(47,111,208,0.12);
}

.cmd-palette-item svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cmd-palette-item.active svg {
  color: var(--primary);
}

.cmd-palette-item-label {
  flex: 1;
  font-size: 0.9rem;
}

.cmd-palette-item-shortcut {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
}

.cmd-palette-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cmd-palette-footer kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.7rem;
  margin: 0 2px;
}

.theme-dark .cmd-palette {
  background: #191D21;
  border-color: rgba(47,111,208,0.2);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(47,111,208,0.1);
}

/* ─── Search hint in topbar ──────────────────────────────────────────────── */

.search-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: inherit;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.theme-dark .search-kbd-hint {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}


/* ─── Welcome Banner ─────────────────────────────────────────────────────── */

.dash-welcome-banner {
  position: relative;
  overflow: hidden;
  padding: 32px 36px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2F6FD0 0%, #5C9AE8 40%, #2A7F8F 70%, #B0417A 100%);
  margin-bottom: 24px;
  animation: bannerAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bannerAppear {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dash-welcome-content {
  position: relative;
  z-index: 2;
}

.dash-welcome-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.dash-welcome-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  font-weight: 400;
}

.dash-welcome-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.4;
  animation: welcomeOrbFloat 12s ease-in-out infinite alternate;
}

.dash-welcome-orb-1 {
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.3);
  top: -60px; right: 10%;
  animation-delay: 0s;
}
.dash-welcome-orb-2 {
  width: 150px; height: 150px;
  background: rgba(176,65,122,0.4);
  bottom: -40px; right: 30%;
  animation-delay: -4s;
}
.dash-welcome-orb-3 {
  width: 120px; height: 120px;
  background: rgba(47,111,208,0.5);
  top: -30px; left: 60%;
  animation-delay: -8s;
}

@keyframes welcomeOrbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.1); }
  100% { transform: translate(-10px, 10px) scale(0.95); }
}

/* Banner pattern overlay (grid lines) */
.dash-welcome-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}


/* ─── Border Beam Effect on KPI Cards ────────────────────────────────────── */

@keyframes borderBeam {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.dash-kpi-card {
  position: relative;
}

.dash-kpi-card > * {
  position: relative;
  z-index: 1;
}


/* ─── Animated Page Background ───────────────────────────────────────────── */

.page-content {
  position: relative;
}

.page-content::before {
  content: '';
  position: fixed;
  top: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
  clip-path: inset(0);
  background: radial-gradient(circle, rgba(47,111,208,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: bgGlow 15s ease-in-out infinite alternate;
}

@keyframes bgGlow {
  0% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(-100px, 100px); opacity: 0.8; }
  100% { transform: translate(50px, -50px); opacity: 0.5; }
}

.theme-dark .page-content::before {
  background: radial-gradient(circle, rgba(47,111,208,0.06) 0%, transparent 70%);
}


/* ─── Kanban Deal Cards: Enhanced ────────────────────────────────────────── */

.deal-card {
  position: relative;
  border-left: 3px solid var(--primary) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.deal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(135deg, rgba(47,111,208,0.05) 0%, transparent 60%);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.deal-card:hover::after {
  opacity: 1;
}


/* ─── Notification Bell Button ────────────────────────────────────────────── */

.notif-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  padding: 0;
}

.notif-bell-btn:hover {
  background: rgba(47,111,208,0.08);
  color: var(--primary);
  transform: scale(1.05);
}

.notif-bell-btn:active {
  transform: scale(0.95);
}

.theme-dark .notif-bell-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}

.theme-dark .notif-bell-btn:hover {
  background: rgba(47,111,208,0.15);
  color: var(--primary);
}

/* Notification Pulse */
@keyframes notifPulse {
  0% { box-shadow: 0 0 0 0 rgba(200,55,45,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(200,55,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,55,45,0); }
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #C8372D;
  border-radius: 100px;
  border: 2px solid var(--card-bg);
  animation: notifPulse 2s ease-in-out infinite;
  font-size: 0.6rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  75% { transform: rotate(2deg); }
}


/* ─── Scrollbar Styling ──────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}


/* ─── Period/Filter Buttons: Enhanced ────────────────────────────────────── */

.dash-period-btn {
  transition: all 0.2s ease !important;
}

.dash-period-btn.active {
  background: linear-gradient(135deg, #2F6FD0, #5C9AE8) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(47,111,208,0.3) !important;
}

.dash-period-btn:not(.active):hover {
  background: rgba(47,111,208,0.08) !important;
  color: var(--primary) !important;
}


/* ─── Loading Spinner ────────────────────────────────────────────────────── */

.dash-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dash-loading::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(47,111,208,0.2);
  border-top-color: #2F6FD0;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ─── Sidebar Avatar ─────────────────────────────────────────────────────── */

.sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2F6FD0, #2A7F8F);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px rgba(47,111,208,0.3), 0 2px 8px rgba(47,111,208,0.2);
  animation: avatarGlow 3s ease-in-out infinite alternate;
}

@keyframes avatarGlow {
  0% { box-shadow: 0 0 0 2px rgba(47,111,208,0.3), 0 2px 8px rgba(47,111,208,0.2); }
  100% { box-shadow: 0 0 0 2px rgba(168,85,247,0.4), 0 2px 12px rgba(168,85,247,0.3); }
}

.sidebar.collapsed .sidebar-avatar {
  width: 30px;
  height: 30px;
  font-size: 0.65rem;
}


/* ─── Table Rows: Enhanced ───────────────────────────────────────────────── */

.data-table tbody tr {
  transition: all 0.15s ease !important;
}

.data-table tbody tr:hover {
  background: rgba(47,111,208,0.04) !important;
}

.data-table tbody tr:hover td:first-child {
  color: var(--primary);
}

.theme-dark .data-table tbody tr:hover {
  background: rgba(47,111,208,0.08) !important;
}

/* Zebra stripes */
.data-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.01);
}

.theme-dark .data-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

/* Table wrapper shadow */
.data-table-wrapper {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03) !important;
}

.theme-dark .data-table-wrapper {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04) !important;
}


/* ─── Slide-Over Panel: Glassmorphism ────────────────────────────────────── */

.deal-slideover {
  background: var(--card-bg) !important;
  box-shadow: -20px 0 60px rgba(0,0,0,0.15), -4px 0 20px rgba(0,0,0,0.05) !important;
  border-left: 1px solid var(--border) !important;
}

.theme-dark .deal-slideover {
  box-shadow: -20px 0 60px rgba(0,0,0,0.4), -4px 0 20px rgba(0,0,0,0.2) !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}

.deal-slideover-backdrop {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Slide-over header gradient */
.so-header {
  background: linear-gradient(135deg, rgba(47,111,208,0.05) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--border) !important;
}

.theme-dark .so-header {
  background: linear-gradient(135deg, rgba(47,111,208,0.1) 0%, transparent 100%) !important;
}

/* Tabs in slide-over */
.so-tab {
  transition: all 0.2s ease !important;
}

.so-tab.active {
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
}

.so-tab:not(.active):hover {
  color: var(--text-primary) !important;
  background: rgba(47,111,208,0.04);
}


/* ─── Settings Cards: Enhanced Grid ──────────────────────────────────────── */

.settings-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}

.settings-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.settings-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2F6FD0, #2A7F8F, #B0417A);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.settings-card:hover::before {
  opacity: 1;
}

.settings-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  margin-bottom: 12px !important;
  background: linear-gradient(135deg, rgba(47,111,208,0.1), rgba(168,85,247,0.1)) !important;
}

.theme-dark .settings-card {
  border-color: rgba(255,255,255,0.06) !important;
}

.theme-dark .settings-card:hover {
  border-color: rgba(47,111,208,0.2) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(47,111,208,0.08) !important;
}


/* ─── Contact Cards: Enhanced ────────────────────────────────────────────── */

.contact-card {
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2F6FD0, #5C9AE8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-card:hover::before {
  opacity: 1;
}


/* ─── Board Column Header: Enhanced ──────────────────────────────────────── */

.column-header {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  position: relative;
  overflow: hidden;
}

.column-count {
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  min-width: 24px;
  text-align: center;
  border-radius: 6px !important;
}


/* ─── View Toggle Buttons: Enhanced ──────────────────────────────────────── */

.view-toggle {
  border-radius: 10px !important;
  padding: 3px !important;
  background: rgba(0,0,0,0.04) !important;
}

.view-toggle-btn {
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.view-toggle-btn.active {
  background: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03) !important;
}

.theme-dark .view-toggle {
  background: rgba(255,255,255,0.06) !important;
}

.theme-dark .view-toggle-btn.active {
  background: rgba(255,255,255,0.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}


/* ─── Header Avatar ──────────────────────────────────────────────────────── */

#header-user {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2F6FD0, #2A7F8F);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ─── Badges: Enhanced ───────────────────────────────────────────────────── */

.badge,
.card-label {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  border-radius: 6px !important;
}

.badge-gray {
  background: rgba(0,0,0,0.05) !important;
}

.theme-dark .badge-gray {
  background: rgba(255,255,255,0.08) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   WOW PHASE 4: Micro-Interactions & Premium Polish
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Ripple Effect on Buttons ──────────────────────────────────────────── */

.btn-primary,
.btn-secondary,
.dash-period-btn,
.view-toggle-btn,
.empty-state-btn {
  position: relative;
  overflow: hidden;
}

/* Bell button: NO overflow:hidden — notification panel must be visible */
.notif-bell-btn {
  position: relative;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes rippleAnim {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}


/* ─── Card Shine Sweep — REMOVED (Dark Mode artifact) ──────────────────── */


/* ─── Enhanced Modal: decorative only (positioning at end of file) ──────── */

.modal-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2F6FD0 0%, #5C9AE8 40%, #2A7F8F 70%, #B0417A 100%);
  z-index: 10;
}


/* ─── Progress Bar Shimmer ──────────────────────────────────────────────── */

.dash-progress-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 6px !important;
  height: 10px !important;
}

.dash-progress-seg {
  height: 100%;
}

.dash-progress-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  animation: progressShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes progressShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}


/* ─── Pulse Dot on Active Sidebar Items ─────────────────────────────────── */

.nav-item.active::after,
.nav-pipeline.active::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #2F6FD0;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(47,111,208,0.8);
  animation: sidebarPulse 2s ease-in-out infinite;
}

@keyframes sidebarPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(47,111,208,0.8); }
  50% { opacity: 0.5; box-shadow: 0 0 16px rgba(47,111,208,0.4); }
}


/* ─── Floating Gradient Border on Focused Inputs ────────────────────────── */

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #2F6FD0 !important;
  box-shadow:
    0 0 0 3px rgba(47,111,208,0.12),
    0 0 20px rgba(47,111,208,0.06) !important;
  transition: all 0.2s ease !important;
}

.theme-dark input:focus,
.theme-dark select:focus,
.theme-dark textarea:focus {
  border-color: #818CF8 !important;
  box-shadow:
    0 0 0 3px rgba(47,111,208,0.2),
    0 0 20px rgba(47,111,208,0.1) !important;
}


/* ─── Animated Gradient Text for Page Titles ────────────────────────────── */

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.page-title {
  background: linear-gradient(135deg, #14181C, #2F6FD0, #2A7F8F, #14181C) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 8s ease infinite;
}

.theme-dark .page-title {
  background: linear-gradient(135deg, #E6E9EC, #818CF8, #67E8F9, #E6E9EC) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 8s ease infinite;
}


/* ─── Hover Lift Micro-Interactions ─────────────────────────────────────── */

.btn-secondary {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
}


/* ─── Sidebar Section Title: Subtle Glow ────────────────────────────────── */

.nav-section-title {
  text-transform: uppercase !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  color: rgba(148,163,184,0.6) !important;
  font-weight: 600 !important;
  padding: 8px 16px 4px !important;
}


/* ─── Tooltip Enhancement ───────────────────────────────────────────────── */

.dash-chart-tooltip {
  background: #14181C !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.theme-dark .dash-chart-tooltip {
  background: #3A434C !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08) !important;
}


/* ─── Legend Items: Hover ───────────────────────────────────────────────── */

.dash-legend-item {
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  cursor: default;
}

.dash-legend-item:hover {
  background: rgba(47,111,208,0.06);
}

.dash-legend-dot {
  transition: transform 0.15s ease;
}

.dash-legend-item:hover .dash-legend-dot {
  transform: scale(1.3);
}


/* ─── Source Row Hover ──────────────────────────────────────────────────── */

.dash-source-row {
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.dash-source-row:hover {
  background: rgba(47,111,208,0.04);
}

.theme-dark .dash-source-row:hover {
  background: rgba(47,111,208,0.08);
}


/* ─── City Row Hover ────────────────────────────────────────────────────── */

.dash-city-row {
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.dash-city-row:hover {
  background: rgba(46,139,87,0.04);
}


/* ─── Board Column Hover ────────────────────────────────────────────────── */

.board-column {
  transition: all 0.3s ease !important;
}

.board-column:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  border-color: rgba(47,111,208,0.1) !important;
}

.theme-dark .board-column:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  border-color: rgba(47,111,208,0.15) !important;
}


/* ─── Column Header: Phase Color Indicator ──────────────────────────────── */

.column-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--phase-color, var(--primary));
  border-radius: 2px;
  opacity: 0.5;
}


/* ─── Reduced Motion: Disable all fancy animations ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ripple-effect,
  .dash-kpi-card::after,
  .dash-card::after,
  .settings-card::after,
  .contact-card::after,
  .dash-progress-wrap::after,
  .nav-item.active::after,
  .nav-pipeline.active::after {
    animation: none !important;
  }
  .page-title {
    animation: none !important;
  }
  .cardShine,
  .progressShimmer,
  .sidebarPulse,
  .rippleAnim {
    animation: none !important;
  }
}


/* ─── Phase 7: Empty States ─────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  min-height: 300px;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  color: var(--text-muted);
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.empty-state-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  max-width: 360px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}

.empty-state-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47,111,208,0.25);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   WOW PHASE 5: Skeleton Loading, Table Headers, Notification Panel,
   Glassmorphism Footer, Kanban Drag, Breadcrumbs
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Skeleton Loading Shimmer ──────────────────────────────────────────── */

.skeleton-cell {
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.04) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  height: 14px;
}

.skeleton-cell-sm { width: 60px; }
.skeleton-cell-md { width: 100px; }
.skeleton-cell-lg { width: 160px; }
.skeleton-cell-xl { width: 220px; }

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.theme-dark .skeleton-cell {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
}

/* Skeleton row for dashboard */
.skeleton-kpi {
  height: 80px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg,
    rgba(0,0,0,0.03) 25%,
    rgba(0,0,0,0.06) 50%,
    rgba(0,0,0,0.03) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

.theme-dark .skeleton-kpi {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
}


/* ─── Enhanced Table Header ─────────────────────────────────────────────── */

.data-table thead th {
  background: linear-gradient(180deg, #F5F6F7 0%, #E6E9EC 100%) !important;
  border-bottom: 2px solid rgba(47,111,208,0.1) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background 0.15s ease;
}

.data-table thead th:hover {
  background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%) !important;
  color: var(--primary) !important;
}

.data-table thead th.sort-asc,
.data-table thead th.sort-desc {
  background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%) !important;
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

.theme-dark .data-table thead th {
  background: linear-gradient(180deg, #191D21 0%, #1A2332 100%) !important;
  border-bottom: 2px solid rgba(47,111,208,0.15) !important;
}

.theme-dark .data-table thead th:hover {
  background: linear-gradient(180deg, rgba(47,111,208,0.12) 0%, rgba(47,111,208,0.06) 100%) !important;
}

.theme-dark .data-table thead th.sort-asc,
.theme-dark .data-table thead th.sort-desc {
  background: linear-gradient(180deg, rgba(47,111,208,0.15) 0%, rgba(47,111,208,0.08) 100%) !important;
}


/* ─── Notification Dropdown Panel ───────────────────────────────────────── */

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 440px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.12),
    0 0 0 1px rgba(0,0,0,0.04),
    0 0 40px rgba(47,111,208,0.06);
  z-index: 9999;
  overflow: hidden;
  animation: notifSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes notifSlideIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(47,111,208,0.03) 0%, transparent 100%);
}

.notif-panel-header h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.notif-panel-body {
  overflow-y: auto;
  max-height: 340px;
  padding: 8px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.notif-item:hover {
  background: rgba(47,111,208,0.04);
}

.notif-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.notif-item-icon.notif-deal {
  background: linear-gradient(135deg, rgba(47,111,208,0.1), rgba(6,182,212,0.1));
}

.notif-item-icon.notif-contact {
  background: linear-gradient(135deg, rgba(46,139,87,0.1), rgba(22,163,74,0.1));
}

.notif-item-icon.notif-system {
  background: linear-gradient(135deg, rgba(184,115,14,0.1), rgba(217,119,6,0.1));
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.notif-item-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.notif-item-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.notif-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 6px;
}

.notif-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.notif-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.4;
}

.theme-dark .notif-panel {
  background: #191D21;
  border-color: rgba(255,255,255,0.06);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.4),
    0 0 40px rgba(47,111,208,0.08);
}

.theme-dark .notif-item:hover {
  background: rgba(47,111,208,0.08);
}


/* ─── Sidebar Footer: Clean 2-Row Layout ───────────────────────────────── */

.sidebar-footer {
  background: linear-gradient(180deg, transparent 0%, rgba(47,111,208,0.06) 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 14px !important;
}

.sidebar-user {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #2F6FD0 0%, #5C9AE8 100%) !important;
  color: white !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.02em;
}

.sidebar-user-name {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.sidebar-logout-btn {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.35) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-logout-btn:hover {
  color: rgba(255,255,255,0.7) !important;
}

.sidebar-user-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.5) !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.sidebar-action-btn svg {
  width: 15px !important;
  height: 15px !important;
}

.sidebar-action-btn:hover {
  background: rgba(47,111,208,0.12) !important;
  border-color: rgba(47,111,208,0.25) !important;
  color: rgba(255,255,255,0.85) !important;
}


/* ─── Kanban Drag Ghost Card ────────────────────────────────────────────── */

.deal-card.sortable-ghost {
  opacity: 0.4 !important;
  transform: scale(0.95) !important;
  box-shadow: 0 0 0 2px var(--primary) !important;
  border-radius: var(--radius-sm) !important;
}

.deal-card.sortable-drag {
  transform: rotate(2deg) scale(1.05) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 0 2px var(--primary) !important;
  z-index: 999 !important;
}

.deal-card.sortable-chosen {
  cursor: grabbing !important;
}


/* ─── Breadcrumb Navigation ─────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.breadcrumb-item {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
  cursor: pointer;
}

.breadcrumb-item:hover {
  color: var(--primary);
}

.breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 0.65rem;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
}


/* ─── Enhanced Sort Arrow ───────────────────────────────────────────────── */

.sort-arrow {
  font-size: 0.6rem !important;
  opacity: 0.3;
  margin-left: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.data-table thead th.sort-asc .sort-arrow,
.data-table thead th.sort-desc .sort-arrow {
  opacity: 1;
  color: var(--primary);
}

.data-table thead th:hover .sort-arrow {
  opacity: 0.6;
}


/* ─── Table Row Selection Highlight ─────────────────────────────────────── */

.data-table tbody tr.selected {
  background: rgba(47,111,208,0.06) !important;
  box-shadow: inset 3px 0 0 var(--primary);
}

.theme-dark .data-table tbody tr.selected {
  background: rgba(47,111,208,0.12) !important;
}


/* ─── Data Table Toolbar: Enhanced ──────────────────────────────────────── */

.data-table-toolbar {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
}

.data-table-search {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  background: var(--page-bg) !important;
  border: 1px solid var(--border) !important;
  transition: all 0.2s ease !important;
}

.theme-dark .data-table-search {
  background: rgba(255,255,255,0.04) !important;
}


/* ─── Pagination: Enhanced ──────────────────────────────────────────────── */

.pagination {
  border-top: 1px solid var(--border) !important;
  padding: 10px 16px !important;
  font-size: 0.8rem !important;
}

.pagination button {
  border-radius: 8px !important;
  min-width: 32px;
  height: 32px;
  transition: all 0.15s ease !important;
}

.pagination button:hover:not(:disabled) {
  background: rgba(47,111,208,0.08) !important;
  color: var(--primary) !important;
}

.pagination button.active,
.pagination button[style*="font-weight: bold"],
.pagination button[style*="font-weight:bold"] {
  background: var(--primary) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(47,111,208,0.25) !important;
}


/* ─── Slide-Over: Enhanced Close Button ─────────────────────────────────── */

.so-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
}

.so-close-btn:hover {
  background: rgba(200,55,45,0.08);
  color: #C8372D;
  transform: rotate(90deg);
}


/* ─── Info Button: Enhanced ─────────────────────────────────────────────── */

.dash-info-btn {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(47,111,208,0.1), rgba(6,182,212,0.1)) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(47,111,208,0.15) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dash-info-btn:hover {
  background: var(--primary) !important;
  color: white !important;
  transform: scale(1.1);
}

.dash-info-tooltip {
  display: none;
  position: fixed !important;
  z-index: 9999 !important;
  background: #14181C !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  max-width: 320px !important;
  pointer-events: none !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.theme-dark .dash-info-tooltip {
  background: #3A434C !important;
}


/* ─── Tag / Chip Styling ────────────────────────────────────────────────── */

.card-label {
  padding: 2px 8px !important;
  font-size: 0.65rem !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.15s ease;
}

.card-label:hover {
  transform: scale(1.05);
  filter: brightness(0.95);
}


/* ─── Column Count Badge: Enhanced ──────────────────────────────────────── */

.column-count {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.06);
  font-variant-numeric: tabular-nums;
  min-width: 26px;
  padding: 2px 8px !important;
}

.theme-dark .column-count {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.06);
}


/* ─── Phase Filter Pills (Pipeline View) ───────────────────────────────── */

.phase-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
}

.phase-filter-pill:hover {
  border-color: rgba(47,111,208,0.2);
  background: rgba(47,111,208,0.04);
}

.phase-filter-pill.active {
  border-color: var(--phase-pill-color, var(--primary));
  background: var(--phase-pill-bg, rgba(47,111,208,0.08));
  color: var(--phase-pill-color, var(--primary));
  font-weight: 600;
  box-shadow: 0 2px 8px var(--phase-pill-shadow, rgba(47,111,208,0.15));
}

.phase-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.phase-filter-pill.active .phase-filter-dot {
  box-shadow: 0 0 6px currentColor;
}

.theme-dark .phase-filter-pill {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}

.theme-dark .phase-filter-pill:hover {
  background: rgba(47,111,208,0.08);
  border-color: rgba(47,111,208,0.2);
}


/* ─── Quick Stats Mini Bar (Pipeline Header) ────────────────────────────── */

.pipeline-quick-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.pipeline-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pipeline-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pipeline-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pipeline-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}


/* ─── @Mention Autocomplete Dropdown ────────────────────────────────────── */

.mention-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 60px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  z-index: 100;
  overflow: hidden;
  animation: mentionSlideIn 0.15s ease both;
}

@keyframes mentionSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.mention-item:hover,
.mention-item.active {
  background: rgba(47,111,208,0.06);
}

.mention-item.active {
  background: rgba(47,111,208,0.1);
}

.mention-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2F6FD0, #2A7F8F);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-dark .mention-dropdown {
  background: #191D21;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.theme-dark .mention-item:hover,
.theme-dark .mention-item.active {
  background: rgba(47,111,208,0.12);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   WOW PHASE 6: Comments, Activity Timeline, Kanban Cards, Avatars
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Comment @Mention Highlight ────────────────────────────────────────── */

.comment-mention {
  color: var(--primary);
  font-weight: 600;
  background: rgba(47,111,208,0.08);
  padding: 1px 4px;
  border-radius: 4px;
}

.theme-dark .comment-mention {
  background: rgba(47,111,208,0.15);
}


/* ─── Comment Avatar ────────────────────────────────────────────────────── */

.comment-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #2F6FD0, #2A7F8F);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
}


/* ─── Comment Item: Enhanced ────────────────────────────────────────────── */

.comment-item {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.03);
  transition: all 0.15s ease;
}

.comment-item:hover {
  background: rgba(47,111,208,0.03);
  border-color: rgba(47,111,208,0.06);
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.comment-author {
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: var(--text-primary);
}

.comment-date {
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
  margin-left: auto;
}

.comment-text {
  font-size: 0.825rem !important;
  line-height: 1.4 !important;
  color: var(--text-secondary);
  padding-left: 26px;
}

.comment-delete {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.comment-item:hover .comment-delete {
  opacity: 0.5;
}

.comment-delete:hover {
  opacity: 1 !important;
  background: rgba(200,55,45,0.08);
  color: #C8372D;
}

.theme-dark .comment-item {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.03);
}


/* ─── Activity Timeline: Vertical Line ──────────────────────────────────── */

.so-activity-item {
  position: relative;
  padding-left: 12px !important;
}

.so-activity-item::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 40px;
  bottom: -8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(47,111,208,0.2) 0%, transparent 100%);
  z-index: 0;
}

.so-activity-item:last-child::before {
  display: none;
}

.so-activity-avatar {
  background: linear-gradient(135deg, #2F6FD0, #2A7F8F) !important;
  box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 4px rgba(47,111,208,0.15);
  z-index: 1;
  position: relative;
}

.so-activity-badge.so-badge-reached {
  background: rgba(46,139,87,0.1) !important;
  color: #26734A !important;
  border: 1px solid rgba(46,139,87,0.2);
}

.so-activity-badge.so-badge-not-reached {
  background: rgba(200,55,45,0.08) !important;
  color: #A82D24 !important;
  border: 1px solid rgba(200,55,45,0.15);
}


/* ─── Kanban: Column Value ──────────────────────────────────────────────── */

.column-value {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}


/* ─── Kanban Card: Contact Avatar ───────────────────────────────────────── */

.card-contact {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.card-contact-avatar {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, #2F6FD0, #5C9AE8);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ─── Kanban Card: Footer Row ───────────────────────────────────────────── */

.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.04);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.card-comment-count {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
}

.card-date {
  font-variant-numeric: tabular-nums;
}

.theme-dark .card-footer-row {
  border-top-color: rgba(255,255,255,0.04);
}


/* ─── Kanban Card: Enhanced Value ───────────────────────────────────────── */

.card-value {
  font-weight: 700 !important;
  color: var(--primary) !important;
  font-size: 0.85rem !important;
  font-variant-numeric: tabular-nums;
}


/* ─── Kanban Card: Hover Quick Info ─────────────────────────────────────── */

.deal-card {
  cursor: pointer;
}

.deal-card .card-name {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  line-height: 1.3;
  color: var(--text-primary);
}

.deal-card:hover .card-name {
  color: var(--primary);
}


/* ─── Inline Add Button: Enhanced ───────────────────────────────────────── */

.inline-add-btn {
  border: 1px dashed rgba(47,111,208,0.2) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px !important;
  font-size: 0.8rem !important;
  transition: all 0.15s ease !important;
  width: 100%;
  cursor: pointer;
}

.inline-add-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(47,111,208,0.04) !important;
}


/* ─── Ad/Branche Tag ──────────────────────────────────────────────────── */

.card-ad-meta {
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
  background: rgba(0,0,0,0.03);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
}

.theme-dark .card-ad-meta {
  background: rgba(255,255,255,0.04);
}


/* ═══════════════════════════════════════════════════════════════════════════
   WOW PHASE 7 — Contacts View Polish, Enhanced Inputs, Status Indicators
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Contact Card: Avatar Header ──────────────────────────────────────── */

.contact-card {
  position: relative;
  overflow: hidden;
  padding-top: 14px !important;
}

.contact-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2F6FD0 0%, #2A7F8F 50%, #B0417A 100%);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(47,111,208,0.25);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  position: relative;
}

.contact-card-avatar::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 60%);
  pointer-events: none;
}

.contact-card .card-name {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
  margin-bottom: 2px;
}

.contact-card .card-contact {
  font-size: 0.78rem !important;
  color: var(--text-secondary) !important;
  opacity: 0.85;
}

.contact-card .card-ad-meta {
  font-size: 0.68rem !important;
  letter-spacing: 0.2px;
}

/* Card hover: subtle lift */
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(47,111,208,0.15) !important;
  border-color: rgba(47,111,208,0.2) !important;
}

/* ─── Contacts Grid: Better Layout ─────────────────────────────────────── */

.contacts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

@media (min-width: 1400px) {
  .contacts-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}


/* ─── Situation Filter: Colored Pill Style ─────────────────────────────── */

.phase-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
  padding: 10px 14px !important;
  background: var(--card-bg) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
}

.phase-filter-btn {
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  white-space: nowrap;
}

.phase-filter-btn:hover {
  background: rgba(47,111,208,0.06) !important;
  border-color: rgba(47,111,208,0.3) !important;
  color: var(--primary) !important;
}

.phase-filter-btn.active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(47,111,208,0.3);
}


/* ─── Enhanced Search Input ────────────────────────────────────────────── */

.search-enhanced {
  position: relative;
  max-width: 360px;
}

.search-enhanced .form-input {
  padding-left: 36px !important;
  border-radius: 20px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  transition: all 0.2s ease !important;
  font-size: 0.82rem !important;
}

.search-enhanced .form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(47,111,208,0.1), 0 2px 8px rgba(47,111,208,0.08) !important;
}

.search-enhanced-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}


/* ─── Form Inputs: Global Enhancement ──────────────────────────────────── */

.form-input,
.form-select,
select.form-input {
  border-radius: var(--radius-sm) !important;
  font-size: 0.84rem !important;
  padding: 8px 12px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-input:focus,
.form-select:focus,
select.form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(47,111,208,0.1) !important;
  outline: none !important;
}

.form-input::placeholder {
  color: var(--text-muted) !important;
  font-weight: 400;
}

.form-label {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 4px !important;
}


/* ─── View Toggle: Modern Segmented Control ────────────────────────────── */

.view-toggle {
  display: inline-flex !important;
  background: var(--hover-bg) !important;
  border-radius: var(--radius-sm) !important;
  padding: 2px !important;
  gap: 0 !important;
  border: 1px solid var(--border) !important;
}

.view-toggle-btn {
  padding: 5px 10px !important;
  border-radius: calc(var(--radius-sm) - 2px) !important;
  font-size: 0.85rem !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  line-height: 1;
}

.view-toggle-btn:hover {
  color: var(--text-primary) !important;
}

.view-toggle-btn.active {
  background: var(--card-bg) !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  font-weight: 600 !important;
}


/* ─── Badge Enhancements ───────────────────────────────────────────────── */

.badge {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 10px !important;
  letter-spacing: 0.3px;
}

.badge-gray {
  background: rgba(47,111,208,0.08) !important;
  color: var(--primary) !important;
}


/* ─── Contact Quick Stats Bar ──────────────────────────────────────────── */

.contacts-stats-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.contacts-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 140px;
  transition: all 0.15s ease;
}

.contacts-stat-item:hover {
  border-color: rgba(47,111,208,0.25);
  box-shadow: 0 2px 8px rgba(47,111,208,0.06);
}

.contacts-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.contacts-stat-icon.stat-total {
  background: linear-gradient(135deg, rgba(47,111,208,0.1), rgba(168,85,247,0.1));
  color: #2F6FD0;
}

.contacts-stat-icon.stat-new {
  background: rgba(46,139,87,0.08);
  color: #26734A;
}

.contacts-stat-icon.stat-hot {
  background: rgba(200,55,45,0.08);
  color: #C8372D;
}

.contacts-stat-icon.stat-source {
  background: rgba(184,115,14,0.08);
  color: #965E0B;
}

.contacts-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.contacts-stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}


/* ─── Enhanced Pagination ──────────────────────────────────────────────── */

.contacts-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 0;
}

.contacts-pagination .btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.contacts-pagination .page-info {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}


/* ─── Status Indicator Dots ────────────────────────────────────────────── */

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.status-online {
  background: #2E8B57;
  box-shadow: 0 0 0 2px rgba(46,139,87,0.2);
}

.status-dot.status-away {
  background: #B8730E;
  box-shadow: 0 0 0 2px rgba(184,115,14,0.2);
}

.status-dot.status-offline {
  background: #8B949D;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.2);
}

.status-dot-pulse {
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(46,139,87,0.2); }
  50% { box-shadow: 0 0 0 5px rgba(46,139,87,0.1), 0 0 12px rgba(46,139,87,0.15); }
}


/* ─── Card Label: Glossy Chip ──────────────────────────────────────────── */

.card-labels {
  margin-bottom: 6px !important;
}

.card-label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  color: white !important;
  letter-spacing: 0.3px;
}


/* ─── Page Header: Enhanced Layout ─────────────────────────────────────── */

.page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.page-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap;
}


/* ─── Button Enhancement: Consistent Rounded Style ─────────────────────── */

.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  transition: all 0.15s ease !important;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  box-shadow: 0 2px 8px rgba(47,111,208,0.25) !important;
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(47,111,208,0.35) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  border: 1px solid var(--border) !important;
  background: var(--card-bg) !important;
}

.btn-secondary:hover {
  border-color: rgba(47,111,208,0.3) !important;
  color: var(--primary) !important;
  background: rgba(47,111,208,0.04) !important;
}


/* ─── Empty State: Enhanced ────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 48px 24px !important;
}

.empty-state-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(47,111,208,0.08), rgba(168,85,247,0.06)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.empty-state-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 6px;
}

.empty-state-desc {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 16px;
}


/* ─── Dark Mode: Phase 7 Additions ─────────────────────────────────────── */

.theme-dark .contacts-stat-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

.theme-dark .phase-filters {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.theme-dark .phase-filter-btn {
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--text-secondary) !important;
}

.theme-dark .view-toggle {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.theme-dark .view-toggle-btn.active {
  background: rgba(255,255,255,0.08) !important;
}

.theme-dark .form-input,
.theme-dark .form-select {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.theme-dark .badge-gray {
  background: rgba(47,111,208,0.15) !important;
}

.theme-dark .contact-card::before {
  opacity: 0;
}

.theme-dark .contact-card:hover::before {
  opacity: 0.08;
}


/* ─── Reduced Motion: Phase 7 ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .contact-card:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .status-dot-pulse { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   WOW PHASE 8 — Custom Scrollbars, Slide-Over Polish, Dashboard Cards,
                  Sidebar Collapse, Top Bar, Global Polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Custom Scrollbars ────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.22);
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}

.theme-dark * {
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}


/* ─── Top Bar: Glassmorphism ───────────────────────────────────────────── */

.top-bar {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  position: sticky;
  top: 0;
  z-index: 40;
}

.theme-dark .top-bar {
  background: rgba(11,15,26,0.8) !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
}


/* ─── Global Search: Enhanced ──────────────────────────────────────────── */

.search-container {
  position: relative;
}

.search-input {
  background: var(--hover-bg) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 7px 12px 7px 34px !important;
  font-size: 0.82rem !important;
  transition: all 0.2s ease !important;
  width: 260px !important;
}

.search-input:focus {
  background: var(--card-bg) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(47,111,208,0.08) !important;
  width: 340px !important;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 340px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
}

.theme-dark .search-results {
  background: #191D21;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}


/* ─── Slide-Over: Premium Panel ────────────────────────────────────────── */

.slide-over-backdrop {
  background: rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.slide-over-panel {
  box-shadow: -8px 0 40px rgba(0,0,0,0.12), -2px 0 8px rgba(0,0,0,0.06) !important;
  border-left: 1px solid var(--border) !important;
}

.theme-dark .slide-over-panel {
  background: #14181C !important;
  border-left-color: rgba(255,255,255,0.06) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,0.4) !important;
}

/* Slide-over header */
.so-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--card-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.theme-dark .so-header {
  background: #14181C;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Slide-over tabs */
.so-tabs {
  border-bottom: 1px solid var(--border) !important;
  background: var(--card-bg);
  position: sticky;
  top: 56px;
  z-index: 9;
  gap: 0 !important;
}

.so-tab {
  padding: 10px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.15s ease !important;
  cursor: pointer;
}

.so-tab:hover {
  color: var(--text-primary) !important;
}

.so-tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  font-weight: 600 !important;
}

.theme-dark .so-tabs {
  background: #14181C;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}


/* ─── Slide-Over: Field Groups ─────────────────────────────────────────── */

.so-field-group {
  padding: 12px 20px !important;
}

.so-field-label {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  margin-bottom: 3px;
}

.so-field-value {
  font-size: 0.84rem !important;
  color: var(--text-primary) !important;
}

.so-section-title {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 20px 6px !important;
  border-top: 1px solid var(--border);
}


/* ─── Dashboard Card: Section Headers ──────────────────────────────────── */

.dash-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--border);
}

.dash-card-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.2px;
}

.dash-card-body {
  padding: 12px 20px 16px !important;
}


/* ─── Dashboard: Source Rows ───────────────────────────────────────────── */

.dash-source-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  transition: background 0.1s ease;
  border-radius: var(--radius-sm);
  margin: 0 -4px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.dash-source-row:hover {
  background: rgba(47,111,208,0.04);
}

.dash-source-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 3px !important;
  flex-shrink: 0;
}

.dash-source-name {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  min-width: 90px;
}

.dash-source-bar-wrap {
  flex: 1;
  height: 6px !important;
  background: var(--hover-bg) !important;
  border-radius: 3px !important;
  overflow: hidden;
}

.dash-source-bar {
  height: 100%;
  border-radius: 3px !important;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-source-count {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ─── Dashboard: Period Buttons ────────────────────────────────────────── */

.dash-period-btns {
  display: flex !important;
  gap: 4px !important;
  background: var(--hover-bg);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.dash-period-btn {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  white-space: nowrap;
}

.dash-period-btn:hover {
  background: rgba(47,111,208,0.06) !important;
  color: var(--primary) !important;
}

.dash-period-btn.active {
  background: var(--card-bg) !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  font-weight: 600 !important;
}

.theme-dark .dash-period-btns {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}

.theme-dark .dash-period-btn.active {
  background: rgba(47,111,208,0.15) !important;
}


/* ─── Dashboard: Date Range Inputs ─────────────────────────────────────── */

.dash-date-range {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.dash-date-label {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  font-weight: 500;
}

.dash-date-input {
  padding: 5px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.15s ease !important;
}

.dash-date-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(47,111,208,0.1) !important;
  outline: none;
}

.dash-date-reset {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: rgba(200,55,45,0.08);
  color: #C8372D;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.dash-date-reset:hover {
  background: rgba(200,55,45,0.15);
}

.dash-date-sep {
  color: var(--text-muted);
  font-size: 0.8rem;
}


/* ─── Sidebar: Collapsed Mode (main rules in section above) ────────────── */

.sidebar.collapsed + .main-wrapper {
  margin-left: 60px !important;
}

.sidebar.collapsed .sidebar-logo a {
  justify-content: center !important;
}


/* ─── Notification Bell: Enhanced ──────────────────────────────────────── */

.notif-bell-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.notif-bell-btn:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

.notif-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #C8372D !important;
  color: white !important;
  font-size: 0.6rem !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--card-bg);
}


/* ─── Notification Panel ───────────────────────────────────────────────── */

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  overflow: hidden;
  z-index: 100;
  animation: notifSlideIn 0.2s ease-out;
}

@keyframes notifSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.theme-dark .notif-panel {
  background: #191D21;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.notif-panel-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.notif-panel-body {
  max-height: 400px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

.notif-item:hover {
  background: rgba(47,111,208,0.04);
}

.notif-item.unread {
  background: rgba(47,111,208,0.03);
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

.theme-dark .notif-item {
  border-bottom-color: rgba(255,255,255,0.03);
}

.theme-dark .notif-item:hover {
  background: rgba(255,255,255,0.04);
}


/* ─── Dashboard Grid: Gap Enhancement ──────────────────────────────────── */

.dash-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 900px) {
  .dash-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

.dash-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}


/* ─── Filter Area: Flex Layout ─────────────────────────────────────────── */

.dash-filter-area {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap;
  margin-left: auto;
}


/* ─── Header Avatar: Enhanced ──────────────────────────────────────────── */

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2F6FD0, #2A7F8F);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}


/* ─── Loading State ────────────────────────────────────────────────────── */

.dash-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-muted);
  font-size: 0.85rem;
}


/* ─── Dark Mode: Phase 8 ──────────────────────────────────────────────── */

.theme-dark .dash-source-row:hover {
  background: rgba(255,255,255,0.03);
}

.theme-dark .dash-source-bar-wrap {
  background: rgba(255,255,255,0.06) !important;
}

.theme-dark .dash-date-input {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.theme-dark .search-input {
  background: rgba(255,255,255,0.06) !important;
}

.theme-dark .search-input:focus {
  background: rgba(255,255,255,0.08) !important;
}

.theme-dark .sidebar-collapse-btn {
  background: rgba(255,255,255,0.03);
}


/* ─── Reduced Motion: Phase 8 ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .notif-panel { animation: none; }
  .search-input { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   WOW PHASE 9 — Chart Polish, Pipeline Search, Perf Table, Kanban Glow,
                  Progress Bars, City Rows, Pipeline Sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Daily Chart: Premium Bar Chart ───────────────────────────────────── */

.dash-chart-wrap {
  display: flex !important;
  gap: 8px !important;
  min-height: 200px;
  padding: 8px 0 !important;
}

.dash-chart-y {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
  text-align: right;
  min-width: 28px;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}

.dash-chart-bars {
  flex: 1 !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 2px !important;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-bottom: 20px;
}

.dash-chart-col {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0;
  position: relative;
}

.dash-chart-bar {
  width: 100% !important;
  max-width: 24px;
  border-radius: 4px 4px 0 0 !important;
  background: linear-gradient(180deg, #2F6FD0 0%, #818CF8 100%) !important;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 2px;
}

.dash-chart-bar:hover {
  background: linear-gradient(180deg, #4F46E5 0%, #2F6FD0 100%) !important;
  box-shadow: 0 -4px 12px rgba(47,111,208,0.3);
  transform: scaleX(1.15);
}

.dash-chart-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #14181C;
  color: white;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dash-chart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #14181C;
}

.dash-chart-bar:hover .dash-chart-tooltip {
  display: block;
}

.dash-chart-label {
  position: absolute;
  bottom: -18px;
  font-size: 0.6rem !important;
  color: var(--text-muted) !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.theme-dark .dash-chart-bar {
  background: linear-gradient(180deg, #818CF8 0%, #2F6FD0 100%) !important;
}

.theme-dark .dash-chart-bar:hover {
  box-shadow: 0 -4px 16px rgba(47,111,208,0.4);
}

.theme-dark .dash-chart-tooltip {
  background: #191D21;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.theme-dark .dash-chart-tooltip::after {
  border-top-color: #191D21;
}


/* ─── Performance Table: Clean Design ──────────────────────────────────── */

.dash-perf-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.8rem !important;
}

.dash-perf-table thead th {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--border) !important;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.dash-perf-table tbody td {
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(0,0,0,0.03) !important;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.dash-perf-table tbody tr {
  transition: background 0.1s ease;
}

.dash-perf-table tbody tr:hover {
  background: rgba(47,111,208,0.03);
}

.dash-perf-table tbody tr:last-child td {
  border-bottom: none !important;
}

.theme-dark .dash-perf-table thead th {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

.theme-dark .dash-perf-table tbody td {
  border-bottom-color: rgba(255,255,255,0.03) !important;
}

.theme-dark .dash-perf-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}


/* ─── Pipeline Progress Bars: Rounded + Polished ───────────────────────── */

.dash-progress-wrap {
  display: flex !important;
  height: 8px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: var(--hover-bg) !important;
  margin: 8px 0 !important;
  gap: 1px;
}

.dash-progress-seg {
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.dash-progress-seg:first-child {
  border-radius: 4px 0 0 4px;
}

.dash-progress-seg:last-child {
  border-radius: 0 4px 4px 0;
}

.dash-progress-seg:only-child {
  border-radius: 4px;
}

.theme-dark .dash-progress-wrap {
  background: rgba(255,255,255,0.06) !important;
}


/* ─── Pipeline Phase Legend: Better Layout ──────────────────────────────── */

.dash-phase-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  margin-top: 6px;
}

.dash-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  color: var(--text-secondary) !important;
}

.dash-legend-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 3px !important;
  flex-shrink: 0;
}


/* ─── Pipeline Section Header ──────────────────────────────────────────── */

.dash-pipeline-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.dash-pipeline-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.dash-pipeline-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px;
}

.dash-pipeline-name {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.dash-pipeline-meta {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  font-variant-numeric: tabular-nums;
}

.theme-dark .dash-pipeline-section {
  border-bottom-color: rgba(255,255,255,0.04);
}


/* ─── City Analytics Rows ──────────────────────────────────────────────── */

.dash-city-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
}

.dash-city-info {
  min-width: 120px;
  flex-shrink: 0;
}

.dash-city-name {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  display: block;
}

.dash-city-deals {
  font-size: 0.68rem !important;
  color: var(--text-muted) !important;
}

.dash-city-value {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-city-unknown {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  margin-top: 8px;
  font-style: italic;
}

.dash-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 24px 0;
}

.dash-empty-small {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 8px 0;
}


/* ─── Pipeline Search Input ────────────────────────────────────────────── */

.pipeline-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.pipeline-search-input {
  padding: 7px 12px 7px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  width: 260px !important;
  transition: all 0.2s ease !important;
}

.pipeline-search-input::placeholder {
  color: var(--text-muted);
}

.pipeline-search-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(47,111,208,0.08) !important;
  outline: none;
  width: 320px !important;
}

.theme-dark .pipeline-search-input {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}


/* ─── Kanban Board: Premium ────────────────────────────────────────────── */

.board-container {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding-bottom: 8px;
  align-items: flex-start !important;
}

.board-column {
  min-width: 260px !important;
  max-width: 300px !important;
  flex-shrink: 0;
  background: var(--hover-bg) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  transition: border-color 0.15s ease;
}

.board-column:hover {
  border-color: rgba(47,111,208,0.15);
}

.column-header {
  padding: 10px 14px !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

.column-count {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.06);
}

.column-cards {
  padding: 8px !important;
  display: flex;
  flex-direction: column;
  gap: 6px !important;
  min-height: 60px;
}

.theme-dark .board-column {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.theme-dark .board-column:hover {
  border-color: rgba(47,111,208,0.15);
}

.theme-dark .column-header {
  border-bottom-color: rgba(255,255,255,0.04) !important;
}

.theme-dark .column-count {
  background: rgba(255,255,255,0.08);
}


/* ─── Deal Cards in Kanban: Compact + Clean ────────────────────────────── */

.deal-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  border-left: 3px solid !important;
  transition: all 0.15s ease !important;
}

.deal-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px);
}


/* ─── Breadcrumb: Enhanced ─────────────────────────────────────────────── */

.breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  font-size: 0.78rem !important;
}

.breadcrumb-item {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.15s ease;
}

.breadcrumb-item:hover {
  color: var(--primary) !important;
}

.breadcrumb-sep {
  color: var(--text-muted) !important;
  font-size: 0.9rem;
}

.breadcrumb-current {
  color: var(--text-primary) !important;
  font-weight: 500;
}


/* ─── Kanban Drag States ───────────────────────────────────────────────── */

.deal-card.sortable-ghost {
  opacity: 0.4 !important;
  border: 1px dashed var(--primary) !important;
  background: rgba(47,111,208,0.04) !important;
}

.deal-card.sortable-chosen {
  box-shadow: 0 8px 24px rgba(47,111,208,0.2) !important;
  transform: rotate(1deg) scale(1.02);
}

.board-column.sortable-drag-over {
  background: rgba(47,111,208,0.04) !important;
  border-color: rgba(47,111,208,0.25) !important;
}


/* ─── Reduced Motion: Phase 9 ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dash-chart-bar:hover { transform: none; }
  .deal-card:hover { transform: none; }
  .deal-card.sortable-chosen { transform: none; }
  .dash-progress-seg { transition: none; }
}


/* Dark Mode: style.css now uses var(--card-bg) — no master override needed */


/* ═══════════════════════════════════════════════════════════════════════════
   WOW PHASE 10 — Slide-Over Premium, Settings Cards, Data Table,
                   Inline Add, Section Dividers, Form Rows
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Slide-Over: Full Premium Redesign ────────────────────────────────── */

.slideover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* .slideover-panel positioning: uses original style.css centered overlay */

.slideover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.slideover-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary);
  margin: 0;
}

.slideover-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--hover-bg);
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.slideover-close:hover {
  background: rgba(200,55,45,0.08);
  color: #C8372D;
}

.so-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Slide-over tabs */
.slideover-tabs {
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  flex-shrink: 0;
}

.slideover-tabs-inner {
  display: flex;
  gap: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.slideover-tab {
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.slideover-tab:hover {
  color: var(--text-primary);
}

.slideover-tab.active {
  color: var(--primary);
  background: transparent;
  border-bottom-color: var(--primary);
  font-weight: 600;
  box-shadow: none;
}

/* Slide-over body */
.slideover-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}


/* ─── Section Dividers in Slide-Over ───────────────────────────────────── */

.so-section {
  border-bottom: 1px solid var(--border);
}

.so-section:last-child {
  border-bottom: none;
}

.so-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 6px;
  cursor: pointer;
}

.so-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.so-section-body {
  padding: 0 20px 14px;
}


/* ─── Slide-Over: Design Polish ────────────────────────────────────────── */

/* Panel — refined shadow & bg */
.slideover-panel {
  background: var(--card-bg);
  box-shadow: 0 24px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  border-radius: 16px;
}

/* Header — cleaner */
.slideover-header {
  background: var(--card-bg);
  border-radius: 16px 16px 0 0;
}

/* Close button — SVG centered */
.slideover-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
}

/* Tabs — hover hint underline */
.slideover-tab:hover {
  color: var(--text-primary);
  border-bottom-color: rgba(47,111,208,0.25);
}

.slideover-tab.active {
  color: var(--primary);
  background: transparent;
  border-bottom-color: var(--primary);
  font-weight: 600;
  box-shadow: none;
}

/* Sections — flat divider style, no card borders */
.slideover-section {
  margin-bottom: 0;
  padding: 16px 20px;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid var(--border);
}

.slideover-section:last-child {
  border-bottom: none;
}

.slideover-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.slideover-section-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.15s ease;
}

.slideover-section-header:hover .slideover-section-chevron {
  color: var(--text-primary);
}

.slideover-section-body {
  margin-top: 12px;
}

/* Sub-tabs — polished segmented control */
.so-subtabs {
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin: 20px 18px !important;
}

.so-subtab {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.18s ease;
}

.so-subtab:hover {
  color: var(--text-primary);
  background: rgba(0,0,0,0.03);
}

.so-subtab.active {
  color: var(--text-primary);
  background: var(--card-bg);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.so-subtab-icon {
  width: 15px;
  height: 15px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.so-subtab.active .so-subtab-icon {
  opacity: 0.9;
}

/* Form inputs — refined */
.slideover-section .form-input,
.so-subtab-content .form-input {
  padding: 9px 12px;
  font-size: 0.8125rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slideover-section .form-input:focus,
.so-subtab-content .form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47,111,208,0.1);
  outline: none;
}

/* Form labels — subtle */
.slideover-section .form-label,
.so-subtab-content .form-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Email action buttons — polished */
.so-email-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.18s ease;
}

.so-email-btn-primary {
  background: var(--primary);
  box-shadow: 0 1px 3px rgba(47,111,208,0.25);
}

.so-email-btn-primary:hover {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(47,111,208,0.3);
  transform: translateY(-1px);
}

.so-email-btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(47,111,208,0.04);
}

/* Reached buttons — always filled with color */
.so-reached-btn {
  border-radius: 8px;
  transition: all 0.18s ease;
}

.so-reached-ja {
  background: rgba(46,139,87,0.12) !important;
  color: #2E8B57 !important;
  border-color: rgba(46,139,87,0.3) !important;
  font-weight: 600 !important;
}

.so-reached-ja:hover {
  background: rgba(46,139,87,0.2) !important;
  border-color: rgba(46,139,87,0.5) !important;
}

.so-reached-nein {
  background: rgba(200,55,45,0.1) !important;
  color: #C8372D !important;
  border-color: rgba(200,55,45,0.25) !important;
  font-weight: 600 !important;
}

.so-reached-nein:hover {
  background: rgba(200,55,45,0.18) !important;
  border-color: rgba(200,55,45,0.4) !important;
}

.so-reached-ja.active,
.so-reached-nein.active {
  transform: scale(1.02);
}

.so-reached-ja.active {
  background: #2E8B57 !important;
  color: white !important;
  border-color: #2E8B57 !important;
}

.so-reached-nein.active {
  background: #C8372D !important;
  color: white !important;
  border-color: #C8372D !important;
}

/* Empty state — nicer */
.so-empty-state {
  padding: 32px 20px;
}

.so-empty-icon {
  opacity: 0.25;
  margin-bottom: 12px;
}

.so-empty-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.so-empty-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Activity items — refined */
.so-activity-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.so-activity-item:last-child {
  border-bottom: none;
}

.so-activity-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.75rem;
  background: rgba(47,111,208,0.08);
  color: var(--primary);
}

.so-activity-badge {
  font-size: 0.675rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
}

/* Footer save button — polished */
.slideover-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 0 0 16px 16px;
}

.slideover-footer .btn-primary,
.slideover-footer button[type="submit"] {
  width: 100%;
  padding: 11px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.18s ease;
}

.slideover-footer .btn-primary:hover,
.slideover-footer button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47,111,208,0.25);
}

/* Compose email modal — polished */
.so-compose-modal {
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
}

.so-compose-header {
  border-radius: 16px 16px 0 0;
}

.so-compose-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
}

.so-compose-footer {
  border-radius: 0 0 16px 16px;
}

/* Signature area — polished */
.so-compose-signature {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--hover-bg);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.so-compose-signature iframe {
  border-color: var(--border) !important;
  border-radius: 6px !important;
}

/* WhatsApp send button — keep green */
.so-wa-btn-primary {
  background: #25D366 !important;
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(37,211,102,0.25);
  transition: all 0.18s ease;
}

.so-wa-btn-primary:hover {
  background: #20BD5A !important;
  box-shadow: 0 2px 8px rgba(37,211,102,0.3);
  transform: translateY(-1px);
}

/* WhatsApp chips — polished */
.so-wa-chip {
  border-radius: 16px;
  font-size: 0.75rem;
  padding: 6px 12px;
  border: 1px solid rgba(37,211,102,0.2);
  color: #1A9B4B;
  background: rgba(37,211,102,0.05);
  transition: all 0.15s ease;
}

.so-wa-chip:hover {
  background: rgba(37,211,102,0.1);
  border-color: rgba(37,211,102,0.35);
}

/* Dark mode adjustments */
html.theme-dark .slideover-panel {
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}

html.theme-dark .slideover-tabs {
  background: #14181C !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

html.theme-dark .slideover-tabs-inner {
  background: rgba(255,255,255,0.06) !important;
}

html.theme-dark .slideover-tab {
  color: rgba(255,255,255,0.5) !important;
}

html.theme-dark .slideover-tab:hover {
  color: rgba(255,255,255,0.8) !important;
}

html.theme-dark .slideover-tab.active {
  color: var(--primary) !important;
}

html.theme-dark .so-subtabs {
  background: rgba(255,255,255,0.06) !important;
}

html.theme-dark .so-subtab {
  color: rgba(255,255,255,0.5) !important;
}

html.theme-dark .so-subtab.active {
  background: rgba(255,255,255,0.1) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

html.theme-dark .slideover-section {
  border-bottom-color: rgba(255,255,255,0.06);
}

html.theme-dark .so-compose-modal {
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}


/* ─── Form Rows: Two-Column Grid ───────────────────────────────────────── */

.form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.form-row .form-group:only-child {
  grid-column: 1 / -1;
}


/* ─── Settings Cards: Premium Grid ─────────────────────────────────────── */

.settings-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

.settings-card {
  padding: 20px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-card:hover {
  border-color: rgba(47,111,208,0.25) !important;
  box-shadow: 0 8px 24px rgba(47,111,208,0.08) !important;
  transform: translateY(-2px);
}

.settings-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  background: linear-gradient(135deg, rgba(47,111,208,0.08), rgba(168,85,247,0.06)) !important;
}

.settings-card-title {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.settings-card-desc {
  font-size: 0.76rem !important;
  color: var(--text-muted) !important;
  line-height: 1.4;
}


/* ─── Data Table: Premium ──────────────────────────────────────────────── */

.data-table-wrapper {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.data-table-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  gap: 10px;
}

.data-table-search {
  padding: 6px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  background: var(--hover-bg) !important;
  color: var(--text-primary) !important;
  width: 220px !important;
  transition: all 0.15s ease !important;
}

.data-table-search:focus {
  background: var(--card-bg) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(47,111,208,0.08) !important;
  outline: none;
  width: 280px !important;
}

.data-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.82rem !important;
}

.data-table th {
  padding: 8px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card-bg);
}

.data-table td {
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(0,0,0,0.03) !important;
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background 0.1s ease;
  cursor: pointer;
}

.data-table tbody tr:hover {
  background: rgba(47,111,208,0.03) !important;
}

.data-table tbody tr.selected {
  background: rgba(47,111,208,0.06) !important;
}

.data-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Cell types */
.cell-name {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.cell-phone a {
  color: var(--primary) !important;
  text-decoration: none;
}

.cell-phone a:hover {
  text-decoration: underline;
}


/* ─── Pagination: Clean ────────────────────────────────────────────────── */

.pagination-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-top: 1px solid var(--border) !important;
  font-size: 0.78rem;
}

.pagination-btn {
  padding: 5px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--card-bg) !important;
  color: var(--text-secondary) !important;
  font-size: 0.76rem !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}


/* ─── Bulk Actions Bar ─────────────────────────────────────────────────── */

.dt-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(47,111,208,0.06);
  border-radius: 8px;
  animation: fadeIn 0.15s ease;
}

.bulk-count {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
}


/* ─── Inline Add Input (Kanban) ────────────────────────────────────────── */

.inline-add-input-wrapper {
  padding: 4px 8px;
  margin-bottom: 6px;
}

.inline-add-input-wrapper input {
  width: 100%;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  outline: none;
  transition: border-color 0.15s ease;
}

.inline-add-input-wrapper input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(47,111,208,0.1);
}


/* ─── Label Chips in Slide-Over ────────────────────────────────────────── */

.so-labels-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.so-label-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
}

.so-label-add-btn {
  border-radius: 12px !important;
}


/* ─── Document Rows ────────────────────────────────────────────────────── */

.so-doc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.1s ease;
}

.so-doc-row:hover {
  background: var(--hover-bg);
}


/* ─── Column Resizer ──────────────────────────────────────────────────── */

.th-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
}

.th-resizer:hover,
.th-resizer.active {
  background: var(--primary);
}


/* ─── Dark Mode: Phase 10 Additions ────────────────────────────────────── */

html.theme-dark .slideover-panel {
  background: #14181C !important;
  border-left-color: rgba(255,255,255,0.06) !important;
  box-shadow: -12px 0 48px rgba(0,0,0,0.4) !important;
}

html.theme-dark .slideover-header,
html.theme-dark .slideover-tabs {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

html.theme-dark .slideover-close {
  background: rgba(255,255,255,0.06);
}

html.theme-dark .settings-card {
  background: #191D21 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

html.theme-dark .settings-card:hover {
  border-color: rgba(47,111,208,0.25) !important;
}

html.theme-dark .settings-card-icon {
  background: rgba(47,111,208,0.12) !important;
}

html.theme-dark .data-table-wrapper {
  border-color: rgba(255,255,255,0.06) !important;
}

html.theme-dark .data-table td {
  border-bottom-color: rgba(255,255,255,0.03) !important;
}

html.theme-dark .data-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}

html.theme-dark .data-table-toolbar {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

html.theme-dark .pagination-wrapper {
  border-top-color: rgba(255,255,255,0.06) !important;
}

html.theme-dark .pagination-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html.theme-dark .inline-add-input-wrapper input {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html.theme-dark .so-section {
  border-bottom-color: rgba(255,255,255,0.06);
}


/* ─── Dark Mode: Comprehensive Overrides ──────────────────────────────── */

/* Force dark backgrounds on all main containers */
html.theme-dark .main-wrapper {
  background: var(--page-bg) !important;
}

html.theme-dark .page-content {
  background: var(--page-bg) !important;
}

/* Page header buttons */
html.theme-dark .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html.theme-dark .btn-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--text-primary) !important;
}

html.theme-dark .btn-icon:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Data table — ensure dark backgrounds */
html.theme-dark .data-table-wrapper {
  background: var(--card-bg) !important;
}

html.theme-dark .data-table th {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text-secondary) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

html.theme-dark .data-table-search {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html.theme-dark .data-table-search::placeholder {
  color: var(--text-muted) !important;
}

/* Board columns (pipeline kanban) */
html.theme-dark .board-column {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Deal cards */
html.theme-dark .board-card,
html.theme-dark .deal-card {
  background: var(--card-bg) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Contact cards */
html.theme-dark .contact-card {
  background: var(--card-bg) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Modal */
html.theme-dark .modal {
  background: var(--card-bg) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html.theme-dark .modal-header,
html.theme-dark .modal-footer {
  border-color: rgba(255,255,255,0.06) !important;
}

/* Form elements in dark mode */
html.theme-dark .form-input,
html.theme-dark .form-select,
html.theme-dark textarea,
html.theme-dark select {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

html.theme-dark .form-input::placeholder,
html.theme-dark textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Pagination */
html.theme-dark .pagination-wrapper {
  background: var(--card-bg) !important;
}

html.theme-dark .pagination-info {
  color: var(--text-secondary) !important;
}

/* Phase filter buttons */
html.theme-dark .phase-filter-btn {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-secondary) !important;
}

html.theme-dark .phase-filter-btn:hover,
html.theme-dark .phase-filter-btn.active {
  background: rgba(47,111,208,0.15) !important;
  color: var(--primary) !important;
}

/* View toggle */
html.theme-dark .view-toggle {
  background: rgba(255,255,255,0.04) !important;
}

html.theme-dark .view-toggle-btn {
  color: var(--text-secondary) !important;
}

html.theme-dark .view-toggle-btn.active {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Inline add button */
html.theme-dark .inline-add-btn {
  color: var(--text-muted) !important;
}

html.theme-dark .inline-add-btn:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-secondary) !important;
}

/* Column header count badge */
html.theme-dark .column-count {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-secondary) !important;
}

/* KPI cards background */
html.theme-dark .dash-kpi-card {
  background: var(--card-bg) !important;
}

/* Dashboard cards */
html.theme-dark .dash-card {
  background: var(--card-bg) !important;
}

/* Search results dropdown */
html.theme-dark .search-results {
  background: var(--card-bg) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Labels / badges */
html.theme-dark .badge-gray {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-secondary) !important;
}

/* ─── Reduced Motion: Phase 10 ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .slideover-panel { animation: none; }
  .slideover-backdrop { animation: none; }
  .settings-card:hover { transform: none; }
  .data-table-search { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 11: Micro-Interactions, Hover Effects & Visual Polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sidebar: Hover Glow (active bar already defined in Phase 8) ────── */

.sidebar-nav a {
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ─── KPI Cards: Hover Lift + Subtle Border Glow ─────────────────────── */

.dash-kpi-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease !important;
  border: 1px solid var(--border) !important;
}

.dash-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(99, 102, 241, 0.1),
              0 4px 10px -3px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
}

html.theme-dark .dash-kpi-card:hover {
  box-shadow: 0 8px 25px -5px rgba(99, 102, 241, 0.15),
              0 4px 10px -3px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
}


/* ─── Contact Cards: Hover with Accent Border Top ────────────────────── */

.contact-card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease !important;
  border-top: 3px solid transparent !important;
  overflow: hidden;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(99, 102, 241, 0.12),
              0 4px 8px -2px rgba(0, 0, 0, 0.04) !important;
  border-top-color: var(--primary) !important;
}

html.theme-dark .contact-card:hover {
  box-shadow: 0 10px 30px -8px rgba(99, 102, 241, 0.2),
              0 4px 8px -2px rgba(0, 0, 0, 0.3) !important;
}


/* ─── Deal Cards (Kanban): Hover Elevation ───────────────────────────── */

.deal-card {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.deal-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.08),
              0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

html.theme-dark .deal-card:hover {
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.3),
              0 2px 6px -1px rgba(0, 0, 0, 0.15) !important;
}


/* ─── Buttons: Press Effect ──────────────────────────────────────────── */

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-sm:active {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease !important;
}


/* ─── Table Rows: Smooth Hover with Left Accent ──────────────────────── */

.data-table tbody tr {
  position: relative;
  transition: background 0.15s ease !important;
}

.data-table tbody tr::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 2px 2px 0;
}

.data-table tbody tr:hover::after {
  transform: scaleY(1);
}


/* ─── Tooltip-Style Badge Pulse on KPI Values ────────────────────────── */

.kpi-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}


/* ─── Input Focus Ring: Indigo Glow ──────────────────────────────────── */

.form-input:focus,
.form-select:focus,
textarea:focus,
.search-input:focus,
.data-table-search:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html.theme-dark .form-input:focus,
html.theme-dark .form-select:focus,
html.theme-dark textarea:focus,
html.theme-dark .search-input:focus,
html.theme-dark .data-table-search:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}


/* ─── Dashboard Section Headers: Subtle Divider Line ─────────────────── */

.dash-card-header {
  position: relative;
  padding-bottom: 12px !important;
}

.dash-card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0.15;
}


/* ─── Notification Bell: Pulse Animation on Badge ────────────────────── */

@keyframes bellPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.notification-badge {
  animation: bellPulse 2s ease-in-out infinite;
}


/* ─── Slide-Over: Smooth Backdrop Blur ───────────────────────────────── */

.slideover-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ─── Pipeline Column Headers: Count Badge ───────────────────────────── */

.kanban-col-header {
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.01em;
}


/* ─── Settings Cards: Icon Hover Rotate ──────────────────────────────── */

.settings-card:hover .settings-card-icon {
  transform: rotate(-5deg) scale(1.05);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── Global Selection Color ─────────────────────────────────────────── */

::selection {
  background: rgba(99, 102, 241, 0.2);
  color: inherit;
}


/* ─── Smooth Scrollbar Thumb for Kanban Columns ──────────────────────── */

.kanban-col-body::-webkit-scrollbar {
  width: 4px;
}

.kanban-col-body::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-col-body::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.15);
  border-radius: 4px;
}

.kanban-col-body::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.3);
}


/* ─── Top Bar: Subtle Bottom Shadow ──────────────────────────────────── */

.top-bar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
              0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

html.theme-dark .top-bar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
              0 1px 2px rgba(0, 0, 0, 0.15) !important;
}


/* ─── Page Transition: Content Fade-In ───────────────────────────────── */

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app > div {
  animation: contentFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}


/* ─── Breadcrumb Separator: Animated Chevron ─────────────────────────── */

.breadcrumb-separator {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.breadcrumb:hover .breadcrumb-separator {
  opacity: 0.7;
}


/* ─── Loading Spinner Polish ─────────────────────────────────────────── */

@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinnerRotate 0.6s linear infinite;
}


/* ─── Dark Mode: Phase 11 Additions ──────────────────────────────────── */

html.theme-dark .dash-card-header::after {
  opacity: 0.25;
}

html.theme-dark .data-table tbody tr::after {
  background: #818CF8;
}

html.theme-dark .kanban-col-body::-webkit-scrollbar-thumb {
  background: rgba(129, 140, 248, 0.15);
}

html.theme-dark .kanban-col-body::-webkit-scrollbar-thumb:hover {
  background: rgba(129, 140, 248, 0.3);
}


/* ─── Dashboard Sort Select: Dark Mode Compatible ────────────────────── */

.dash-sort-select {
  font-size: 0.75rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  color: var(--text-primary) !important;
  background: var(--card-bg) !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease !important;
  outline: none;
}

.dash-sort-select:hover {
  border-color: rgba(99, 102, 241, 0.3) !important;
}

.dash-sort-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

html.theme-dark .dash-sort-select {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

html.theme-dark .dash-sort-select option {
  background: #191D21;
  color: #E6E9EC;
}


/* ─── Period Buttons: Centered ───────────────────────────────────────── */

.dash-period-btns {
  justify-content: center !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODAL MASTER OVERRIDE — This is the ONLY place modal positioning lives.
   All other modal rules above are decorative only (::before, dark mode).
   ═══════════════════════════════════════════════════════════════════════════ */

#modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#modal-backdrop.hidden {
  display: none !important;
}

#modal-container {
  position: relative !important;
  background: var(--card-bg) !important;
  border-radius: 16px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05) !important;
  width: 100% !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.theme-dark #modal-backdrop {
  background: rgba(0,0,0,0.7) !important;
}

html.theme-dark #modal-container {
  background: #191D21 !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 60px rgba(47,111,208,0.08) !important;
  border: 1px solid rgba(47,111,208,0.15) !important;
}


/* Slideover: Original zentriertes Overlay aus style.css wird genutzt */


/* ─── Table Row Borders: etwas dicker im Light-Mode ──────────────────── */

.data-table tbody tr {
  border-bottom: 1.5px solid var(--border) !important;
}


/* ─── Reduced Motion: Phase 11 ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dash-kpi-card:hover,
  .contact-card:hover,
  .deal-card:hover { transform: none !important; }
  .btn:active,
  .btn-primary:active { transform: none !important; }
  .notification-badge { animation: none !important; }
  #app > div { animation: none !important; }
  .data-table tbody tr::after { transition: none !important; }
  .sidebar-nav a::before { transition: none !important; }
  .settings-card:hover .settings-card-icon { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOP-NAV LAYOUT — Sidebar → Horizontal Top Navigation
   Remove this entire block to revert to sidebar layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Foundation: Fixed viewport — only page-content scrolls vertically ── */

html, body {
  height: 100% !important;
  overflow: hidden !important;  /* Body never scrolls — page-content does */
  max-width: 100vw;
}

body {
  flex-direction: column !important;
}

.main-wrapper {
  margin-left: 0 !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.page-content {
  overflow-y: auto !important;   /* Vertical scroll here only */
  overflow-x: hidden !important; /* Never horizontal */
  height: 100% !important;
  box-sizing: border-box !important;
}

/* ─── Sidebar → Top Nav Bar ────────────────────────────────────────────── */

.sidebar {
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  position: sticky !important;
  top: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 12px 20px !important;
  z-index: 40 !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  overflow: visible !important;
  background: #14181C !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* ─── Logo ─────────────────────────────────────────────────────────────── */

.sidebar-logo {
  padding: 0 20px 0 0 !important;
  border-bottom: none !important;
  flex-shrink: 0;
  margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.sidebar-logo a {
  gap: 9px !important;
}

.sidebar-logo svg {
  width: 26px !important;
  height: 26px !important;
}

.sidebar-logo .text-lg {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.9) !important;
}

/* ─── Nav Container ────────────────────────────────────────────────────── */

.sidebar-nav {
  flex-direction: row !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 4px !important;
  overflow: visible !important;
  overflow-y: visible !important;
  gap: 2px;
  flex: 1;
  height: 100%;
}

/* ─── Nav Items — clean horizontal links ───────────────────────────────── */

.nav-item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  gap: 7px !important;
  color: rgba(255,255,255,0.55) !important;
  transition: all 0.15s ease !important;
  position: relative;
}

.nav-item:hover {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.06) !important;
}

.nav-item.active {
  color: white !important;
  background: rgba(47,111,208,0.15) !important;
  box-shadow: none !important;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

.nav-icon {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.7;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

/* ─── Pipeline Section ─────────────────────────────────────────────────── */

.nav-section {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  height: 100%;
}

/* Divider before pipeline section */
.nav-section:first-of-type {
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.06);
}

/* Section titles — hide "PIPELINES" label in top-nav, not needed */
.nav-section:first-of-type > .nav-section-title {
  display: none !important;
}

/* Generic section title (used by Settings) */
.nav-section-title {
  padding: 6px 10px !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap;
  color: rgba(255,255,255,0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Pipeline items — horizontal */
#sidebar-pipelines {
  display: flex !important;
  flex-direction: row !important;
  gap: 1px;
}

/* Pipeline links */
.nav-pipeline,
.nav-item.nav-item-sub {
  padding: 8px 13px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  color: rgba(255,255,255,0.55) !important;
  transition: all 0.15s ease !important;
  position: relative;
}

.nav-pipeline:hover,
.nav-item.nav-item-sub:hover {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.06) !important;
}

.nav-pipeline.active,
.nav-item.nav-item-sub.active {
  color: white !important;
  background: rgba(47,111,208,0.15) !important;
  box-shadow: none !important;
}

.nav-pipeline.active::after,
.nav-item.nav-item-sub.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

.nav-pipeline-dot {
  width: 7px !important;
  height: 7px !important;
}

/* ─── Settings Section — hidden in top-nav (moved to top-bar right) ───── */

.nav-section:last-child {
  display: none !important;
}

.nav-section:last-child .nav-section-title {
  padding: 7px 12px !important;
  font-size: 0.78rem !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-section:last-child .nav-section-title:hover {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.06);
}

.nav-section:last-child .nav-icon {
  width: 14px !important;
  height: 14px !important;
}

/* Settings dropdown */
#sidebar-settings-items {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  background: #191D21 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) !important;
  padding: 6px !important;
  min-width: 200px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  z-index: 100 !important;
  flex-direction: column !important;
}

#sidebar-settings-items::-webkit-scrollbar {
  width: 4px;
}

#sidebar-settings-items::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

#sidebar-settings-items .nav-item {
  width: 100% !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  font-size: 0.78rem !important;
}

#sidebar-settings-items .nav-item .nav-icon {
  width: 14px !important;
  height: 14px !important;
}

#sidebar-settings-items .nav-item:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Settings arrow */
#settings-arrow {
  font-size: 0.55rem !important;
  transition: transform 0.2s ease !important;
  opacity: 0.5;
}

/* ─── Sidebar Footer — hidden ─────────────────────────────────────────── */

.sidebar-footer {
  display: none !important;
}

/* ─── Top-Nav Right Actions (inside sidebar bar) ──────────────────────── */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.08);
  height: 100%;
  flex-shrink: 0;
}

.topbar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.topbar-nav-btn:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
}

.topbar-nav-btn svg {
  width: 16px;
  height: 16px;
}

/* User badge in dark nav */
.topbar-user-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  cursor: default;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-left: 4px;
  white-space: nowrap;
}

.topbar-user-badge:hover {
  background: rgba(255,255,255,0.12);
}

.header-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── Hide unnecessary elements ────────────────────────────────────────── */

.sidebar-hamburger {
  display: none !important;
}

.sidebar-overlay {
  display: none !important;
}

/* Hide the old top-bar completely */
.top-bar {
  display: none !important;
}

/* ─── Main Wrapper — offset by sidebar width ───────────────────────────── */

.main-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Also override collapsed-sidebar margin */
.sidebar.collapsed + .main-wrapper,
.sidebar.collapsed ~ .main-wrapper,
.sidebar.collapsed + .main-content,
.sidebar.collapsed ~ .main-content {
  margin-left: 0 !important;
}

/* Page content — full width, vertical scroll only */
.page-content {
  width: 100%;
  padding: 24px 32px !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px !important;
  }
}

/* Pipeline board — horizontal scroll with grab cursor */
.board-container {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.board-container:active {
  cursor: grabbing;
}

.board-container::-webkit-scrollbar {
  height: 6px;
}

.board-container::-webkit-scrollbar-track {
  background: transparent;
}

.board-container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

.board-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}

html.theme-dark .board-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
}

html.theme-dark .board-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* (old top-bar styles removed — actions now in sidebar nav bar) */

/* ─── Scrollbar hidden on nav ──────────────────────────────────────────── */

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.sidebar-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ─── Dark Mode ────────────────────────────────────────────────────────── */

html.theme-dark .sidebar {
  background: #0B1120 !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
}

html.theme-dark #sidebar-settings-items {
  background: #162032 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ─── Tablet (769px – 1024px) ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  .sidebar {
    padding: 12px 14px !important;
  }

  .nav-item,
  .nav-pipeline,
  .nav-item.nav-item-sub {
    padding: 7px 10px !important;
    font-size: 0.75rem !important;
    gap: 5px !important;
  }

  .sidebar-logo .text-lg {
    font-size: 0.72rem !important;
  }

  .topbar-actions {
    gap: 1px;
    padding-left: 8px;
  }

  .topbar-nav-btn {
    width: 30px;
    height: 30px;
  }

  /* KPI grid: 3 columns on tablet */
  .dash-kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Page content tighter padding */
  .page-content {
    padding: 20px 20px !important;
  }

  /* Pipeline board columns smaller */
  .board-column {
    min-width: 240px !important;
  }

  /* Slide-over narrower */
  .slideover-panel {
    max-width: 85vw !important;
  }

  /* ── Phase 7: Tablet-Feinschliff ─────────────────────────────────────── */
  .page-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dash-filter-area {
    flex-wrap: wrap !important;
  }
  .contacts-stats-bar {
    flex-wrap: wrap !important;
  }
  .phase-filters {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  /* iOS-Zoom Prevention auch auf Tablet */
  .form-input,
  .data-table-search {
    font-size: 16px !important;
  }
  .th-resizer {
    width: 8px !important;
  }
  .settings-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
}

/* ─── Mobile Top Bar (hidden on desktop) ─────────────────────────────── */

.mobile-topbar {
  display: none;
}

.mobile-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.mobile-hamburger:active { background: rgba(255,255,255,0.08); }
.mobile-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #8B949D;
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
.mobile-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fff; }
.mobile-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }

.mobile-topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.mobile-topbar-logo span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #fff;
}

.mobile-topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.mobile-topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: none;
  color: #8B949D;
  cursor: pointer;
}
.mobile-topbar-btn:active { background: rgba(255,255,255,0.08); color: #fff; }

/* ─── Mobile (≤ 768px) ────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── 1. Scroll-Fix ─────────────────────────────────────────────────── */
  html {
    overflow: auto !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  body {
    min-height: auto !important;
    overflow: auto !important;
    height: auto !important;
  }

  .main-wrapper {
    margin-left: 0 !important;
    padding-top: 54px !important;
    min-height: auto !important;
    height: auto !important;
    overflow-y: visible !important;
  }

  .page-content {
    padding: 14px !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* ── 2. Mobile Top Bar ─────────────────────────────────────────────── */
  .mobile-topbar {
    display: flex !important;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    padding: 0 12px;
    background: var(--sidebar-bg, #14181C);
    border-bottom: 1px solid var(--sidebar-border, rgba(255,255,255,0.06));
    z-index: 50;
    gap: 10px;
  }

  /* ── 3. Sidebar Drawer ─────────────────────────────────────────────── */
  .sidebar {
    width: 280px !important;
    min-width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    z-index: 60 !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--sidebar-border) !important;
    border-bottom: none !important;
  }

  .sidebar.sidebar-open {
    transform: translateX(0) !important;
  }

  /* Hide desktop elements in sidebar */
  .sidebar .topbar-actions { display: none !important; }
  .sidebar-hamburger { display: none !important; }

  /* ── 4. Sidebar Overlay ────────────────────────────────────────────── */
  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 55 !important;
    display: none !important;
  }

  .sidebar-overlay.active {
    display: block !important;
  }

  /* ── 5. Sidebar Logo ───────────────────────────────────────────────── */
  .sidebar-logo {
    padding: 16px 16px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-right: none !important;
  }

  /* ── 6. Sidebar Nav — vertical ─────────────────────────────────────── */
  .sidebar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    overflow-y: auto !important;
    padding: 8px 12px !important;
    flex: 1 !important;
    gap: 2px !important;
  }

  .nav-item,
  .nav-pipeline,
  .nav-item.nav-item-sub {
    padding: 11px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    white-space: normal !important;
  }

  .nav-icon {
    display: flex !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* ── 7. Nav Sections — vertical ────────────────────────────────────── */
  .nav-section {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    margin-top: 4px !important;
  }

  .nav-section:first-of-type {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  /* Show "Pipelines" label in drawer */
  .nav-section:first-of-type > .nav-section-title {
    display: block !important;
  }

  .nav-section-title {
    padding: 8px 14px 4px !important;
    font-size: 0.65rem !important;
  }

  /* Pipelines vertical */
  #sidebar-pipelines {
    flex-direction: column !important;
    gap: 2px !important;
  }

  /* ── 8. Settings Section — visible in drawer ───────────────────────── */
  .nav-section:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  /* Settings dropdown → inline list in drawer */
  #sidebar-settings-items {
    position: static !important;
    top: auto !important;
    right: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: auto !important;
    max-height: none !important;
    z-index: auto !important;
  }

  /* ── 9. Sidebar Footer — visible in drawer ─────────────────────────── */
  .sidebar-footer {
    display: block !important;
    padding: 12px 16px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: auto !important;
  }

  /* ── 10. Page Layout ───────────────────────────────────────────────── */
  .page-header {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .page-header .flex {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* KPI grid: 2 columns */
  .dash-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .dash-kpi-card {
    padding: 12px !important;
  }

  /* Data table: horizontal scroll */
  .data-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 600px;
  }

  /* Board columns */
  .board-column {
    min-width: 240px !important;
    max-width: 280px !important;
  }

  /* Slide-over: full width */
  .slideover-panel {
    max-width: 100vw !important;
    width: 100vw !important;
  }

  /* Dashboard grid: single column */
  .dash-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Phase 1: iOS-Fixes & Touch-Targets ──────────────────────────────── */

  /* 1.1 Safe Area Insets */
  .mobile-topbar {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  .main-wrapper {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .sidebar {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* 1.2 Input Zoom Prevention — iOS Safari zoomt bei font-size < 16px */
  .form-input,
  .form-select,
  select,
  textarea,
  .data-table-search,
  .page-size-select,
  .pipeline-search-input,
  .search-enhanced .form-input {
    font-size: 16px !important;
  }

  /* 1.3 Touch Targets — Minimum 44px */
  .btn,
  .phase-filter-btn,
  .pagination-btn,
  .view-toggle-btn,
  .dash-period-btn {
    min-height: 44px !important;
  }
  .slideover-close,
  .so-close-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.3rem !important;
  }
  .mobile-topbar-btn {
    width: 44px !important;
    height: 44px !important;
  }
  .row-checkbox {
    width: 20px !important;
    height: 20px !important;
  }

  /* 1.4 Momentum Scrolling */
  .dt-table-scroll,
  .board-container,
  .phase-filters,
  .dash-period-btns,
  .slideover-tabs-inner {
    -webkit-overflow-scrolling: touch !important;
  }

  /* 1.5 Slideover Dynamic Viewport */
  .slideover-panel {
    max-height: 100dvh !important;
  }

  /* ── Phase 2: DataTable Touch-Optimierung ────────────────────────────── */

  /* 2.1 Toolbar Stacking */
  .data-table-toolbar {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .data-table-search {
    width: 100% !important;
    min-height: 44px !important;
  }
  .dt-bulk-actions {
    width: 100% !important;
  }

  /* 2.2 Tabellen-Zellen für Touch */
  .data-table td {
    padding: 10px 8px !important;
    font-size: 0.82rem !important;
  }
  .data-table th {
    padding: 10px 8px !important;
    font-size: 0.75rem !important;
  }

  /* 2.3 Column Resizer vergrößern */
  .th-resizer {
    width: 12px !important;
    right: -4px !important;
  }

  /* 2.4 Pagination Touch-Friendly */
  .pagination {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .pagination-info {
    width: 100% !important;
    text-align: center !important;
    font-size: 0.82rem !important;
  }
  .pagination-buttons {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .pagination-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 0.85rem !important;
  }
  .page-size-select {
    min-height: 40px !important;
  }

  /* ── Phase 3: Kontakte View ──────────────────────────────────────────── */

  /* 3.2 Situation-/Phase-Filter Horizontal Scroll */
  .phase-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }
  .phase-filters::-webkit-scrollbar {
    display: none;
  }
  .phase-filter-btn {
    flex-shrink: 0 !important;
  }

  /* 3.3 Stats Bar Responsive */
  .contacts-stats-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .contacts-stats-bar > * {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }

  /* 3.4 Search Bar Full Width */
  .search-enhanced {
    max-width: 100% !important;
    width: 100% !important;
  }
  .search-enhanced .form-input {
    min-height: 44px !important;
  }

  /* 3.5 Page Actions Stacking */
  .page-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .page-actions .btn {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
  }
  .page-actions .view-toggle {
    width: 100% !important;
    justify-content: center !important;
  }
  .page-actions .btn-primary {
    order: -1 !important;
    flex: 1 1 100% !important;
  }

  /* ── Phase 4: Pipeline Detail ────────────────────────────────────────── */

  /* 4.4 Slide-Over Tabs Horizontal Scroll */
  .slideover-tabs-inner {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .slideover-tabs-inner::-webkit-scrollbar {
    display: none;
  }
  .slideover-tab {
    flex-shrink: 0 !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* Formulare im Slide-Over */
  .slideover-section .form-input,
  .so-subtab-content .form-input {
    min-height: 44px !important;
  }
  .slideover-section .form-label,
  .so-subtab-content .form-label {
    font-size: 0.8rem !important;
  }

  /* 4.5 Pipeline Search Input */
  .pipeline-search-input {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* ── Phase 5: Dashboard ──────────────────────────────────────────────── */

  /* 5.1 Period-Filter Horizontal Scroll */
  .dash-period-btns {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  .dash-period-btns::-webkit-scrollbar {
    display: none;
  }
  .dash-period-btn {
    flex-shrink: 0 !important;
  }

  /* 5.2 Date Range Pickers Stacking */
  .dash-filter-area {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .dash-date-range {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .dash-date-input {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  /* 5.4 Chart Labels Responsive */
  .dash-chart-label {
    font-size: 0.55rem !important;
  }
  .dash-section {
    overflow: hidden !important;
  }

  /* 5.6 Plattform-Performance Tabelle — mobile-optimiert */
  .dash-perf-table {
    font-size: 0.72rem !important;
  }
  .dash-perf-table thead th {
    font-size: 0.62rem !important;
    padding: 6px 6px !important;
    white-space: nowrap !important;
  }
  .dash-perf-table tbody td {
    padding: 7px 6px !important;
    font-size: 0.72rem !important;
  }
  .dash-sort-select {
    font-size: 16px !important;
    min-height: 36px !important;
    padding: 4px 8px !important;
  }
  .dash-card-body {
    padding: 10px 12px 14px !important;
  }
  .dash-card-header {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dash-card-title {
    font-size: 0.82rem !important;
  }

  /* 5.7 Top-Städte — mobile-optimiert */
  .dash-city-row {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 8px 0 !important;
  }
  .dash-city-info {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .dash-city-name {
    font-size: 0.75rem !important;
  }
  .dash-city-deals {
    font-size: 0.65rem !important;
  }
  .dash-source-bar-wrap {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .dash-city-value {
    font-size: 0.72rem !important;
    min-width: 60px !important;
  }

  /* ── Phase 6: Settings Views ─────────────────────────────────────────── */

  /* 6.1 Settings Hub Grid */
  .settings-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .settings-card {
    padding: 14px !important;
  }
  .settings-card-icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* 6.2 Settings Tabs Horizontal Scroll */
  .settings-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  /* 6.3 Formular-Rows 1-Column */
  .form-row,
  .form-row-2col {
    grid-template-columns: 1fr !important;
  }

  /* 6.4 Settings Sections Padding */
  .settings-section,
  .settings-section-content {
    padding: 12px !important;
  }
}

/* ─── Small Mobile (≤ 480px) ──────────────────────────────────────────── */

@media (max-width: 480px) {
  .dash-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .page-content {
    padding: 10px !important;
  }

  /* Kanban Snap-Scroll */
  .board-container {
    scroll-snap-type: x mandatory !important;
  }
  .board-column {
    min-width: 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: center;
  }

  .mobile-topbar-logo span {
    display: none !important;
  }

  .sidebar {
    width: 260px !important;
    min-width: 260px !important;
  }

  /* KPI Overflow-Fix */
  .dash-kpi-value {
    font-size: 1.3rem !important;
    word-break: break-all !important;
  }
  .dash-kpi-label {
    font-size: 0.7rem !important;
  }

  /* Stats Bar 1-Column */
  .contacts-stats-bar > * {
    flex: 1 1 100% !important;
  }

  /* Contact Cards 1-Column */
  .contacts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Settings Grid 1-Column */
  .settings-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MIGRATED FROM style.css — Fehlende Komponenten
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Button Danger ────────────────────────────────────────────────────────── */

.btn-danger {
  background: rgba(200,55,45,0.08);
  color: #C8372D;
}
.btn-danger:hover {
  background: rgba(200,55,45,0.14);
}

.theme-dark .btn-danger {
  background: rgba(200,55,45,0.15);
  color: #F87171;
}
.theme-dark .btn-danger:hover {
  background: rgba(200,55,45,0.25);
}

/* ─── Badge Color Variants ────────────────────────────────────────────────── */

.badge-blue { background: rgba(47,111,208,0.1); color: #2F6FD0; }
.badge-green { background: rgba(46,139,87,0.1); color: #26734A; }
.badge-red { background: rgba(200,55,45,0.1); color: #C8372D; }

.theme-dark .badge-blue { background: rgba(47,111,208,0.2); color: #5C9AE8; }
.theme-dark .badge-green { background: rgba(46,139,87,0.2); color: #4ADE80; }
.theme-dark .badge-red { background: rgba(200,55,45,0.2); color: #F87171; }

/* ─── Activity Items ──────────────────────────────────────────────────────── */

.activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.035));
}
.activity-item:last-child { border-bottom: none; }

.activity-icon {
  width: 34px;
  height: 34px;
  background: rgba(47,111,208,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.activity-content { flex: 1; min-width: 0; }

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.activity-type { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.activity-date { font-size: 0.7rem; color: var(--text-muted); }

.activity-notes {
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: pre-wrap;
  margin-top: 2px;
  line-height: 1.45;
}

.activity-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 3px; }

.theme-dark .activity-icon {
  background: rgba(99,102,241,0.2);
}

/* ─── Column Footer ───────────────────────────────────────────────────────── */

.column-footer {
  padding: 4px 14px;
  text-align: right;
}

/* ─── Card Footer & Assigned Badge ────────────────────────────────────────── */

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.card-assigned-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(99,102,241,0.12);
  color: #4338CA;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  cursor: default;
}

.theme-dark .card-assigned-badge {
  background: rgba(129,140,248,0.2);
  color: #A5B4FC;
}

/* ─── Checkbox ────────────────────────────────────────────────────────────── */

.checkbox-cell {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
  overflow: hidden;
  padding-left: 12px !important;
  padding-right: 0 !important;
}
.checkbox-cell::before,
.checkbox-cell::after,
.row-checkbox::before,
.row-checkbox::after {
  content: none !important;
  display: none !important;
}
.row-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary, #2F6FD0);
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* ─── Color Preset Grid (Label Editor) ────────────────────────────────────── */

/* ── Melde-Knopf in der oberen Leiste ───────────────────────────────────────
   Klein und zurückhaltend neben Glocke und Zahnrad, aber mit Beschriftung:
   Ein reines Zeichen hätte hier niemand als Meldeweg erkannt. Er steht oben
   und nicht im Menü, weil der Dialog festhält, auf welcher Seite der Melder
   gerade war; über einen Menüpunkt wäre dieser Bezug verloren. */
.topbar-melden {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.topbar-melden:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}
.topbar-melden:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 1px;
}
/* Auf schmalen Geräten nur das Zeichen, sonst drängt die Leiste. */
@media (max-width: 900px) {
  .topbar-melden span { display: none; }
  .topbar-melden { padding: 0 9px; }
}

/* Zahl der offenen Meldungen direkt am Knopf. Sie saß vorher am Menüpunkt;
   der ist entfallen, und ohne sie sähe die Geschäftsführung nicht mehr, dass
   überhaupt etwas hereingekommen ist. */
.melden-abzeichen {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #B8730E;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Rechtliche Links am Fuß der Seitenleiste. Bewusst zurückhaltend: Sie müssen
   erreichbar sein, aber nicht um Aufmerksamkeit konkurrieren. */
.sidebar-legal {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 2px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
}
.sidebar-legal a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}
.sidebar-legal a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

/* ── Filterleiste der Kontaktliste ──────────────────────────────────────────
   Eigene Klasse statt der geteilten .pipeline-filter-bar: Die verteilt ihre
   Kinder mit space-between über die volle Breite, was ohne die entfernten
   Filter-Schaltflächen eine Lücke in der Mitte ergeben hätte. Hier wächst
   stattdessen das Suchfeld, die schmalen Felder behalten ihre Größe. */
.kontakt-filterleiste {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.kontakt-filterleiste .kf-suche {
  position: relative;
  flex: 1 1 260px;
  min-width: 220px;
  display: flex;
  align-items: center;
}
.kontakt-filterleiste .kf-lupe {
  position: absolute;
  left: 12px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-muted, #8B949D);
  pointer-events: none;
}
.kontakt-filterleiste .kf-suche .kf-eingabe { padding-left: 32px; width: 100%; }
.kontakt-filterleiste .kf-plz {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}
/* Das Kürzel sitzt fest am Feld, damit "101" nicht ohne Bezug dasteht. */
.kontakt-filterleiste .kf-praefix {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #5A646E);
  background: var(--bg-subtle, rgba(100, 116, 139, 0.08));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-right: none;
  border-radius: 10px 0 0 10px;
}
.kontakt-filterleiste .kf-plz .kf-eingabe {
  width: 110px;
  border-radius: 0 10px 10px 0;
}
.kontakt-filterleiste .kf-eingabe {
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text-primary);
  /* War `var(--bg-card, #fff)` — das Token heisst --card-bg. Der Name existierte
     nicht, also griff immer die Rueckfallebene Weiss, auch nachts. */
  background: var(--card-bg);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.kontakt-filterleiste .kf-eingabe::placeholder { color: var(--text-muted); }
.kontakt-filterleiste .kf-eingabe:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
  box-shadow: none;
}
.kontakt-filterleiste .kf-suche:focus-within .kf-lupe { color: var(--primary); }
@media (max-width: 640px) {
  .kontakt-filterleiste .kf-suche { flex-basis: 100%; }
}

/* Kontakte, an denen bereits jemand arbeitet: ausgegraut, aber sichtbar.
   Nur die Zellen werden blass, nicht die ganze Zeile — sonst würde auch die
   Auswahlbox verblassen und wirkte deaktiviert, obwohl sie es nicht ist.
   Beim Überfahren kehrt die volle Deckkraft zurück, damit die Zeile lesbar
   bleibt, sobald man sie tatsächlich ansteuert. */
.data-table tbody tr.zeile-in-pipeline td:not(.checkbox-cell) {
  opacity: 0.45;
  transition: opacity 0.12s ease;
}
.data-table tbody tr.zeile-in-pipeline:hover td:not(.checkbox-cell) {
  opacity: 1;
}
.contact-card.karte-in-pipeline {
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.contact-card.karte-in-pipeline:hover {
  opacity: 1;
}

/* 85 Farben statt 10: als festes Raster mit fünf Helligkeitsstufen je Spalte,
   damit die Farbfamilien beim Umbruch nicht auseinanderreißen. */
.color-preset-grid {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
}
.color-preset {
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.color-preset:hover { transform: scale(1.1); }
.color-preset.active { border-color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════════════════════
   Sales Controlling (migriert + Dark Mode)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tab Bar */
.ctrl-tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #E6E9EC;
  border-radius: 10px;
  margin-bottom: 20px;
}
.ctrl-tab {
  padding: 8px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #5A646E;
  cursor: pointer;
  transition: all 0.2s;
}
.ctrl-tab:hover { color: #191D21; background: rgba(255,255,255,0.6); }
.ctrl-tab.active {
  background: #fff;
  color: #191D21;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-weight: 600;
}

/* Filter Row */
.ctrl-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ctrl-filter-select,
.ctrl-filter-date {
  padding: 8px 12px;
  border: 1px solid #E1E4E7;
  border-radius: 8px;
  font-size: 0.875rem;
  background: #fff;
  color: #191D21;
  outline: none;
  transition: border-color 0.2s;
}
.ctrl-filter-select:focus,
.ctrl-filter-date:focus { border-color: #6366f1; }
.ctrl-date-sep { color: #8B949D; font-weight: 500; }

/* Loading */
.ctrl-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px;
  justify-content: center;
  color: #5A646E;
}
.ctrl-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #E1E4E7;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: ctrl-spin 0.7s linear infinite;
}
@keyframes ctrl-spin { to { transform: rotate(360deg); } }

/* KPI Grid */
.ctrl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.ctrl-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #E1E4E7;
  transition: box-shadow 0.2s;
}
.ctrl-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ctrl-kpi-ring { flex-shrink: 0; }
.ctrl-kpi-info { min-width: 0; }
.ctrl-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #191D21;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ctrl-kpi-label {
  font-size: 0.8rem;
  color: #5A646E;
  margin-top: 2px;
}
.ctrl-trend {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.ctrl-trend-up { color: #26734A; background: #f0fdf4; }
.ctrl-trend-down { color: #A82D24; background: #fef2f2; }

/* AI Sales Coach Box */
.ctrl-ai-box {
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}
.ctrl-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e7ff;
}
.ctrl-ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #4338ca;
}
.ctrl-ai-refresh {
  padding: 6px 16px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.ctrl-ai-refresh:hover { background: #4f46e5; }
.ctrl-ai-body { padding: 20px; }
.ctrl-ai-placeholder {
  color: #5A646E;
  font-size: 0.875rem;
  margin: 0;
}
.ctrl-ai-error {
  color: #A82D24;
  font-size: 0.875rem;
  margin: 0;
}
.ctrl-ai-section {
  margin-bottom: 16px;
}
.ctrl-ai-section:last-child { margin-bottom: 0; }
.ctrl-ai-section h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4338ca;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.ctrl-ai-text {
  font-size: 0.875rem;
  color: #191D21;
  line-height: 1.6;
  white-space: pre-line;
}
.ctrl-ai-alerts ul {
  margin: 0;
  padding-left: 20px;
}
.ctrl-ai-alerts li {
  font-size: 0.875rem;
  color: #A82D24;
  margin-bottom: 4px;
}

/* AI Skeleton */
.ctrl-ai-skeleton { display: flex; flex-direction: column; gap: 12px; }
.ctrl-skeleton-line {
  height: 14px;
  background: linear-gradient(90deg, #E1E4E7 25%, #E6E9EC 50%, #E1E4E7 75%);
  background-size: 200% 100%;
  animation: ctrl-skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
  width: 100%;
}
.ctrl-skeleton-line.short { width: 60%; }
.ctrl-skeleton-line.medium { width: 80%; }
@keyframes ctrl-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Employee Table */
.ctrl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.ctrl-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #5A646E;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #E1E4E7;
  white-space: nowrap;
}
.ctrl-table td {
  padding: 12px;
  border-bottom: 1px solid #E6E9EC;
  color: #191D21;
}
.ctrl-table tbody tr:hover { background: #F5F6F7; }
.ctrl-cell-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.ctrl-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.ctrl-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ctrl-cell-phase { min-width: 120px; }
.ctrl-totals-row { background: #F5F6F7; }
.ctrl-totals-row td {
  border-top: 2px solid #E1E4E7;
  border-bottom: none;
}

/* Phase Bar */
.ctrl-phase-bar {
  display: flex;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
  min-width: 100px;
}
.ctrl-phase-seg {
  transition: width 0.4s ease;
  cursor: default;
  border-radius: 2px;
}

/* Daily Chart */
.ctrl-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
  padding-top: 10px;
}
.ctrl-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.ctrl-chart-bar-outer {
  width: 100%;
  max-width: 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 130px;
  justify-content: flex-end;
}
.ctrl-chart-bar {
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
  min-height: 0;
}
.ctrl-chart-bar.reached { background: #2E8B57; border-radius: 0 0 3px 3px; }
.ctrl-chart-bar.not-reached { background: #E1E4E7; }
.ctrl-chart-label {
  font-size: 0.65rem;
  color: #8B949D;
  margin-top: 6px;
  white-space: nowrap;
}

/* Conversion Funnel */
.ctrl-funnel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border: 1px solid #E1E4E7;
  border-radius: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ctrl-funnel-step {
  text-align: center;
  padding: 16px 24px;
  border-top: 3px solid #5A646E;
  background: #F5F6F7;
  border-radius: 0 0 8px 8px;
  min-width: 80px;
}
.ctrl-funnel-value {
  font-size: 1.5rem;
  font-weight: 700;
}
.ctrl-funnel-label {
  font-size: 0.75rem;
  color: #5A646E;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ctrl-funnel-arrow {
  font-size: 0.85rem;
  font-weight: 600;
  color: #8B949D;
  white-space: nowrap;
}

/* Sortable Table Headers */
.ctrl-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.ctrl-th-sortable:hover { color: #191D21; }
.ctrl-th-sorted { color: #2F6FD0; }

/* Ranking Badges */
.ctrl-cell-rank {
  width: 36px;
  text-align: center;
}
.ctrl-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5A646E;
  background: #E6E9EC;
}
.ctrl-rank-gold {
  color: #92400e;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  box-shadow: 0 1px 3px rgba(251,191,36,0.3);
}
.ctrl-rank-silver {
  color: #6B747E;
  background: linear-gradient(135deg, #E6E9EC, #E1E4E7);
  box-shadow: 0 1px 3px rgba(148,163,184,0.3);
}
.ctrl-rank-bronze {
  color: #78350f;
  background: linear-gradient(135deg, #fed7aa, #fdba74);
  box-shadow: 0 1px 3px rgba(251,146,60,0.3);
}

/* Revenue Cell */
.ctrl-cell-revenue {
  color: #26734A;
  font-weight: 600;
}

/* Export */
.ctrl-export-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ─── Controlling Dark Mode ───────────────────────────────────────────────── */

.theme-dark .ctrl-tab-bar { background: #191D21; }
.theme-dark .ctrl-tab { color: #8B949D; }
.theme-dark .ctrl-tab:hover { color: #E1E4E7; background: rgba(255,255,255,0.06); }
.theme-dark .ctrl-tab.active {
  background: #3A434C;
  color: #E6E9EC;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.theme-dark .ctrl-filter-select,
.theme-dark .ctrl-filter-date {
  background: #191D21;
  border-color: #3A434C;
  color: #E1E4E7;
}
.theme-dark .ctrl-filter-select:focus,
.theme-dark .ctrl-filter-date:focus { border-color: #818CF8; }

.theme-dark .ctrl-loading { color: #8B949D; }
.theme-dark .ctrl-spinner {
  border-color: #3A434C;
  border-top-color: #818CF8;
}

.theme-dark .ctrl-kpi-card {
  background: #191D21;
  border-color: #3A434C;
}
.theme-dark .ctrl-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.theme-dark .ctrl-kpi-value { color: #E6E9EC; }
.theme-dark .ctrl-kpi-label { color: #8B949D; }
.theme-dark .ctrl-trend-up { color: #4ADE80; background: rgba(46,139,87,0.15); }
.theme-dark .ctrl-trend-down { color: #F87171; background: rgba(200,55,45,0.15); }

.theme-dark .ctrl-ai-box {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  border-color: #4338CA;
}
.theme-dark .ctrl-ai-header { border-bottom-color: #4338CA; }
.theme-dark .ctrl-ai-title { color: #A5B4FC; }
.theme-dark .ctrl-ai-refresh { background: #6366F1; }
.theme-dark .ctrl-ai-refresh:hover { background: #818CF8; }
.theme-dark .ctrl-ai-placeholder { color: #8B949D; }
.theme-dark .ctrl-ai-error { color: #F87171; }
.theme-dark .ctrl-ai-section h4 { color: #A5B4FC; }
.theme-dark .ctrl-ai-text { color: #E1E4E7; }
.theme-dark .ctrl-ai-alerts li { color: #F87171; }

.theme-dark .ctrl-skeleton-line {
  background: linear-gradient(90deg, #3A434C 25%, #6B747E 50%, #3A434C 75%);
  background-size: 200% 100%;
}

.theme-dark .ctrl-table th {
  color: #8B949D;
  border-bottom-color: #3A434C;
}
.theme-dark .ctrl-table td {
  color: #E1E4E7;
  border-bottom-color: #191D21;
}
.theme-dark .ctrl-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.theme-dark .ctrl-totals-row { background: rgba(255,255,255,0.02); }
.theme-dark .ctrl-totals-row td { border-top-color: #3A434C; }

.theme-dark .ctrl-chart-bar.not-reached { background: #3A434C; }
.theme-dark .ctrl-chart-label { color: #5A646E; }

.theme-dark .ctrl-funnel {
  background: #191D21;
  border-color: #3A434C;
}
.theme-dark .ctrl-funnel-step {
  background: #14181C;
  border-top-color: #8B949D;
}
.theme-dark .ctrl-funnel-value { color: #E6E9EC; }
.theme-dark .ctrl-funnel-label { color: #8B949D; }
.theme-dark .ctrl-funnel-arrow { color: #5A646E; }

.theme-dark .ctrl-th-sortable:hover { color: #E1E4E7; }
.theme-dark .ctrl-th-sorted { color: #818CF8; }

.theme-dark .ctrl-rank-badge { color: #8B949D; background: #3A434C; }
.theme-dark .ctrl-cell-revenue { color: #4ADE80; }

/* ─── Controlling Responsive ──────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .ctrl-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ctrl-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ctrl-filter-row { flex-direction: column; align-items: stretch; }
  .ctrl-tab-bar { overflow-x: auto; }
  .ctrl-funnel { gap: 8px; }
  .ctrl-funnel-step { padding: 12px 16px; min-width: 60px; }
  .ctrl-funnel-value { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .ctrl-kpi-grid { grid-template-columns: 1fr; }
}

/* ─── Calendar View ────────────────────────────────────────────────────────── */

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.cal-current-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0 8px;
}
.cal-body { min-height: 400px; }

/* Month Grid */
.cal-grid-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg);
}
.cal-weekday {
  padding: 8px 4px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border);
}
.cal-weekday.cal-weekend { color: var(--text-tertiary); }
.cal-day {
  min-height: 100px;
  padding: 4px 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: default;
  transition: background 0.15s;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--surface-secondary); }
.cal-day.cal-other-month { opacity: 0.4; }
.cal-day.cal-today { background: rgba(47,111,208, 0.06); }
.cal-day.cal-today .cal-day-num {
  background: var(--primary);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-day-num {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: inline-block;
  margin-bottom: 2px;
}
.cal-day-events { display: flex; flex-direction: column; gap: 2px; }
.cal-event {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.68rem;
  line-height: 1.3;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cal-event:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.cal-ev-task {
  background: rgba(47,111,208, 0.12);
  color: var(--primary);
  border-left: 2px solid var(--primary);
}
.cal-ev-call {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-left: 2px solid #10B981;
}
.cal-ev-done { opacity: 0.5; text-decoration: line-through; }
.cal-ev-time {
  font-weight: 600;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.cal-ev-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev-more {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  padding: 1px 5px;
  cursor: pointer;
}
.cal-ev-more:hover { color: var(--primary); }

/* Week Grid */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-week-day {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  min-height: 200px;
  overflow: hidden;
}
.cal-week-day.cal-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cal-week-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border);
}
.cal-week-day-name { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.cal-week-day-num { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.cal-week-day-events { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-event-wide {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  flex-wrap: wrap;
  white-space: normal;
  position: relative;
}
.cal-ev-sub {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  display: block;
  margin-top: 1px;
}
.cal-ev-badge {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.cal-empty-hint {
  padding: 12px 8px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

/* Day View */
.cal-day-view {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cal-day-view-header {
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border);
}
.cal-day-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-tertiary);
}
.cal-day-event {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.cal-day-event:last-child { border-bottom: none; }
.cal-day-event:hover { background: var(--surface-secondary); }
.cal-day-event-main { display: flex; align-items: center; gap: 10px; }
.cal-day-event-time {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 50px;
}
.cal-day-event-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}
.cal-day-event-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  padding-left: 60px;
}
.cal-day-event.cal-ev-task { border-left: 3px solid var(--primary); }
.cal-day-event.cal-ev-call { border-left: 3px solid #10B981; }
.cal-day-event.cal-ev-done { opacity: 0.5; }

/* Calendar Responsive */
@media (max-width: 768px) {
  .cal-grid-month { font-size: 0.7rem; }
  .cal-day { min-height: 60px; padding: 2px 3px; }
  .cal-event { font-size: 0.6rem; padding: 1px 3px; }
  .cal-week-grid { grid-template-columns: 1fr; }
  .cal-week-day { min-height: auto; }
  .cal-day-event-meta { padding-left: 0; }
}

/* ─── Reports View ──────────────────────────────────────────────────────────── */

.reports-content { max-width: 900px; margin: 0 auto; }

.report-header {
  text-align: center;
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.report-company {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}
.report-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.report-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.report-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.report-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}
.report-kpi-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.report-pipeline-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.report-pipeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.report-pipeline-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.report-pipeline-stats {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.report-phase-row {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.report-phase-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.report-phase-name {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-phase-count {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.report-phase-bar-wrap {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.report-phase-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.report-phase-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}

/* Print styles for PDF export */
@media print {
  body { background: white !important; }
  .sidebar, .mobile-topbar, .topbar-actions, .sidebar-overlay,
  .view-header, #modal-backdrop { display: none !important; }
  .main-wrapper { margin: 0 !important; padding: 0 !important; }
  .page-content { padding: 0 !important; }
  .reports-content { max-width: 100%; }
  .report-header { padding-top: 0; }
  .report-kpi-card, .report-pipeline-card {
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
}

@media (max-width: 768px) {
  .report-kpi-row { grid-template-columns: 1fr; }
  .report-phase-row { grid-template-columns: 1fr; gap: 4px; }
  .report-phase-value { text-align: left; }
  .report-pipeline-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ─── Bestandskunden ───────────────────────────────────────────────────── */

/* Zaehler faelliger Wiedervorlagen am Menuepunkt. Die Sidebar ist in beiden
   Themes dunkel, deshalb reicht eine Variante. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 100px;
  background: #C8372D;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.wiedervorlage-faellig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(200,55,45,0.12);
  color: #A82D24;
  font-size: 0.78rem;
  font-weight: 700;
}

.wiedervorlage-faellig::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.theme-dark .wiedervorlage-faellig,
html.theme-dark .wiedervorlage-faellig {
  background: rgba(200,55,45,0.18);
  color: #F87171;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RUHE UND DICHTE — Abschlussschicht, 15.08.2026
   ---------------------------------------------------------------------------
   Diese Schicht steht bewusst am Dateiende: Sie hat dieselbe Spezifitaet wie
   der Bestand darueber und gewinnt allein durch ihre Stellung. So bleibt der
   gewachsene Code lesbar und die Festlegung an einer Stelle nachvollziehbar,
   statt in 159 Einzelregeln verstreut.

   Grundlage ist die Gestaltungsfestlegung in PRODUCT.md: kein Motiv, keine
   Metapher, kein Materialbezug — und Dichte vor Grosszuegigkeit.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. Zierrat abraeumen ────────────────────────────────────────────────────
   Alles, was hier steht, war Schmuck ohne Aussage. Ein Verlauf, der ueber die
   Ueberschrift wandert, sagt nichts ueber den Vorgang darunter; er kostet nur
   Lesbarkeit und Rechenzeit und laesst die Oberflaeche nach Vorlage aussehen.
   ────────────────────────────────────────────────────────────────────────── */

/* Der animierte Regenbogen auf jeder Seitenueberschrift. Eine Ueberschrift ist
   Text, kein Farbverlauf. */
.page-title,
.theme-dark .page-title {
  background: none !important;
  background-image: none !important;
  background-size: auto !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary) !important;
  animation: none !important;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* Das Willkommensbanner mit den schwebenden Farbkugeln. Es nahm auf dem
   Dashboard die oberste Zeile ein und trug keine einzige Arbeitsinformation. */
.dash-welcome-banner {
  display: none !important;
}
.dash-welcome-orb,
.dash-welcome-orb-1,
.dash-welcome-orb-2,
.dash-welcome-orb-3,
.dash-welcome-banner::after,
.dash-welcome-banner::before {
  display: none !important;
  animation: none !important;
}

/* Der pulsierende Lichtschein hinter jeder Seite. Bewegung im Hintergrund ist
   bei Listenarbeit eine Zumutung — sie zieht das Auge weg von der Zeile. */
.page-content::before,
.theme-dark .page-content::before {
  display: none !important;
  animation: none !important;
}

/* Verlaufsstreifen als Kartenkopf: auf Dialogen, Einstellungskacheln,
   Kontaktkarten und Vorgangskarten. Ein Rahmen genuegt. */
.modal-container::before,
.settings-card::before,
.contact-card::before,
.theme-dark .contact-card::before,
.deal-card::after {
  display: none !important;
}

/* Die Seitenleiste war ein dreistufiger Verlauf mit Weichzeichner. Jetzt eine
   flache Flaeche mit Kante — das ist auch beim Rollen ruhiger, weil kein
   backdrop-filter je Bild neu berechnet werden muss. */
.sidebar {
  background: var(--sidebar-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--sidebar-border);
}

/* Farbige Symbolkacheln in den Einstellungen. */
.settings-card-icon {
  background: var(--hover-bg) !important;
  color: var(--text-secondary) !important;
}


/* ─── 2. Schrift ──────────────────────────────────────────────────────────────
   Geist fuer den Text. Geist Mono ueberall dort, wo Werte in einer Spalte
   untereinander stehen und im Ueberfliegen verglichen werden: Rufnummern,
   Betraege, Datumsangaben, Postleitzahlen, Kennzahlen.
   ────────────────────────────────────────────────────────────────────────── */

body,
button,
input,
select,
textarea {
  font-family: var(--font);
}

/* Gleich breite Ziffern in jeder Tabelle — auch dort, wo der Text in Geist
   bleibt. Damit fluchten Spalten, ohne dass die Schrift wechselt. */
.data-table,
.data-table td,
.data-table th {
  font-variant-numeric: tabular-nums;
}

/* Echte Ziffernschrift fuer die Felder, die reine Werte sind. */
.cell-phone,
.cell-date,
.cell-value,
.cell-plz,
.deal-value,
.dash-kpi-value,
.kpi-value,
.column-count,
.pagination-info {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
  letter-spacing: -0.01em;
}

/* Spaltenueberschriften: klein, gesperrt, ruhig. Sie sind Wegweiser, nicht
   Inhalt, und duerfen deshalb nicht mit den Daten um Aufmerksamkeit ringen. */
.data-table thead th {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 7px 12px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}


/* ─── 3. Dichte ───────────────────────────────────────────────────────────────
   Der Kern der Festlegung. Vorher: 40px hohe Zeilen, 24/32px Seitenrand, 28px
   Ueberschrift. Auf einem 13-Zoll-Laptop passten damit rund 16 Betriebe auf den
   Schirm. Mit diesen Werten sind es etwa 24 — bei gleicher Lesbarkeit, weil
   nicht die Schrift kleiner wird, sondern die Luft drumherum weniger.
   ────────────────────────────────────────────────────────────────────────── */

.page-content {
  padding: 16px 20px;
}

.data-table tbody td {
  padding: 0 12px;
  height: var(--zeile-hoehe);
  font-size: 0.8125rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--border-light);
}

.data-table tbody tr {
  height: var(--zeile-hoehe);
}

/* Zeilen trennt eine Linie, kein Wechsel der Flaechenfarbe. Streifen erzeugen
   bei langen Listen ein Flimmern, das ueber Stunden ermuedet. */
.data-table tbody tr:nth-child(even) {
  background: transparent;
}

.data-table tbody tr:hover {
  background: var(--hover-bg);
}

/* Karten und Behaelter: flache Kante statt Schlagschatten. */
.card,
.dash-card,
.settings-card,
.contact-card,
.data-table-container,
.table-container {
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
}

.card:hover,
.dash-card:hover,
.settings-card:hover,
.contact-card:hover {
  box-shadow: none;
  border-color: var(--border-strong);
  transform: none;
}


/* ─── 4. Bedienelemente ───────────────────────────────────────────────────────
   Knoepfe und Felder werden flacher und niedriger. Der Akzent traegt genau
   eine Hauptaktion je Ansicht; alles andere ist neutral mit Kante.
   ────────────────────────────────────────────────────────────────────────── */

.btn,
.btn-primary,
.btn-secondary,
.btn-icon {
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0 12px;
  height: 30px;
  box-shadow: none;
  letter-spacing: 0;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-icon:hover {
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.btn-primary:hover {
  background: var(--primary-hover);
}
.theme-dark .btn-primary {
  color: #0D0F12;
  font-weight: 600;
}

.btn-secondary {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--border-strong);
}

.form-input,
.search-input,
.data-table-search,
select.form-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"] {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 0.8125rem;
  padding: 0 10px;
  height: 30px;
  box-shadow: none;
}

textarea.form-input {
  height: auto;
  padding: 8px 10px;
}

/* Ein Fokusring, der sichtbar ist, ohne die Zeile zu verschieben. Wer schnell
   arbeitet, bedient mit der Tastatur — dann muss jederzeit erkennbar sein,
   worauf eine Eingabe wirkt. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-icon:focus-visible,
.form-input:focus,
.search-input:focus,
.data-table-search:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
  box-shadow: none;
}


/* ─── 5. Zustandsanzeigen ─────────────────────────────────────────────────────
   Farbe erscheint nur hier. Ein Abzeichen bekommt keine Vollflaeche mehr,
   sondern eine getoente Flaeche mit farbiger Schrift — laut genug zum Finden,
   leise genug fuer acht Stunden.
   ────────────────────────────────────────────────────────────────────────── */

.badge,
.status-badge,
.label-chip,
.filter-chip,
.category-chip {
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 2px 7px;
  letter-spacing: 0.01em;
  box-shadow: none;
  border: 1px solid transparent;
}

/* Faellige Wiedervorlagen sind das einzige, was von selbst ins Auge springen
   darf — sie sind der naechste Anruf. */
.wiedervorlage-faellig {
  font-family: var(--font-mono);
  font-weight: 600;
}


/* ─── 6. Seitenleiste und Kopfzeile ───────────────────────────────────────── */

.nav-item,
.nav-pipeline {
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0 10px;
  height: 30px;
  transition: background var(--duration-fast) var(--ease-out);
}

.nav-item:hover,
.nav-pipeline:hover {
  background: var(--hover-bg);
  color: var(--sidebar-text-hover);
  transform: none;
}

.nav-item.active,
.nav-pipeline.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  box-shadow: none;
}

/* Der Aktivbalken war ein Verlauf mit Leuchten. Eine Linie reicht. */
.nav-item.active::before,
.nav-pipeline.active::before,
.nav-item.active::after,
.nav-pipeline.active::after {
  background: var(--primary) !important;
  box-shadow: none !important;
  filter: none !important;
}


/* ─── 7. Bewegung zurueckfahren ───────────────────────────────────────────────
   In einem Werkzeug ist jede Animation Wartezeit. Was bleibt, ist der kurze
   Farbwechsel bei Ueberfahren und Fokus. Wer Bewegung im System abgestellt
   hat, bekommt gar keine.
   ────────────────────────────────────────────────────────────────────────── */

/* ACHTUNG, hier steckte eine Falle: Die Kacheln stehen im Markup auf
   `opacity: 0` und werden erst durch die Einblend-Animation sichtbar
   ("stagger-item"). Ein blankes `animation: none` nimmt ihnen die Animation —
   und damit bleiben sie fuer immer unsichtbar. Das Dashboard war dadurch
   komplett leer.

   Richtig ist deshalb: die Animation abschalten UND gleichzeitig den
   Endzustand von Hand setzen. Sichtbarkeit darf nie von einer Animation
   abhaengen. */
.stagger-item,
.dash-kpi-card,
.dash-card,
.deal-card,
.contact-card,
.settings-card,
.data-table tbody tr {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@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;
  }
}


/* ─── 8. Handy ────────────────────────────────────────────────────────────────
   Abends wird vom Sofa aus nachgesehen, wer morgen faellig ist. Auf schmalen
   Schirmen darf die Zeile hoeher werden — dort zaehlt die Treffsicherheit des
   Daumens mehr als die Anzahl sichtbarer Zeilen.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-content {
    padding: 12px 12px;
  }
  .data-table tbody td,
  .data-table tbody tr {
    height: 42px;
  }
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-icon,
  .nav-item,
  .nav-pipeline {
    height: 38px;
  }
  .form-input,
  .search-input,
  .data-table-search {
    height: 38px;
    font-size: 16px; /* verhindert das Hineinzoomen von iOS beim Antippen */
  }
}


/* ─── 9. Dashboard ────────────────────────────────────────────────────────────
   Die Kennzahlkacheln waren ueber `nth-child` eingefaerbt — die erste violett,
   die zweite indigo, und so fort. Eine Farbe, die aus der Position folgt,
   bedeutet nichts. Sie ist jetzt neutral; die Ausnahme setzt views/dashboard.js
   ueber die Klasse `dash-kpi-card--signal`, und zwar nur, wenn tatsaechlich
   Wiedervorlagen faellig sind.
   ────────────────────────────────────────────────────────────────────────── */

.dash-kpi-card,
.dash-kpi-card:nth-child(1),
.dash-kpi-card:nth-child(2),
.dash-kpi-card:nth-child(3),
.dash-kpi-card:nth-child(4),
.dash-kpi-card:nth-child(5),
.dash-kpi-card:nth-child(6),
.theme-dark .dash-kpi-card,
.theme-dark .dash-kpi-card:nth-child(1) {
  background: var(--card-bg) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none !important;
  padding: 12px 14px;
}

/* Die farbigen Kanten und Leuchtstreifen an den Kacheln. */
.dash-kpi-card::before,
.dash-kpi-card:nth-child(1)::before,
.dash-kpi-card::after {
  display: none !important;
}

.dash-kpi-card:hover,
.dash-kpi-card:nth-child(1):hover {
  background: var(--card-bg) !important;
  border-color: var(--border-strong);
  transform: none !important;
  box-shadow: none !important;
}

/* Die eine Kachel, die etwas verlangt. */
.dash-kpi-card--signal {
  border-color: var(--danger) !important;
}
.dash-kpi-card--signal .dash-kpi-value {
  color: var(--danger);
}

/* Die Zahl ist der Inhalt der Kachel — sie bekommt die Ziffernschrift und das
   meiste Gewicht, die Beschriftung darunter tritt zurueck. */
.dash-kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.dash-kpi-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.dash-kpi-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

/* Die kleinen Informationsknoepfe sassen als gefuellte Kreise neben jeder Zahl
   und zogen mehr Aufmerksamkeit auf sich als die Zahl selbst. */
.dash-info-btn,
.dash-card-info,
.kpi-info-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  opacity: 0.5;
}
.dash-info-btn:hover,
.dash-card-info:hover,
.kpi-info-btn:hover {
  opacity: 1;
  color: var(--text-secondary) !important;
}

/* Diagrammbalken folgen dem Akzent statt einem eigenen Blau. */
.dash-chart-bar {
  background: var(--primary) !important;
  border-radius: 2px;
}
.dash-chart-bar:hover {
  background: var(--primary-hover) !important;
}

/* Karten des Dashboards: enger, flacher. */
.dash-card {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
}
.dash-card-title,
.dash-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* Zahlen in den Auswertungen ebenfalls in einer Flucht. */
.dash-source-row,
.dash-legend-item,
.dash-chart-label,
.dash-bar-value,
.dash-stat-value {
  font-variant-numeric: tabular-nums;
}

/* Die positionsabhaengigen Einfaerbungen sitzen als `.theme-dark
   .dash-kpi-card:nth-child(n)` im Bestand und sind ebenfalls `!important`.
   Bei gleichem Gewicht entscheidet die Spezifitaet, und ihre ist hoeher als
   meine allgemeine Regel. Deshalb hier noch einmal Stelle fuer Stelle mit
   `html` davor — damit gewinnt die Festlegung eindeutig, in beiden Ansichten. */
html .dash-kpi-card:nth-child(1),
html .dash-kpi-card:nth-child(2),
html .dash-kpi-card:nth-child(3),
html .dash-kpi-card:nth-child(4),
html .dash-kpi-card:nth-child(5),
html .dash-kpi-card:nth-child(6),
html.theme-dark .dash-kpi-card:nth-child(1),
html.theme-dark .dash-kpi-card:nth-child(2),
html.theme-dark .dash-kpi-card:nth-child(3),
html.theme-dark .dash-kpi-card:nth-child(4),
html.theme-dark .dash-kpi-card:nth-child(5),
html.theme-dark .dash-kpi-card:nth-child(6),
body.theme-dark .dash-kpi-card:nth-child(1),
body.theme-dark .dash-kpi-card:nth-child(2),
body.theme-dark .dash-kpi-card:nth-child(3),
body.theme-dark .dash-kpi-card:nth-child(4),
body.theme-dark .dash-kpi-card:nth-child(5),
body.theme-dark .dash-kpi-card:nth-child(6) {
  background: var(--card-bg) !important;
  background-image: none !important;
  border-color: var(--border) !important;
}

html .dash-kpi-card--signal,
html.theme-dark .dash-kpi-card--signal,
body.theme-dark .dash-kpi-card--signal {
  border-color: var(--danger) !important;
}

/* Der Balken im Verlaufsdiagramm trug einen eigenen Farbverlauf. */
html .dash-chart-bar,
html.theme-dark .dash-chart-bar {
  background: var(--primary) !important;
  background-image: none !important;
  border-radius: 2px !important;
}


/* ─── 10. Vorgangskarten im Board ─────────────────────────────────────────────
   Der Betrag stand im Akzentblau. Ein Geldbetrag ist aber kein Zustand — er
   sagt nicht "hier ist etwas zu tun", er ist einfach eine Zahl. Nach der
   Festlegung gehoert ihm deshalb kein Akzent, sondern die Ziffernschrift: Damit
   fluchten die Betraege ueber alle Karten einer Spalte und lassen sich beim
   Ueberfliegen vergleichen, was vorher nicht ging.
   ────────────────────────────────────────────────────────────────────────── */

.card-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.card-ad-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* Das Kuerzel des Bearbeiters war indigo eingefaerbt — ein Rest der alten
   Palette. Wer zustaendig ist, ist eine Zuordnung, kein Alarm. */
.card-assigned-badge,
.theme-dark .card-assigned-badge {
  background: var(--hover-bg);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  border: 1px solid var(--border);
  box-shadow: none;
}

.deal-card {
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: none;
  border: 1px solid var(--border);
}
.deal-card:hover {
  border-color: var(--border-strong);
  box-shadow: none;
  transform: none;
}

/* Spaltenkopf: Der Phasenname behaelt seine Farbe — die Phase ist die
   Ordnung des Boards und darf sich abheben. Die Summe daneben tritt in die
   Ziffernschrift zurueck. */
.column-count,
.column-sum,
.phase-sum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. KOPFLEISTE — Schrift an die Tokens haengen
   ---------------------------------------------------------------------------
   Bis hierher war die Leiste in BEIDEN Ansichten dunkel. Deshalb konnte man
   ihre Schriftfarben gefahrlos als `rgba(255,255,255,...)` hart hinschreiben —
   32 Regeln tun das.

   Mit der neuen Festlegung ist die helle Ansicht kein abgedunkelter Sonderfall
   mehr, sondern gleichwertig: Die Leiste ist dort eine Stufe dunkler als die
   Seite, aber hell. Damit stand die weisse Schrift auf hellem Grund — praktisch
   unlesbar.

   Statt in 32 Regeln einzeln zu schrauben, sind die Farben hier geschlossen auf
   die Seitenleisten-Tokens umgestellt. Die passen sich beiden Ansichten an, und
   der naechste Ansichtswechsel bricht nichts mehr.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Schrift ─────────────────────────────────────────────────────────────── */

.nav-item,
.nav-pipeline,
.nav-item.nav-item-sub,
.topbar-nav-btn,
.sidebar-legal a,
.topbar-melden {
  color: var(--sidebar-text) !important;
}

.nav-item:hover,
.nav-pipeline:hover,
.nav-item.nav-item-sub:hover,
.topbar-nav-btn:hover,
.sidebar-legal a:hover,
.topbar-melden:hover,
.sidebar-action-btn:hover,
.sidebar-logout-btn:hover {
  color: var(--sidebar-text-hover) !important;
}

.sidebar-user-name,
.sidebar-logo .text-lg {
  color: var(--sidebar-text-hover) !important;
}

.sidebar-legal,
.sidebar-logout-btn,
.sidebar-action-btn {
  color: var(--text-muted) !important;
}

/* ─── Flaechen und Kanten ─────────────────────────────────────────────────── */

.sidebar,
html.theme-dark .sidebar,
.sidebar-logo,
.sidebar-footer,
.mobile-topbar,
.topbar-actions {
  border-color: var(--sidebar-border) !important;
}

.nav-item:hover,
.nav-pipeline:hover,
.nav-item.nav-item-sub:hover,
.topbar-nav-btn:hover,
.topbar-user-badge:hover,
.mobile-topbar-btn:active,
.sidebar-collapse-btn:hover,
.theme-dark .sidebar-collapse-btn:hover {
  background: var(--hover-bg) !important;
}

.sidebar-collapse-btn,
.theme-dark .sidebar-collapse-btn,
.topbar-user-badge,
.sidebar-action-btn {
  background: var(--hover-bg) !important;
  border-color: var(--sidebar-border) !important;
}

.topbar-user-badge {
  color: var(--sidebar-text) !important;
}

.topbar-melden {
  border-color: var(--sidebar-border) !important;
  background: transparent !important;
}
.topbar-melden:hover {
  border-color: var(--border-strong) !important;
  background: var(--hover-bg) !important;
}
.topbar-melden:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 1px;
}

/* Die aktive Seite bleibt am Akzent erkennbar — das ist ein Zustand. */
.nav-item.active,
.nav-pipeline.active,
.nav-item.active:hover,
.nav-pipeline.active:hover {
  color: var(--sidebar-active-text) !important;
  background: var(--sidebar-active-bg) !important;
}

/* Die Logo-Kachel trug in beiden Ansichten volles Akzentblau. In der hellen
   Leiste ist das der einzige grelle Fleck; sie bekommt denselben Akzent, aber
   ohne Leuchten. */
.sidebar-logo svg rect:first-child {
  fill: var(--primary);
}
.sidebar-avatar,
.header-avatar {
  background: var(--primary) !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. SCHMALE SCHIRME
   ---------------------------------------------------------------------------
   Auf dem Handy stand die Kontakttabelle mit fuenfzehn Spalten in 390 Punkten
   Breite. Jede Spalte war auf drei Zeichen gestaucht. Zwei Aenderungen:

   1. Die Kartenansicht ist dort die Voreinstellung (public/views/contacts.js).
   2. Wer die Tabelle trotzdem waehlt, bekommt sie in voller Spaltenbreite mit
      eigener Rollflaeche — lieber seitlich schieben als raten.

   Wichtig ist dabei, dass NUR die Tabelle rollt, nicht die Seite: Eine Seite,
   die sich als Ganzes seitlich schieben laesst, verliert beim Rollen die
   Kopfleiste und fuehlt sich kaputt an.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .data-table-container,
  .table-container,
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .data-table {
    min-width: 780px;
  }

  /* Der Firmenname bleibt beim seitlichen Schieben stehen — sonst weiss man
     nach zwei Spalten nicht mehr, wessen Rufnummer man gerade liest. */
  .data-table thead th:nth-child(2),
  .data-table tbody td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg);
  }
  .data-table tbody tr:hover td:nth-child(2) {
    background: var(--raised-bg);
  }

  /* Die Hauptaktion war ein bildschirmbreiter Farbblock. Auf dem Handy soll sie
     erkennbar sein, aber nicht die halbe erste Bildhoehe fuellen. */
  .page-header .btn-primary,
  .view-actions .btn-primary {
    width: auto;
    background-image: none;
  }

  /* Die Werkzeugleiste lief ueber drei Zeilen, bevor die erste Firma zu sehen
     war. Enger gesetzt bleibt oberhalb der Liste nur eine Zeile. */
  .page-header,
  .view-actions,
  .table-toolbar {
    gap: var(--raum-2);
  }

  .page-title {
    font-size: 1.125rem;
  }

  /* Filterreihen laufen seitlich weiter, statt umzubrechen und die halbe Seite
     zu belegen. */
  .kontakt-branchenleiste,
  .filter-chip-row,
  .branche-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kontakt-branchenleiste::-webkit-scrollbar,
  .filter-chip-row::-webkit-scrollbar,
  .branche-chips::-webkit-scrollbar {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. LETZTE VERLAEUFE
   ---------------------------------------------------------------------------
   Die Datei enthaelt 77 Farbverlaeufe. Die meisten sitzen auf Zierrat, der
   oben schon abgeschaltet ist. Uebrig bleiben die, die auf Bedienelementen
   liegen: der Hauptknopf, die Kontaktkachel, Abzeichen.

   Sie sind hier einzeln benannt und nicht pauschal ueber `*` erschlagen —
   ein pauschales Verbot wuerde auch die Fortschrittsbalken und die
   gestapelten Phasenbalken im Dashboard treffen, wo der Verlauf Daten
   darstellt und keine Zierde ist.

   Technischer Hinweis: Die Verlaeufe stehen als `background-image`. Eine
   Kurzschreibweise `background: <farbe>` setzt zwar theoretisch alle
   Teil-Eigenschaften zurueck — hier steht die Verlaufsregel aber SPAETER in
   der Datei und gewinnt damit. Deshalb wird `background-image` ausdruecklich
   auf `none` gesetzt.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn,
.btn-primary,
.btn-secondary,
.btn-icon,
.view-toggle-btn,
.contact-card-avatar,
.card-avatar,
.status-badge,
.label-chip,
.filter-chip,
.category-chip,
.badge {
  background-image: none !important;
}

.btn-primary {
  background-color: var(--primary) !important;
}
.btn-primary:hover {
  background-color: var(--primary-hover) !important;
}

/* Die Kachel mit den Initialen war ein dreifarbiger Verlauf mit abgerundeten
   14 Punkten. Sie steht neben jedem Kontakt und war damit das farbigste
   Element einer Liste, in der es um Rufnummern geht. */
.contact-card-avatar,
.card-avatar {
  background-color: var(--hover-bg) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: none !important;
}

/* Abzeichen: getoente Flaeche mit farbiger Schrift statt Vollfarbe. Der Text
   bleibt lesbar, das Signal bleibt erkennbar, und eine Liste mit dreissig
   Zeilen leuchtet nicht mehr wie ein Adventskalender. */
.status-badge,
.label-chip {
  background-color: var(--hover-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  text-shadow: none;
}

/* Der Umschalter Tabelle/Karten war eine eigene graue Wanne mit Schatten. */
.view-toggle,
.view-toggle-group {
  background: transparent !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none !important;
  padding: 1px;
}
.view-toggle-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  border-radius: 3px;
}
.view-toggle-btn.active {
  background: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. HANDY — WEG ZUR ERSTEN ZEILE
   ---------------------------------------------------------------------------
   Gemessen auf 390 x 844: Die erste Kontaktkarte begann bei 624 Punkten. Drei
   Viertel der ersten Bildhoehe waren Bedienleiste — Titel, Umschalter, drei
   Knoepfe, Auswahlfeld, Kategorienreihe, zwei Kennzahlkacheln, Suche, PLZ.
   Wer abends nachsehen will, wen er morgen anruft, scrollt erst an alldem
   vorbei.

   Die Kennzahlen ("Gesamt", "Diese Woche") stehen bereits als Zahl neben der
   Ueberschrift ("12 Kontakte"). Auf dem Handy sind sie deshalb doppelt und
   entfallen; am Rechner bleiben sie stehen, dort kosten sie keinen Platz.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Doppelt vergebene Information — die Zahl steht schon im Kopf. */
  .contacts-stats-bar {
    display: none;
  }

  /* Der Kopf lief ueber vier Zeilen. Jetzt: Titel in einer Zeile, darunter
     die Knoepfe nebeneinander in einer zweiten. */
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--raum-2);
    column-gap: var(--raum-2);
    padding-bottom: var(--raum-2);
  }

  .page-header .btn,
  .page-header .btn-primary,
  .page-header .btn-secondary,
  .page-header .btn-icon {
    width: auto;
    flex: 0 0 auto;
    padding: 0 12px;
  }

  /* Import und Export sind Verwaltungsaufgaben, keine Telefonarbeit. Sie
     bleiben erreichbar, treten aber hinter die Hauptaktion zurueck. */
  .page-header .btn-secondary {
    font-size: 0.75rem;
    padding: 0 10px;
  }

  /* Suchfeld und PLZ nebeneinander statt untereinander — beide werden beim
     Suchen ohnehin zusammen benutzt. */
  .kontakt-filterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
    align-items: center;
  }
  .kontakt-filterleiste .kf-suche {
    flex: 1 1 100%;
  }

  /* Kontaktkarten enger stapeln. */
  .contact-card {
    padding: 8px 10px;
    border-radius: var(--radius-md);
  }
}

/* Der Umbruch entsteht nicht durch die Breite der Knoepfe, sondern durch
   `flex-basis: 100%` am Hauptknopf und eine volle Breite am Umschalter — beide
   erzwingen eine eigene Zeile. Genau dort ansetzen, mit ausreichendem Gewicht. */
@media (max-width: 768px) {
  .page-header .page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2);
    width: 100%;
  }
  .page-header .page-actions > .btn,
  .page-header .page-actions > .btn-primary,
  .page-header .page-actions > .btn-secondary,
  .page-header .page-actions > .btn-icon {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: auto !important;
  }
  .page-header .page-actions > .view-toggle {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. HOEHE UND INNENABSTAND VON EINGABEFELDERN — Korrektur 15.08.2026
   ---------------------------------------------------------------------------
   Gemeldeter Fehler: Unter „Leads finden" war im Auswahlfeld „Stadt" der Text
   („Berlin") unten abgeschnitten — nur die obere Haelfte der Buchstaben war
   zu sehen.

   Ursache, und sie war hausgemacht: Abschnitt 4 dieser Datei setzt fuer
   Eingabefelder `height: 30px` und `padding: 0 10px`. Die Hoehe hat sich
   durchgesetzt, der Innenabstand nicht — im Bestand steht eine spezifischere
   Regel mit `padding: 8px 12px`. Ergebnis bei `box-sizing: border-box`:
   16 Punkte Innenabstand oben und unten in einem 30 Punkte hohen Kasten. Fuer
   die Schrift blieben 14 Punkte, sie braucht rund 16 — der Rest lief unten aus
   dem Feld heraus.

   Das ist kein Einzelfall, sondern eine Fehlerklasse: Sobald irgendwo eine
   feste Hoehe und ein woanders gesetzter senkrechter Innenabstand
   aufeinandertreffen, schneidet der Kasten den Text ab. Deshalb wird der
   senkrechte Innenabstand hier fuer alle einzeiligen Felder ueber die
   Langform und mit `!important` auf null gezwungen: Eine Langform
   (`padding-top`) schlaegt eine Kurzform (`padding`) unabhaengig von der
   Spezifitaet, und der waagerechte Abstand bleibt unangetastet.

   Senkrecht zentriert wird ueber `line-height`, nicht ueber Innenabstand —
   damit haengt die Darstellung an genau einem Wert und kann nicht mehr
   auseinanderlaufen.

   Mehrzeilige Felder (textarea) sind ausgenommen: Dort ist senkrechter
   Innenabstand richtig, und eine feste Zeilenhoehe waere falsch.
   ═══════════════════════════════════════════════════════════════════════════ */

.form-input,
select.form-input,
.search-input,
.data-table-search,
.kf-eingabe,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select {
  height: 30px;
  min-height: 30px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 28px; /* 30 minus 2 x 1 Punkt Rahmen */
}

/* Mehrzeilige Felder wachsen mit dem Inhalt und brauchen ihren Abstand. */
textarea,
textarea.form-input {
  height: auto;
  min-height: 64px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.45;
}

/* Auswahlfelder brauchen rechts Platz fuer das Dreieck, sonst laeuft ein
   langer Eintrag darunter. */
select,
select.form-input {
  padding-right: 28px !important;
}

/* Am Handy sind die Felder hoeher (Daumen) — dort muss die Zeilenhoehe
   mitwachsen, sonst steht der Text wieder nicht in der Mitte. */
@media (max-width: 768px) {
  .form-input,
  select.form-input,
  .search-input,
  .data-table-search,
  .kf-eingabe,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  select {
    height: 38px;
    min-height: 38px;
    line-height: 36px;
  }
  textarea,
  textarea.form-input {
    height: auto;
    line-height: 1.45;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. HINWEISFELDER AUF DEM DASHBOARD — Korrektur 15.08.2026
   ---------------------------------------------------------------------------
   Gemeldeter Fehler: Beim Ueberfahren von „Kontaktvorrat", „Anrufe heute" und
   den uebrigen Kennzahlen blieb nur noch ein weisser Kasten stehen.

   Ursache: Das Hinweisfeld legte sich ueber die Kachel, zu der es gehoert —
   Zahl und Beschriftung verschwanden dahinter, sichtbar blieb der weisse Rest
   der Kachel. Die Positionierung ist in views/dashboard.js berichtigt (dort
   steht die ausfuehrliche Erklaerung); hier folgt das Aussehen nach.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Der Zeiger zeigte auf die Stelle, an der das Feld frueher hing. Da es jetzt
   unter der ganzen Kachel sitzt und waagerecht mitwandert, zeigte er ins
   Leere. Ohne Zeiger ist die Zuordnung ueber die Naehe eindeutig genug. */
.dash-info-tooltip::after,
.dash-info-tooltip::before {
  display: none !important;
}

.dash-info-tooltip {
  border-radius: var(--radius-md) !important;
  padding: 8px 11px !important;
  font-size: 0.75rem !important;
  background: #14181C !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
  border: none !important;
}
/* In der dunklen Ansicht muss sich das Feld VOM Grund abheben, nicht in ihm
   verschwinden — deshalb heller als die Seite, nicht dunkler. */
.theme-dark .dash-info-tooltip,
html.theme-dark .dash-info-tooltip {
  background: #3A434C !important;
  color: #F2F4F6 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

/* Der kleine Knopf wurde beim Ueberfahren zu einem gefuellten blauen Kreis und
   wuchs um ein Zehntel. Er erklaert nur etwas — er ist keine Handlung und
   braucht weder Signalfarbe noch Bewegung. */
.dash-info-btn:hover,
.dash-card-info:hover,
.kpi-info-btn:hover {
  background: var(--hover-bg) !important;
  border: none !important;
  color: var(--text-secondary) !important;
  transform: none !important;
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. WEISSE KENNZAHLKACHELN BEIM UEBERFAHREN — Korrektur 15.08.2026
   ---------------------------------------------------------------------------
   Gemeldeter Fehler: Faehrt man mit der Maus ueber „Kontaktvorrat", „Anrufe
   heute" und die uebrigen Kacheln, bleibt nur ein weisser Kasten stehen.

   Ursache — und sie ist ein Lehrstueck: Im Bestand stehen fuenf Regeln der Form

       .dash-kpi-card:nth-child(1):hover * { color: white !important; }

   also fuer die Kacheln 1 bis 5. Das war stimmig, SOLANGE die Kachel beim
   Ueberfahren zu einem gefuellten farbigen Block wurde: dunkler Grund, weisse
   Schrift. Beim Redesign habe ich die Fuellung entfernt (Abschnitt 9) — die
   Kachel bleibt jetzt weiss. Die weisse Schrift blieb stehen. Ergebnis:
   weiss auf weiss, die Kachel wirkt leer.

   Die Lehre daraus steht auch in DESIGN.md: Wer eine Flaechenfarbe aendert,
   muss die zugehoerige Schriftfarbe mitaendern. Ein `* { color: … }` mit
   `!important` faerbt ausnahmslos jedes Element darunter und ist deshalb
   besonders heimtueckisch — es haelt sich an keine Tokens und faellt erst auf,
   wenn jemand mit der Maus darueberfaehrt.

   Behoben wird hier fuer alle sechs Kacheln gleich, damit nicht die sechste
   spaeter aus der Reihe faellt. Die Schrift folgt wieder den Tokens, also auch
   der hellen und der dunklen Ansicht.
   ═══════════════════════════════════════════════════════════════════════════ */

.dash-kpi-card:hover,
.dash-kpi-card:nth-child(1):hover,
.dash-kpi-card:nth-child(2):hover,
.dash-kpi-card:nth-child(3):hover,
.dash-kpi-card:nth-child(4):hover,
.dash-kpi-card:nth-child(5):hover,
.dash-kpi-card:nth-child(6):hover {
  color: var(--text-primary) !important;
}

/* Die pauschale Einfaerbung aller Nachfahren zuruecknehmen. Der Aufbau muss
   dem der Bestandsregel entsprechen (`:hover *`), sonst greift sie nicht. */
.dash-kpi-card:nth-child(1):hover *,
.dash-kpi-card:nth-child(2):hover *,
.dash-kpi-card:nth-child(3):hover *,
.dash-kpi-card:nth-child(4):hover *,
.dash-kpi-card:nth-child(5):hover *,
.dash-kpi-card:nth-child(6):hover * {
  color: inherit !important;
}

/* Die einzelnen Bestandteile holen sich danach wieder ihre eigene Farbe. */
.dash-kpi-card:hover .dash-kpi-value {
  color: var(--text-primary) !important;
}
.dash-kpi-card:hover .dash-kpi-label {
  color: var(--text-secondary) !important;
}
.dash-kpi-card:hover .dash-kpi-icon {
  background: var(--hover-bg) !important;
  color: var(--text-secondary) !important;
}
.dash-kpi-card:hover .dash-info-btn {
  color: var(--text-muted) !important;
}

/* Die Ausnahme bleibt die Ausnahme: Sind Wiedervorlagen faellig, behaelt die
   Zahl ihr Rot — auch beim Ueberfahren. */
.dash-kpi-card--signal:hover .dash-kpi-value,
.dash-kpi-card--signal .dash-kpi-value {
  color: var(--danger) !important;
}

/* Der Hinweisknopf war mir zu laut geraten, also hatte ich ihn auf die
   blasseste Textfarbe gesetzt UND zusaetzlich auf halbe Deckkraft. Beides
   zusammen ergab 3,1:1 gegen den Kartengrund — unter dem Mindestwert von
   4,5:1 fuer Text dieser Groesse. Zurueckhaltung darf nicht bis zur
   Unlesbarkeit gehen: Jetzt ohne Deckkraftminderung und eine Stufe kraeftiger
   (rund 5,9:1 in beiden Ansichten). */
.dash-info-btn,
.dash-card-info,
.kpi-info-btn {
  color: var(--text-secondary) !important;
  opacity: 1;
}
.dash-info-btn:hover,
.dash-card-info:hover,
.kpi-info-btn:hover,
.dash-kpi-card:hover .dash-info-btn {
  color: var(--text-primary) !important;
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. LESBARKEIT — vollstaendige Durchsicht 15.08.2026
   ---------------------------------------------------------------------------
   Anlass war der weisse Kasten auf den Kennzahlkacheln. Bei der daraufhin
   angeordneten kompletten Durchsicht wurde jede Ansicht in beiden Designs
   maschinell auf Kontrast geprueft — im Ruhezustand und beim Ueberfahren.
   Was hier steht, sind die Funde.

   Massstab ist WCAG AA: 4,5:1 fuer normalen Text, 3:1 fuer grossen. Das ist
   kein Selbstzweck. Gearbeitet wird acht Stunden am Stueck, abends und im
   Buero bei Tageslicht auf demselben Geraet — Text, der bei 3:1 gerade noch
   geht, ist nach der vierten Stunde anstrengend.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 18.1 Der schlimmste Fund: 1,16:1 ────────────────────────────────────────
   Der aktive Unterpunkt in der Kopfleiste („VP-Pipeline") stand auf
   `color: white !important`. Das war richtig, als die Leiste immer dunkel war.
   Seit die helle Ansicht eine helle Leiste hat, ist es weiss auf #ECEEF0 —
   1,16:1, also praktisch unsichtbar. Der Eintrag war nur noch am blauen
   Hintergrund zu erahnen.

   Die Bestandsregel hat drei Klassen und schlaegt damit die allgemeine Regel
   aus Abschnitt 11. Deshalb hier mit demselben Aufbau. */
.nav-item.nav-item-sub.active,
.nav-item.nav-item-sub.active:hover {
  color: var(--sidebar-active-text) !important;
  background: var(--sidebar-active-bg) !important;
}

/* ─── 18.2 Weisse Schrift auf dem Akzent ──────────────────────────────────────
   In der dunklen Ansicht ist der Akzent aufgehellt (#5C9AE8), damit er auf
   dunklem Grund ueberhaupt wirkt. Weisse Schrift darauf ergibt nur 2,9:1.
   Betroffen waren das Namenskuerzel oben rechts und der Sprunglink „Zum Inhalt
   springen". Auf einer hellen Flaeche gehoert dunkle Schrift — dieselbe Regel
   gilt bereits fuer den Hauptknopf. */
.theme-dark .header-avatar,
.theme-dark .sidebar-avatar,
.theme-dark .skip-to-content,
html.theme-dark .header-avatar,
html.theme-dark .sidebar-avatar,
html.theme-dark .skip-to-content {
  color: #0D0F12 !important;
  font-weight: 600;
}

/* ─── 18.3 Die blasseste Textfarbe war zu blass ───────────────────────────────
   `--text-muted` traegt nicht nur Beiwerk, sondern echten Fliesstext: „Keine
   offenen Tasks", die Erklaerung ueber der Leadsuche, „8 Vorgaenge · 18.250 €",
   die Beschreibungen der Einstellungskacheln. Mit 3,08:1 (hell) und 3,57:1
   (dunkel) lag es unter dem Mindestwert.

   Angehoben auf rund 5,3:1 gegen die Karte und 4,8:1 gegen den Seitengrund.
   Die Farbe bleibt deutlich hinter --text-secondary zurueck, die Abstufung
   ist also erhalten — sie ist nur nicht mehr grenzwertig. */
:root {
  --text-muted: #646D76;
}
.theme-dark {
  --text-muted: #8A939D;
}

/* ─── 18.4 Hartkodierte Graustufen ────────────────────────────────────────────
   #9CA3AF und #6B7280 stammen aus der Tailwind-Palette und stehen als feste
   Werte im Javascript — sie folgen keinem Token und werden in der dunklen
   Ansicht nicht heller. „Keine Eintraege gefunden" kam so auf 2,54:1.
   Die Fundstellen sind in den Views auf Tokens umgestellt; diese Regel faengt
   ab, was ueber Komponenten noch nachkommt. */
.data-table td[style*="9ca3af"],
.data-table td[style*="9CA3AF"],
[style*="color:#9ca3af"],
[style*="color: #9ca3af"],
[style*="color:#6b7280"],
[style*="color: #6b7280"] {
  color: var(--text-muted) !important;
}

/* ─── 18.5 Abgeschnittene Zeichen ─────────────────────────────────────────────
   Die Kennzahl stand mit Zeilenhoehe 1,1 in ihrem Kasten — bei 24 Punkten
   Schriftgroesse fehlten zwei Punkte, die Unterlaengen wurden gekappt. Die
   Lupe im Suchfeld ebenso. */
.dash-kpi-value {
  line-height: 1.25;
}
.kf-lupe {
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ─── 18.6 Abzeichen mit Farbe, die trotzdem lesbar bleiben ───────────────────
   Zwei Abzeichen trugen ihre Farbe als SCHRIFTfarbe: „→ In Pipeline" mit einem
   festen Blau aus der alten Palette, und das Phasen-Abzeichen mit der frei
   waehlbaren Phasenfarbe. Beide lagen bei 3,68:1.

   Beim Phasen-Abzeichen half kein anderer Farbwert: Die Phasenfarben stellt
   der Benutzer selbst ein, er kann jederzeit ein helles Gelb waehlen. Farbe,
   die als Schrift getragen wird, ist deshalb grundsaetzlich unzuverlaessig.
   Sie wandert an einen Punkt davor — dort erfuellt sie ihren Zweck (Phasen
   auseinanderhalten), waehrend die Beschriftung immer lesbar bleibt. */

.badge-phase {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--hover-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.badge-phase-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-in-pipeline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 500;
}
/* In der hellen Ansicht ist der Akzent hell genug fuer Weiss, aber zu hell als
   Schrift auf der getoenten Flaeche — deshalb eine Stufe dunkler. */
.badge-in-pipeline {
  color: var(--primary-hover);
}
.theme-dark .badge-in-pipeline {
  color: var(--primary);
}

/* Das Namenskuerzel lag mit 4,47:1 knapp unter dem Mindestwert. */
.header-avatar,
.sidebar-avatar,
.card-assigned-badge {
  font-weight: 700;
}

/* ─── 18.7 Schrift auf der Akzentflaeche ──────────────────────────────────────
   Wiederkehrendes Muster, dreimal gefunden: weisse Schrift auf einer mit
   `--primary` gefuellten Flaeche. In der hellen Ansicht geht das auf (#2F6FD0
   traegt Weiss mit 4,9:1). In der dunklen ist der Akzent absichtlich
   aufgehellt (#5C9AE8), damit er auf dunklem Grund ueberhaupt wirkt — und dann
   ergibt Weiss darauf nur 2,9:1.

   Betroffen waren der Hauptknopf, das Namenskuerzel, der Sprunglink und die
   Filterknoepfe der Aufgabenliste. Statt jede Stelle einzeln zu flicken, gibt
   es jetzt ein Token dafuer. Wer kuenftig eine Flaeche mit `--primary` fuellt,
   nimmt `--auf-akzent` fuer die Schrift und muss nicht daran denken, dass die
   dunkle Ansicht anders liegt. */
:root {
  --auf-akzent: #FFFFFF;
}
.theme-dark {
  --auf-akzent: #0D0F12;
}

.btn-primary,
.theme-dark .btn-primary,
.header-avatar,
.sidebar-avatar,
.skip-to-content,
.task-filter-pill.active,
[style*="background:var(--primary)"],
[style*="background: var(--primary)"] {
  color: var(--auf-akzent) !important;
}

/* NICHT hier hinein gehoert der Zeitraum-Knopf des Dashboards: Er ist beim
   Aktivsein nicht mit dem Akzent GEFUELLT, sondern nur getoent
   (`--primary-light`). Auf einer getoenten Flaeche waere die Schrift fuer die
   Akzentflaeche falsch — beim ersten Versuch stand hier Weiss auf Hellblau,
   Kontrast 1:1. Auf getoentem Grund gehoert der Akzent selbst als Schrift. */
.dash-period-btn.active {
  color: var(--primary) !important;
  background: var(--primary-light) !important;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. KNOPFHOEHE — dieselbe Falle wie bei den Eingabefeldern
   ---------------------------------------------------------------------------
   Gefunden in der Detail-Seitenleiste (slideover): Der Knopf "Speichern" war
   unten um 6 Punkte abgeschnitten.

   Ursache ist genau die aus Abschnitt 15: Abschnitt 4 setzt `height: 30px`
   und `padding: 0 12px`. Die Hoehe setzt sich durch, der Innenabstand nicht —
   die Seitenleiste hat eine spezifischere Regel mit `padding: 11px 20px`. Also
   22 Punkte Innenabstand in einem 30 Punkte hohen Kasten.

   Damals habe ich nur die Eingabefelder abgesichert und die Knoepfe vergessen.
   Hier dieselbe Loesung: senkrechter Innenabstand ueber die Langform auf null,
   Zentrierung ueber Flexbox statt ueber Abstand.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn,
.btn-primary,
.btn-secondary,
.btn-icon,
.slideover-footer .btn,
.modal-footer .btn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  overflow: visible;
}

@media (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-icon {
    line-height: 1;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. ZWEI FUNDE AUS DER PRUEFUNG MIT SEITENLEISTE UND HANDY
   ---------------------------------------------------------------------------
   Diese beiden konnte die vorige Durchsicht nicht finden, weil sie weder die
   Detail-Seitenleiste geoeffnet noch die schmale Breite geprueft hatte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 20.1 Abschnittstitel im Handy-Menue: 1,16:1 ─────────────────────────────
   `.nav-section-title` steht auf `rgba(255,255,255,0.3)` — weiss mit 30 Prozent
   Deckkraft. Auf der dunklen Leiste war das ein dezenter Titel; im
   aufgeklappten Menue der hellen Ansicht ist es weiss auf hellem Grund.
   Mein frueherer Durchgang durch die Leistenfarben hat diese Regel nicht
   erfasst: Ich hatte nach Selektoren gesucht, die mit `sidebar` oder `nav-item`
   beginnen — `nav-section-title` faengt mit keinem von beiden an. */
.nav-section-title,
.nav-section-title span,
.sidebar .nav-section-title {
  color: var(--text-muted) !important;
}

/* ─── 20.2 Kategorie-Chips: weisse Schrift auf erzeugter Farbe ────────────────
   Die Chips auf den Kontaktkarten ("Café", "Döner") bekommen ihre Flaeche aus
   `getBrancheColor()` — einer je Branche automatisch vergebenen Farbe — und
   trugen dazu fest `color: white`. Bei Gruen (#34C759) ergab das 2,22:1.

   Dasselbe Grundproblem wie beim Phasen-Abzeichen: Wenn die Farbe aus den
   Daten kommt, kann man die Schrift darauf nicht festlegen. Es gibt 32
   Kategorien, die Farben werden erzeugt — irgendeine davon ist immer zu hell
   fuer Weiss.

   Loesung wie dort: Die Farbe traegt ein Punkt, der Text bleibt lesbar. Die
   Chipflaeche wird neutral. Kategorien bleiben unterscheidbar, die
   Beschriftung ist es jetzt auch. */
.card-label {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: var(--text-primary) !important;
  background: var(--hover-bg) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  letter-spacing: 0 !important;
}

/* Der Punkt uebernimmt die Farbe, die das Javascript als Flaeche gesetzt hat:
   Der Chip reicht sie ueber `currentColor` seines ::before nicht weiter, also
   wird die vom Skript gesetzte Hintergrundfarbe als Rahmen des Punktes
   sichtbar gemacht. Umgesetzt ueber einen inneren Punkt in contacts.js. */
.card-label-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Das Pipeline-Kennzeichen behaelt seine getoente Akzentflaeche, auch wenn es
   als `.card-label` gefuehrt wird — dort steht `background` sonst neutral. */
.card-label.badge-in-pipeline {
  background: var(--primary-light) !important;
  color: var(--primary-hover) !important;
  border-color: transparent;
}
.theme-dark .card-label.badge-in-pipeline {
  color: var(--primary) !important;
}