@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap');

/**
 * EnergyExperts Pipeline Board
 * Kanban-style pipeline view with gamification
 *
 * Design: Floating, soft, no hard borders. Shadows only.
 * Fonts: Exo 2 for headings/numbers and body text.
 * Based on /tmp/ee-funnel-mockup/index.html design mockup.
 *
 * @since 2.14.0
 */

/* ==========================================================================
   DESIGN SYSTEM VARIABLES
   ========================================================================== */

:root {
  /* Brand colors */
  --ee-green: #3FA14D;
  --ee-green-light: #F0FBF2;
  --ee-green-gradient: linear-gradient(135deg, #3FA14D, #2D8B3A);
  --ee-yellow: #EECB00;
  --ee-yellow-light: #FFFEF5;
  --ee-red: #E53935;
  --ee-red-light: #FFF5F5;
  --ee-blue: #0069B3;
  --ee-orange: #F5A623;
  --ee-orange-dark: #E65100;
  --ee-yellow-dark: #A68B00;

  /* Surfaces */
  --ee-bg: #FFFFFF;
  --ee-surface: #FFFFFF;

  /* Text */
  --ee-text: #1A1A1A;
  --ee-text-secondary: #555;
  --ee-text-muted: #999;
  --ee-text-ghost: #C0C0C0;

  /* Borders (shadow-only — no hard borders) */
  --ee-border: rgba(0,0,0,0.06);
  --ee-border-light: rgba(0,0,0,0.03);

  /* Radii */
  --ee-radius: 20px;
  --ee-radius-sm: 14px;
  --ee-radius-xs: 8px;
  --ee-radius-pill: 100px;

  /* Floating shadows */
  --ee-shadow-sm: 0 2px 8px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
  --ee-shadow-md: 0 4px 20px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.05);
  --ee-shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.04);
  --ee-shadow-xl: 0 12px 48px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.05);
  --ee-shadow-card: 0 2px 12px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.04);
  --ee-shadow-card-hover: 0 8px 28px rgba(0,0,0,0.1), 0 0 0 0.5px rgba(0,0,0,0.06);

  /* Fonts */
  --ee-font-heading: 'Exo 2', sans-serif;
  --ee-font-body: 'Exo 2', -apple-system, sans-serif;

  /* Transitions */
  --ee-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ee-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes ee-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ee-card-move {
  0% {
    background: var(--ee-surface);
  }
  25% {
    background: var(--ee-green-light);
    box-shadow: 0 0 20px rgba(63,161,77,0.15);
  }
  100% {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }
}

@keyframes ee-confetti {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-35px) scale(0.2);
  }
}

@keyframes ee-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes ee-ring-fill {
  from {
    stroke-dashoffset: 97.4;
  }
}

@keyframes ee-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   APP CONTAINER
   ========================================================================== */

.ee-pipeline-app {
  font-family: var(--ee-font-body);
  color: var(--ee-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: none;
  display: block;
}

/* HEADER — removed in v2.23 (standalone header no longer rendered) */
.ee-pipeline-header { display: none; }

/* ==========================================================================
   TOP ROW — Day Card + Weekly Goals
   ========================================================================== */

/* ==========================================================================
   TOP ROW — 2 Rows: Day Stats + Weekly Goals (full width)
   ========================================================================== */

.ee-pipeline-top-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
  background: var(--ee-surface);
  border-radius: var(--ee-radius-md, 12px);
  box-shadow: var(--ee-shadow-md);
  overflow: hidden;
}

/* ========== ROW 1: Day Card — Greeting + Stats ========== */

.ee-pipeline-day-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ee-border);
}

.ee-pipeline-day-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.ee-pipeline-day-card__greeting {
  font-family: var(--ee-font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--ee-text);
  white-space: nowrap;
}

.ee-pipeline-day-card__greeting em {
  font-style: normal;
  color: var(--ee-green);
  font-weight: 700;
}

.ee-pipeline-day-card__meta {
  font-size: 13px;
  color: var(--ee-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ee-pipeline-day-card__meta strong {
  font-family: var(--ee-font-heading);
  color: var(--ee-text);
  font-size: 14px;
}

/* Day stats — evenly distributed */
.ee-pipeline-day-card__stats {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
  align-items: stretch;
}

.ee-pipeline-day-stat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(0,0,0,0.02);
  min-width: 60px;
  transition: all 0.15s;
}

.ee-pipeline-day-stat:hover {
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

.ee-pipeline-day-stat--done {
  background: var(--ee-green-light);
}

.ee-pipeline-day-stat--alert {
  background: #FFF0F0;
}

.ee-pipeline-day-stat__num {
  font-family: var(--ee-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--ee-text);
  line-height: 1;
}

.ee-pipeline-day-stat--done .ee-pipeline-day-stat__num {
  color: var(--ee-green);
}

.ee-pipeline-day-stat--alert .ee-pipeline-day-stat__num {
  color: var(--ee-red);
}

.ee-pipeline-day-stat__label {
  font-size: 11px;
  color: var(--ee-text-muted);
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
}

.ee-pipeline-day-stat--alert .ee-pipeline-day-stat__label {
  color: var(--ee-red);
  font-weight: 600;
}

/* ---------- Goal Ring ---------- */

.ee-pipeline-goal-ring {
  width: 52px;
  height: 52px;
  position: relative;
  flex-shrink: 0;
}

.ee-pipeline-goal-ring svg {
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}

.ee-pipeline-goal-ring circle {
  fill: none;
  stroke-width: 3;
}

.ee-pipeline-goal-ring__bg {
  stroke: rgba(0,0,0,0.06);
}

.ee-pipeline-goal-ring__fg {
  stroke: var(--ee-green);
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(63,161,77,0.3));
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ee-pipeline-goal-ring__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ee-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--ee-green);
}

/* ---------- Streak Badge ---------- */

.ee-pipeline-streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--ee-radius-pill);
  background: var(--ee-green-light);
  font-family: var(--ee-font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--ee-green);
  white-space: nowrap;
}

.ee-pipeline-streak svg {
  width: 10px;
  height: 10px;
}

/* ========== ROW 2: Week Card — Goals as horizontal columns ========== */

.ee-pipeline-week-card {
  padding: 14px 24px;
}

.ee-pipeline-week-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ee-pipeline-week-card__title {
  font-family: var(--ee-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ee-text);
}

.ee-pipeline-week-card__edit {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ee-text-ghost);
  cursor: pointer;
  transition: all var(--ee-transition-fast);
  background: none;
  border: none;
  padding: 0;
}

.ee-pipeline-week-card__edit:hover {
  color: var(--ee-green);
  background: var(--ee-green-light);
}

/* Goals grid: 4 equal columns side by side */
.ee-pipeline-week-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.ee-pipeline-week-goal {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.015);
  transition: background 0.15s;
}

.ee-pipeline-week-goal:hover {
  background: rgba(0,0,0,0.03);
}

.ee-pipeline-week-goal--done {
  background: rgba(63,161,77,0.04);
}

.ee-pipeline-week-goal__label {
  font-size: 12px;
  color: var(--ee-text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.ee-pipeline-week-goal__nums {
  font-family: var(--ee-font-heading);
  font-size: 13px;
  color: var(--ee-text-muted);
  margin-bottom: 8px;
}

.ee-pipeline-week-goal__nums strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--ee-text);
}

.ee-pipeline-week-goal--done .ee-pipeline-week-goal__nums strong {
  color: var(--ee-green);
}

.ee-pipeline-week-goal__track {
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  margin-bottom: 4px;
}

.ee-pipeline-week-goal__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ee-pipeline-week-fill--green {
  background: var(--ee-green-gradient);
}

.ee-pipeline-week-fill--yellow {
  background: linear-gradient(90deg, var(--ee-yellow), #F5D020);
}

.ee-pipeline-week-fill--blue {
  background: linear-gradient(90deg, var(--ee-blue), #0088E0);
}

.ee-pipeline-week-goal__pct {
  font-family: var(--ee-font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--ee-text-muted);
  text-align: right;
}

.ee-pipeline-week-goal--done .ee-pipeline-week-goal__pct {
  color: var(--ee-green);
}

/* FUNNEL — removed in v2.23 (funnel no longer rendered, tabs replaced it) */
.ee-pipeline-funnel { display: none; }

/* ==========================================================================
   BOARD WRAPPER (Pipeline container)
   ========================================================================== */

.ee-pipeline-board-wrapper {
  background: var(--ee-surface);
  overflow: hidden;
}

/* ==========================================================================
   BOARD HEADER — Phase pill, info, filter buttons
   ========================================================================== */

.ee-pipeline-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

.ee-pipeline-board-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ee-pipeline-board-header__pill {
  background: var(--ee-green-gradient);
  color: white;
  padding: 5px 16px;
  border-radius: var(--ee-radius-pill);
  font-family: var(--ee-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(63,161,77,0.25);
  text-transform: uppercase;
}

.ee-pipeline-board-header__info {
  font-size: 16px;
  color: var(--ee-text-secondary);
  font-weight: 500;
}

.ee-pipeline-board-header__right {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.ee-pipeline-board-header__separator {
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,0.06);
  margin: 0 4px;
}

/* ---------- Filter Buttons ---------- */

.ee-pipeline-filter-btn {
  padding: 7px 16px;
  white-space: nowrap;
  border-radius: var(--ee-radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: rgba(0,0,0,0.04);
  color: var(--ee-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ee-font-body);
}

.ee-pipeline-filter-btn:hover {
  background: rgba(0,0,0,0.07);
}

.ee-pipeline-filter-btn--active {
  background: var(--ee-green-light);
  color: var(--ee-green);
}

.ee-pipeline-filter-btn--overdue {
  color: var(--ee-text-muted);
}

.ee-pipeline-filter-btn--overdue .ee-pipeline-filter-btn__count {
  font-family: var(--ee-font-heading);
  font-weight: 700;
  color: var(--ee-red);
}

.ee-pipeline-filter-btn--overdue.ee-pipeline-filter-btn--active {
  background: var(--ee-red-light);
  color: var(--ee-red);
}

.ee-pipeline-filter-btn--flagged.ee-pipeline-filter-btn--active {
  background: var(--ee-yellow-light);
  color: var(--ee-yellow-dark);
}

/* ---------- Owner Dropdown ---------- */

.ee-pipeline-owner-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ee-pipeline-owner-dropdown {
  padding: 7px 32px 7px 16px;
  border-radius: var(--ee-radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: rgba(0,0,0,0.04);
  color: var(--ee-text-secondary);
  cursor: pointer;
  font-family: var(--ee-font-body);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: all 0.2s;
  min-width: 180px;
}

.ee-pipeline-owner-dropdown:hover {
  background-color: rgba(0,0,0,0.07);
}

.ee-pipeline-owner-dropdown:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(63,161,77,0.2);
  background-color: var(--ee-green-light);
  color: var(--ee-green);
}

.ee-pipeline-owner-dropdown option {
  font-size: 14px;
  padding: 8px;
}

/* ---------- Status Dots ---------- */

.ee-pipeline-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}

.ee-pipeline-status-dot--green {
  background: var(--ee-green);
}

.ee-pipeline-status-dot--yellow {
  background: var(--ee-orange);
}

.ee-pipeline-status-dot--red {
  background: var(--ee-red);
}

/* ==========================================================================
   KANBAN BOARD
   ========================================================================== */

.ee-pipeline-board {
  display: flex;
  min-height: 460px;
  overflow: hidden;
}

.ee-pipeline-board-wrapper {
  overflow-x: hidden;
}

/* ==========================================================================
   KANBAN COLUMN
   ========================================================================== */

.ee-pipeline-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.ee-pipeline-column + .ee-pipeline-column {
  border-left: 1px solid rgba(0,0,0,0.04);
}

/* ---------- Column Header ---------- */

.ee-pipeline-column-header {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ee-pipeline-column-header__title {
  font-family: var(--ee-font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ee-text-secondary);
}

.ee-pipeline-column-header__subtitle {
  font-size: 12px;
  color: var(--ee-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Column KPI badges */
.ee-column-kpi {
  font-size: 11px;
  font-weight: 600;
  color: var(--ee-green);
}

.ee-column-kpi--muted {
  color: var(--ee-text-muted);
  font-weight: 500;
}

.ee-column-kpi--red {
  color: var(--ee-red);
}

.ee-column-kpi--purple {
  color: #9C27B0;
}

.ee-pipeline-column-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ee-pipeline-column-header__count {
  font-family: var(--ee-font-heading);
  font-size: 24px;
  font-weight: 800;
}

/* ---------- Column Progress Ring ---------- */

.ee-pipeline-column-header__ring {
  width: 26px;
  height: 26px;
  position: relative;
}

.ee-pipeline-column-header__ring svg {
  width: 26px;
  height: 26px;
  transform: rotate(-90deg);
}

.ee-pipeline-column-header__ring circle {
  fill: none;
  stroke-width: 2.5;
}

.ee-pipeline-column-header__ring-bg {
  stroke: rgba(0,0,0,0.04);
}

.ee-pipeline-column-header__ring-fg {
  stroke: var(--ee-green);
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(63,161,77,0.3));
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ee-pipeline-column-header__ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ee-font-heading);
  font-size: 8px;
  font-weight: 700;
  color: var(--ee-green);
}

/* ---------- Status Counts per Column ---------- */

.ee-pipeline-column-header__status-counts {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 2px;
}

.ee-pipeline-status-count {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--ee-font-heading);
}

.ee-pipeline-status-count--active {
  color: var(--ee-green);
}

.ee-pipeline-status-count--on-hold {
  color: var(--ee-orange);
}

.ee-pipeline-status-count--lost {
  color: var(--ee-red);
}

/* ---------- Sort Toggle ---------- */

.ee-pipeline-sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  color: var(--ee-text-muted);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 4px;
  transition: all 0.15s;
}

.ee-pipeline-sort-btn:hover {
  background: rgba(0,0,0,0.06);
  color: var(--ee-text-secondary);
}

.ee-pipeline-sort-btn--active {
  color: var(--ee-green);
}

.ee-pipeline-sort-btn svg {
  width: 10px;
  height: 10px;
}

/* ---------- Conversion Pill ---------- */

.ee-pipeline-conversion {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  z-index: 5;
  font-family: var(--ee-font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--ee-text-ghost);
  background: var(--ee-surface);
  border-radius: var(--ee-radius-pill);
  padding: 2px 8px;
  box-shadow: var(--ee-shadow-sm);
  display: flex;
  align-items: center;
  gap: 2px;
}

.ee-pipeline-conversion svg {
  width: 7px;
  height: 7px;
}

/* ---------- Column Body (card list) ---------- */

.ee-pipeline-column__body {
  flex: 1;
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ee-pipeline-column__body::-webkit-scrollbar {
  width: 3px;
}

.ee-pipeline-column__body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
}

/* ==========================================================================
   NBA (Next Best Action) BANNER
   ========================================================================== */

.ee-pipeline-nba {
  margin: 8px 8px 2px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #FFFEF5, #FFF9E0);
  border-radius: var(--ee-radius-sm);
  font-size: 13px;
  color: var(--ee-text-secondary);
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(238,203,0,0.1);
}

.ee-pipeline-nba:hover {
  box-shadow: 0 4px 16px rgba(238,203,0,0.15);
  transform: translateY(-1px);
}

.ee-pipeline-nba__icon {
  width: 14px;
  height: 14px;
  color: var(--ee-yellow);
  flex-shrink: 0;
}

.ee-pipeline-nba__icon svg {
  width: 14px;
  height: 14px;
}

.ee-pipeline-nba__text strong {
  font-weight: 600;
  color: var(--ee-text);
}

.ee-pipeline-nba__action {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: var(--ee-radius-pill);
  background: var(--ee-green-gradient);
  color: white;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--ee-font-heading);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(63,161,77,0.25);
  transition: all var(--ee-transition-fast);
  border: none;
  cursor: pointer;
}

.ee-pipeline-nba__action:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(63,161,77,0.3);
}

/* ==========================================================================
   ORG CARD — Floating, soft, no hard borders
   ========================================================================== */

.ee-pipeline-card {
  background: var(--ee-surface);
  border-radius: var(--ee-radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--ee-transition);
  position: relative;
  box-shadow: var(--ee-shadow-card);
  border: none;
  animation: ee-fade-up 0.25s ease both;
  overflow: hidden;
}

.ee-pipeline-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ee-shadow-card-hover);
}

/* Card moving animation */
.ee-pipeline-card--moving {
  animation: ee-card-move 0.5s ease forwards;
  pointer-events: none;
}

/* ---------- Flagged Card — Lila border-left ---------- */

.ee-pipeline-card--flagged {
  background: linear-gradient(135deg, #F3E5F5, var(--ee-surface));
  box-shadow: var(--ee-shadow-card), 0 0 0 1.5px rgba(156,39,176,0.15);
  border-left: 3px solid #9C27B0;
}

/* ---------- Overdue Card — Rot border-left ---------- */

.ee-pipeline-card--overdue {
  background: linear-gradient(135deg, #FFEBEE, var(--ee-surface));
  box-shadow: var(--ee-shadow-card), 0 0 0 1.5px rgba(229,57,53,0.18);
  border-left: 3px solid var(--ee-red);
}

/* ---------- Card Body — Flex Layout ---------- */

.ee-pipeline-card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
}

/* ---------- Card Name Row ---------- */

.ee-pipeline-card-name {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Flag icon — rechts vom Namen, lila, nur sichtbar bei hover oder flagged */
.ee-pipeline-card-name__flag {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9C27B0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  order: 3;
}

.ee-pipeline-card-name__flag svg {
  width: 10px;
  height: 10px;
}

.ee-pipeline-card:hover .ee-pipeline-card-name__flag {
  opacity: 0.4;
}

.ee-pipeline-card.ee-pipeline-card--flagged .ee-pipeline-card-name__flag,
.ee-pipeline-card.ee-pipeline-card--flagged:hover .ee-pipeline-card-name__flag {
  opacity: 1;
  color: #9C27B0;
}

.ee-pipeline-card-name__text {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  order: 1;
}

/* ---------- Aging Badge ---------- */

.ee-pipeline-aging-badge {
  font-family: var(--ee-font-heading);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--ee-radius-pill);
  background: rgba(0,0,0,0.04);
  color: var(--ee-text-secondary);
  order: 4;
}

.ee-pipeline-aging-badge--fresh {
  background: var(--ee-green-light);
  color: var(--ee-green);
}

.ee-pipeline-aging-badge--old {
  background: #FFF3E0;
  color: var(--ee-orange-dark);
}

.ee-pipeline-aging-badge--stale {
  background: #FFEBEE;
  color: var(--ee-red);
}

/* ---------- Card Metrics Row ---------- */

.ee-pipeline-card-metrics {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ee-pipeline-card-metrics__mwp {
  font-family: var(--ee-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--ee-green);
}

.ee-pipeline-card-metrics__mwp small {
  font-weight: 500;
  color: var(--ee-text-muted);
  font-size: 13px;
}

.ee-pipeline-card-metrics__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: var(--ee-radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,0.04);
  color: var(--ee-text-secondary);
}

.ee-pipeline-card-metrics__badge svg {
  width: 11px;
  height: 11px;
}

/* ---------- PE Module Icons ---------- */

.ee-pe-icon {
  transition: color 0.2s;
}
.ee-pe-icon--pending {
  color: #ccc;
}
.ee-pe-icon--complete {
  color: #3FA14D;
}

/* Created date badge on Lead cards */
.ee-pipeline-card-footer__created {
  font-size: 10px;
  color: #999;
  margin-left: auto;
  white-space: nowrap;
}

/* Battery badge */
.ee-pipeline-card-badge--battery {
  display: inline-flex;
  align-items: center;
  color: #22c55e;
  margin-left: 4px;
}

/* ---------- SLA Timer ---------- */

.ee-pipeline-sla {
  font-size: 13px;
  font-weight: 600;
  color: var(--ee-text-ghost);
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.ee-pipeline-sla svg {
  width: 9px;
  height: 9px;
}

.ee-pipeline-sla--urgent {
  color: var(--ee-red);
  animation: ee-pulse 2s infinite;
}

.ee-pipeline-sla--warn {
  color: var(--ee-orange-dark);
}

/* ---------- Card Footer ---------- */

.ee-pipeline-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

.ee-pipeline-card-footer__left {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Avatar ---------- */

.ee-pipeline-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ee-font-heading);
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.ee-pipeline-avatar--1 { background: linear-gradient(135deg, #607D8B, #455A64); }
.ee-pipeline-avatar--2 { background: linear-gradient(135deg, #78909C, #546E7A); }
.ee-pipeline-avatar--3 { background: linear-gradient(135deg, #546E7A, #37474F); }
.ee-pipeline-avatar--4 { background: linear-gradient(135deg, #455A64, #263238); }

/* ---------- Follow-Up ---------- */

.ee-pipeline-card-footer__followup {
  font-size: 11px;
  color: var(--ee-text-muted);
  display: flex;
  align-items: center;
  gap: 2px;
}

.ee-pipeline-card-footer__followup svg {
  width: 9px;
  height: 9px;
}

.ee-pipeline-card-footer__followup--overdue {
  color: var(--ee-red);
  font-weight: 700;
}

.ee-pipeline-card-footer__followup--soon {
  color: var(--ee-orange-dark);
  font-weight: 600;
}

/* Contact name — inline next to follow-up */
.ee-pipeline-card-footer__contact {
  font-size: 11px;
  color: var(--ee-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  transition: all 0.25s ease;
}

/* On hover: follow-up fades out, contact slides left */
.ee-pipeline-card:hover .ee-pipeline-card-footer__followup {
  opacity: 0;
  width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: all 0.25s ease;
}

.ee-pipeline-card:hover .ee-pipeline-card-footer__contact {
  max-width: 180px;
  color: var(--ee-text-secondary);
}

/* ---------- Card Actions (Quick-Actions) ---------- */

.ee-pipeline-card-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.ee-pipeline-card-actions__btn {
  width: 26px;
  height: 26px;
  border-radius: var(--ee-radius-xs);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--ee-transition-fast);
  color: var(--ee-text-ghost);
  border: none;
  background: none;
  padding: 0;
}

.ee-pipeline-card-actions__btn svg {
  width: 13px;
  height: 13px;
}

/* Non-arrow action buttons: hidden by default, shown on card hover */
.ee-pipeline-card:hover .ee-pipeline-card-actions__btn {
  display: flex;
}

/* Arrow buttons: full-height gradient strips, outside→inside fade */
.ee-pipeline-card-actions__btn--back,
.ee-pipeline-card-actions__btn--forward {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  border: none;
  padding: 0;
  cursor: pointer;
  height: 100%;
}

/* ← Zurück: orange, Gradient von links (opak) nach rechts (transparent) */
.ee-pipeline-card-actions__btn--back {
  left: 0;
  border-radius: var(--ee-radius-sm) 0 0 var(--ee-radius-sm);
  background: linear-gradient(to right, rgba(245,158,11,0.25) 0%, rgba(245,158,11,0) 100%);
  color: var(--ee-orange, #f59e0b);
}

/* → Weiter: grün, Gradient von rechts (opak) nach links (transparent) */
.ee-pipeline-card-actions__btn--forward {
  right: 0;
  border-radius: 0 var(--ee-radius-sm) var(--ee-radius-sm) 0;
  background: linear-gradient(to left, rgba(63,161,77,0.25) 0%, rgba(63,161,77,0) 100%);
  color: var(--ee-green);
}

.ee-pipeline-card-actions__btn--back svg,
.ee-pipeline-card-actions__btn--forward svg {
  width: 12px;
  height: 12px;
}

/* Appear on card hover */
.ee-pipeline-card:hover .ee-pipeline-card-actions__btn--back,
.ee-pipeline-card:hover .ee-pipeline-card-actions__btn--forward {
  opacity: 1;
}

/* Hover on arrow itself: stronger gradient + white icon */
.ee-pipeline-card-actions__btn--back:hover {
  background: linear-gradient(to right, rgba(245,158,11,0.55) 0%, rgba(245,158,11,0) 100%);
  color: #fff;
}

.ee-pipeline-card-actions__btn--forward:hover {
  background: linear-gradient(to left, rgba(63,161,77,0.55) 0%, rgba(63,161,77,0) 100%);
  color: #fff;
}

/* Content staucht sich beim Hover rein, Platz für Pfeile */
.ee-pipeline-card-body,
.ee-pipeline-card-footer {
  transition: padding 0.2s ease;
}

.ee-pipeline-card:hover .ee-pipeline-card-body {
  padding-left: 14px;
  padding-right: 14px;
}

.ee-pipeline-card:hover .ee-pipeline-card-footer {
  padding-left: 14px;
  padding-right: 14px;
}

/* Non-arrow action btn hover colors */
.ee-pipeline-card-actions__btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--ee-text);
}

.ee-pipeline-card-actions__btn--call:hover {
  background: var(--ee-green-light);
  color: var(--ee-green);
}

.ee-pipeline-card-actions__btn--email:hover {
  background: var(--ee-green-light);
  color: var(--ee-green);
}

.ee-pipeline-card-actions__btn--ai:hover {
  background: #FFF8E1;
  color: #F9A825;
}

.ee-pipeline-card-actions__btn--pause:hover {
  background: #FFF8E1;
  color: #F5A623;
}

.ee-pipeline-card-actions__btn--lost:hover {
  background: #FFEBEE;
  color: var(--ee-red);
}

/* Project count badge in actions row */
.ee-pipeline-card-actions__projects {
  height: 18px;
  border-radius: var(--ee-radius-xs);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  background: rgba(0,0,0,0.04);
  color: var(--ee-text-secondary);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ee-font-heading);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.ee-pipeline-card-actions__projects:hover {
  background: var(--ee-green-light);
  color: var(--ee-green);
}

.ee-pipeline-card-actions__projects svg {
  width: 9px;
  height: 9px;
}

/* ==========================================================================
   TEAM BAR (Footer)
   ========================================================================== */

.ee-pipeline-team-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border-top: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
  color: var(--ee-text-muted);
}

.ee-pipeline-team-bar__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ee-pipeline-team-bar__value {
  font-family: var(--ee-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ee-text);
}

.ee-pipeline-team-bar__item--overdue {
  color: var(--ee-red);
}

.ee-pipeline-team-bar__item--overdue .ee-pipeline-team-bar__value {
  color: var(--ee-red);
}

.ee-pipeline-team-bar__team {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ee-pipeline-team-bar__progress {
  width: 80px;
  height: 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.04);
  overflow: hidden;
}

.ee-pipeline-team-bar__progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--ee-green-gradient);
  box-shadow: 0 0 6px rgba(63,161,77,0.2);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   SETTINGS BUTTON
   ========================================================================== */

.ee-pipeline-settings-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--ee-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border: none;
  cursor: pointer;
  color: var(--ee-text-muted);
  transition: all var(--ee-transition-fast);
}

.ee-pipeline-settings-btn svg {
  width: 14px;
  height: 14px;
}

.ee-pipeline-settings-btn:hover {
  background: rgba(0,0,0,0.07);
  color: var(--ee-text-secondary);
}

/* ==========================================================================
   SETTINGS MODAL
   ========================================================================== */

.ee-pipeline-settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}

.ee-pipeline-settings-modal--open {
  display: flex;
}

.ee-pipeline-settings-modal__content {
  background: var(--ee-surface);
  border-radius: var(--ee-radius);
  padding: 28px 32px;
  width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--ee-shadow-xl);
  animation: ee-fade-up 0.3s ease;
  position: relative;
}

.ee-pipeline-settings-modal__title {
  font-family: var(--ee-font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}

.ee-pipeline-settings-modal__subtitle {
  font-size: 14px;
  color: var(--ee-text-muted);
  margin-bottom: 20px;
}

.ee-pipeline-settings-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ee-text-muted);
  transition: all var(--ee-transition-fast);
}

.ee-pipeline-settings-modal__close:hover {
  background: rgba(0,0,0,0.1);
}

.ee-pipeline-settings-modal__section {
  margin-bottom: 20px;
}

.ee-pipeline-settings-modal__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ee-pipeline-settings-modal__section-title {
  font-family: var(--ee-font-heading);
  font-size: 15px;
  font-weight: 700;
}

.ee-pipeline-settings-modal__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-left: 46px;
}

.ee-pipeline-settings-modal__row label {
  font-size: 14px;
  color: var(--ee-text-secondary);
  flex: 1;
}

/* ---------- Toggle Switch ---------- */

.ee-pipeline-settings-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  border: none;
  padding: 0;
}

.ee-pipeline-settings-toggle--on {
  background: var(--ee-green);
}

.ee-pipeline-settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.ee-pipeline-settings-toggle--on::after {
  transform: translateX(16px);
}

/* ---------- Settings Input ---------- */

.ee-pipeline-settings-input {
  width: 60px;
  padding: 5px 10px;
  border-radius: var(--ee-radius-xs);
  border: 1.5px solid rgba(0,0,0,0.08);
  font-family: var(--ee-font-heading);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.2s;
  background: var(--ee-surface);
  color: var(--ee-text);
}

.ee-pipeline-settings-input:focus {
  outline: none;
  border-color: var(--ee-green);
}

.ee-pipeline-settings-input::placeholder {
  color: var(--ee-text-ghost);
}

/* ---------- Settings Save Button ---------- */

.ee-pipeline-settings-modal__save {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--ee-radius-sm);
  background: var(--ee-green-gradient);
  color: white;
  font-family: var(--ee-font-heading);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(63,161,77,0.25);
  transition: all 0.2s;
}

.ee-pipeline-settings-modal__save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(63,161,77,0.3);
}

/* ==========================================================================
   CONFETTI PARTICLES
   ========================================================================== */

.ee-pipeline-confetti {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: ee-confetti 0.7s ease forwards;
  z-index: 9999;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.ee-pipeline-column__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-size: 14px;
  color: var(--ee-text-muted);
  text-align: center;
  font-style: italic;
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.ee-pipeline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  font-size: 14px;
  color: var(--ee-text-muted);
  gap: 8px;
}

.ee-pipeline-loading__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.06);
  border-top-color: var(--ee-green);
  border-radius: 50%;
  animation: ee-spin 0.8s linear infinite;
}

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

/* ==========================================================================
   RESPONSIVE
   The Kanban board shows ONE phase at a time (single-column view with
   sub-phase columns). Responsiveness is primarily vertical.
   ========================================================================== */

/* ---------- Tablet (max-width: 1024px) ---------- */

/* ---------- Tablet breakpoint: ≤1280px ---------- */
@media (max-width: 1280px) {
  /* NEVER horizontal scroll */
  .ee-pipeline-app,
  .ee-pipeline-board-wrapper {
    overflow-x: hidden !important;
  }

  /* Board header: allow wrapping */
  .ee-pipeline-board-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }

  .ee-pipeline-board-header__left {
    flex-wrap: wrap;
    min-width: 0;
  }

  .ee-pipeline-board-header__right {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Slightly smaller filter buttons */
  .ee-pipeline-filter-btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  /* Owner dropdown: slightly narrower */
  .ee-pipeline-owner-dropdown {
    min-width: 150px;
    font-size: 13px;
  }

  /* Cards: slightly more compact */
  .ee-pipeline-card {
    padding: 7px 10px;
  }

  .ee-pipeline-card-name__text {
    font-size: 15px;
  }

  /* Day card: wrap stats on tablet */
  .ee-pipeline-day-card {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .ee-pipeline-day-card__stats {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-top: 4px;
  }

  /* Week grid: 2 columns on tablet */
  .ee-pipeline-week-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Column header: compact */
  .ee-pipeline-column-header {
    padding: 8px 10px;
  }

  .ee-pipeline-column-header__title {
    font-size: 14px;
  }

  .ee-pipeline-column-header__count {
    font-size: 20px;
  }

  /* Remove conversion pill (position breaks in wrap) */
  .ee-pipeline-conversion {
    display: none;
  }

  /* Columns: handled by base styles (always single-column + tabs) */
}

/* ---------- Mobile (max-width: 768px) ---------- */

@media (max-width: 768px) {
  /* Board header: stack left/right */
  .ee-pipeline-board-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
  }

  .ee-pipeline-board-header__left {
    flex-wrap: wrap;
    gap: 6px;
  }

  .ee-pipeline-board-header__pill {
    font-size: 13px;
    padding: 4px 12px;
  }

  .ee-pipeline-board-header__info {
    font-size: 14px;
  }

  .ee-pipeline-board-header__right {
    justify-content: flex-start;
    gap: 4px;
  }

  .ee-pipeline-board-header__separator {
    display: none;
  }

  /* Filter buttons: wrap, smaller */
  .ee-pipeline-filter-btn {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Owner dropdown: full width */
  .ee-pipeline-owner-dropdown-wrapper {
    width: 100%;
  }

  .ee-pipeline-owner-dropdown {
    width: 100%;
    min-width: unset;
  }

  /* Column tabs: smaller on mobile */
  .ee-column-tab {
    font-size: 13px;
    padding: 8px 12px;
  }

  .ee-column-tab__count {
    font-size: 11px;
    padding: 1px 7px;
  }

  /* Column header: compact for mobile */
  .ee-pipeline-column-header {
    padding: 6px 8px;
  }

  .ee-pipeline-column-header__title {
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .ee-pipeline-column-header__count {
    font-size: 18px;
  }

  .ee-pipeline-column-header__subtitle {
    font-size: 11px;
  }

  /* Column body: tighter padding */
  .ee-pipeline-column__body {
    padding: 4px;
    gap: 4px;
  }

  /* Cards: more compact */
  .ee-pipeline-card {
    padding: 6px 8px;
    border-radius: var(--ee-radius-xs);
  }

  .ee-pipeline-card-body {
    gap: 3px 6px;
  }

  .ee-pipeline-card-name__text {
    font-size: 14px;
  }

  /* Card footer: stack follow-up and contact */
  .ee-pipeline-card-footer {
    flex-wrap: wrap;
    gap: 4px;
  }

  .ee-pipeline-card-footer__left {
    flex: 1 1 100%;
  }

  .ee-pipeline-card-footer__contact {
    max-width: none;
  }

  /* Aging badge: smaller */
  .ee-pipeline-aging-badge {
    font-size: 11px;
    padding: 2px 6px;
  }

  /* Metrics: smaller */
  .ee-pipeline-card-metrics__mwp {
    font-size: 14px;
  }

  .ee-pipeline-card-metrics__mwp small {
    font-size: 11px;
  }

  .ee-pipeline-card-metrics__badge {
    font-size: 11px;
    padding: 1px 6px;
  }

  /* SLA: smaller */
  .ee-pipeline-sla {
    font-size: 11px;
  }

  /* Day card mobile: smaller */
  .ee-pipeline-day-card {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }

  .ee-pipeline-day-card__greeting {
    font-size: 15px;
  }

  .ee-pipeline-day-stat {
    padding: 6px 10px;
    min-width: 48px;
  }

  .ee-pipeline-day-stat__num {
    font-size: 18px;
  }

  .ee-pipeline-week-card {
    padding: 12px 14px;
  }

  /* Week grid: 2 columns on mobile */
  .ee-pipeline-week-card__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Team bar: wrap */
  .ee-pipeline-team-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  .ee-pipeline-team-bar__team {
    margin-left: 0;
    flex: 1 1 100%;
  }

  /* Settings modal: full width on mobile */
  .ee-pipeline-settings-modal__content {
    width: calc(100% - 24px);
    max-width: none;
    padding: 20px 16px;
    border-radius: var(--ee-radius-sm);
  }

  /* Actions: always visible on touch devices */
  .ee-pipeline-card-actions__btn {
    display: flex;
    opacity: 0.7;
  }

  /* Arrow overlays: always visible on touch */
  .ee-pipeline-card-actions__btn--back,
  .ee-pipeline-card-actions__btn--forward {
    opacity: 0.5;
  }

  /* Content always squeezed on touch for arrow room */
  .ee-pipeline-card-body,
  .ee-pipeline-card-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Disable hover effects on touch (follow-up stays visible) */
  .ee-pipeline-card:hover .ee-pipeline-card-footer__followup {
    opacity: 1;
    width: auto;
    overflow: visible;
    margin: initial;
    padding: initial;
  }

  .ee-pipeline-card:hover .ee-pipeline-card-footer__contact {
    max-width: 100px;
    color: var(--ee-text-muted);
  }
}

/* ---------- Small Mobile (max-width: 480px) ---------- */

@media (max-width: 480px) {
  .ee-pipeline-board-header__pill {
    font-size: 11px;
    padding: 3px 10px;
    letter-spacing: 0.04em;
  }

  .ee-pipeline-board-header__info {
    font-size: 12px;
  }

  /* Hide MWp and SLA on very small screens to save space */
  .ee-pipeline-card-metrics__mwp,
  .ee-pipeline-sla {
    display: none;
  }

  /* v2.22: Hide status count pills on very small screens */
  .ee-pipeline-filter-btn:has(.ee-pipeline-status-dot) {
    display: none;
  }

  /* Owner dropdown: full width */
  .ee-pipeline-owner-dropdown-wrapper {
    width: 100%;
  }

  /* Column header: even more compact */
  .ee-pipeline-column-header__title {
    font-size: 11px;
  }

  .ee-pipeline-column-header__count {
    font-size: 16px;
  }

  /* Status counts: smaller */
  .ee-pipeline-status-count {
    font-size: 9px;
  }

  /* Card name: smaller */
  .ee-pipeline-card-name__text {
    font-size: 13px;
  }

  .ee-pipeline-card-name {
    flex: 1 1 100%;
  }

  /* Filter buttons: smallest size */
  .ee-pipeline-filter-btn {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Aging badge: minimal */
  .ee-pipeline-aging-badge {
    font-size: 10px;
    padding: 1px 5px;
  }

  /* Card actions: smaller */
  .ee-pipeline-card-actions__btn {
    width: 22px;
    height: 22px;
  }

  .ee-pipeline-card-actions__btn svg {
    width: 11px;
    height: 11px;
  }

  /* Tiny screens: single column week goals */
  .ee-pipeline-week-card__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .ee-pipeline-day-stat {
    padding: 4px 8px;
    min-width: 40px;
  }

  .ee-pipeline-day-stat__num {
    font-size: 16px;
  }

  .ee-pipeline-goal-ring {
    width: 40px;
    height: 40px;
  }

  .ee-pipeline-goal-ring svg {
    width: 40px;
    height: 40px;
  }

  .ee-pipeline-goal-ring__pct {
    font-size: 10px;
  }

  /* Conversion pill: hide on tiny screens */
  .ee-pipeline-conversion {
    display: none;
  }
}

/* ==========================================================================
   HEADING FONT — Exo 2 for all pipeline headings
   ========================================================================== */

.ee-pipeline-app h1, .ee-pipeline-app h2, .ee-pipeline-app h3,
.ee-pipeline-column__title,
.ee-pipeline-card-name,
.ee-pipeline-board-header__phase-label,
.ee-pipeline-board-header__count,
.ee-toprow-greeting__name,
.ee-toprow-daily__label {
    font-family: var(--ee-font-heading);
}

/* ==========================================================================
   LAYOUT OVERRIDE — organizationViewContainer fix
   The legacy .organizationViewContainer uses display:flex; flex-wrap:wrap
   which breaks the Kanban layout when the pipeline board is active.
   ========================================================================== */

/* Override legacy flex layout when pipeline board is active */
.organizationViewContainer:has(#ee-pipeline-board-root) {
    display: block !important;
    flex-wrap: unset !important;
}

/* Fallback for browsers without :has() */
.organizationViewContainer .ee-pipeline-app {
    display: block;
    width: 100%;
}

/* CRITICAL: Tab button bar must ALWAYS stay visible.
   The Pipeline Board replaces the tab CONTENT panels, not the tab navigation.
   This rule protects the tab bar from being hidden by any parent override. */
.organizationViewContainer .org-tabs {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10;
}

/* ==========================================================================
   BULK SELECT — Checkbox on Kanban Cards
   ========================================================================== */

.ee-pipeline-card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    cursor: pointer;
    margin: 0;
    line-height: 1;
}

.ee-pipeline-card-checkbox__input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ee-green);
    margin: 0;
}

/* When bulk mode active, add left padding to card for checkbox */
.ee-pipeline-card:has(.ee-pipeline-card-checkbox[style*="display:block"]) {
    padding-left: 32px;
}

/* Fallback for browsers without :has() support */
.ee-pipeline-card--bulk-mode {
    padding-left: 32px;
}

/* ==========================================================================
   LOAD MORE BUTTON
   ========================================================================== */

.ee-pipeline-load-more {
  width: 100%;
  padding: 10px;
  background: rgba(0,0,0,0.03);
  border: 1px dashed rgba(0,0,0,0.1);
  border-radius: var(--ee-radius-xs);
  font-size: 14px;
  font-weight: 600;
  color: var(--ee-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ee-font-body);
  margin-top: 4px;
}

.ee-pipeline-load-more:hover {
  background: var(--ee-green-light);
  color: var(--ee-green);
  border-color: var(--ee-green);
}

/* ---------- Manual Override Badge ---------- */

.ee-pipeline-card--manual {
  /* kein orange border mehr — M-Badge reicht */
}

.ee-pipeline-card-manual-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--ee-orange);
  color: white;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--ee-font-heading);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  letter-spacing: -0.5px;
}

.ee-pipeline-card-manual-badge:hover {
  background: var(--ee-orange-dark);
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}

/* ==========================================================================
   DRAG & DROP
   ========================================================================== */

.ee-pipeline-card[draggable="true"] {
  cursor: grab;
}

.ee-pipeline-card[draggable="true"]:active {
  cursor: grabbing;
}

.ee-pipeline-card--dragging {
  opacity: 0.4;
  transform: rotate(2deg);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index: 100;
}

.ee-pipeline-column--drop-target {
  outline: 2px dashed rgba(63,161,77,0.3);
  outline-offset: -4px;
  border-radius: var(--ee-radius-lg, 12px);
}

.ee-pipeline-column--drag-over {
  outline-color: var(--ee-green, #3fa14d);
  background: rgba(63,161,77,0.04);
}

.ee-pipeline-column--drag-over .ee-pipeline-column-header {
  color: var(--ee-green, #3fa14d);
}

/* =========================================================================
   CROSS-PHASE SEARCH RESULTS
   ========================================================================= */

.ee-pipeline-search-results {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.ee-pipeline-search-results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: 'Exo 2', sans-serif;
}

.ee-pipeline-search-results__title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.ee-pipeline-search-results__count {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.ee-pipeline-search-results__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ee-pipeline-search-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  min-width: 240px;
  max-width: 340px;
  flex: 1 1 280px;
  font-family: 'Exo 2', sans-serif;
}

.ee-pipeline-search-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-color: #3fa14d;
}

.ee-pipeline-search-card__phase {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Phase badge colors */
.ee-pipeline-search-card__phase--lead { background: #dbeafe; color: #1e40af; }
.ee-pipeline-search-card__phase--sales { background: #e0f2fe; color: #075985; }
.ee-pipeline-search-card__phase--feasibility { background: #fef3c7; color: #92400e; }
.ee-pipeline-search-card__phase--offer { background: #ede9fe; color: #5b21b6; }
.ee-pipeline-search-card__phase--projectdevelopment { background: #d1fae5; color: #065f46; }
.ee-pipeline-search-card__phase--construction { background: #ffe4e6; color: #9f1239; }
.ee-pipeline-search-card__phase--operation { background: #f0fdf4; color: #166534; }
.ee-pipeline-search-card__phase--unassigned { background: #f1f5f9; color: #64748b; }

.ee-pipeline-search-card__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ee-pipeline-search-card__name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ee-pipeline-search-card__meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}

.ee-pipeline-search-card__meta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ee-pipeline-search-results__empty {
  padding: 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  font-family: 'Exo 2', sans-serif;
}

.ee-pipeline-search-results__loading {
  padding: 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  font-family: 'Exo 2', sans-serif;
}

/* ==========================================================================
   v2.22: Pipeline / B2B Mode Toggle
   ========================================================================== */

.ee-mode-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 2px;
  margin-right: 8px;
  flex-shrink: 0;
  align-self: center;
}

.ee-mode-toggle__btn {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-family: var(--ee-font-body, 'Exo 2', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  line-height: 1.4;
}

.ee-mode-toggle__btn:hover {
  color: #374151;
}

.ee-mode-toggle__btn--active {
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 0 0 0.5px rgba(0,0,0,0.04);
}

/* ==========================================================================
   v2.22: Board-wrapper overflow fix — no horizontal scroll EVER
   ========================================================================== */

.ee-pipeline-board-wrapper {
  overflow-x: hidden;
}

/* Desktop: column tab bar is NOT shown (only on tablet/mobile via JS) */
.ee-column-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  background: #f8fafc;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 0 4px;
}

.ee-column-tabs::-webkit-scrollbar {
  display: none;
}

.ee-column-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 0;
  font-family: var(--ee-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--ee-text-muted);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}

.ee-column-tab:hover {
  color: var(--ee-text-secondary);
  background: rgba(0,0,0,0.02);
}

.ee-column-tab--active {
  color: var(--ee-green);
  border-bottom-color: var(--ee-green);
}

.ee-column-tab__count {
  background: rgba(0,0,0,0.06);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.ee-column-tab--active .ee-column-tab__count {
  background: var(--ee-green-light);
  color: var(--ee-green);
}

/* Hide columns when tab system is active */
.ee-pipeline-column--hidden {
  display: none !important;
}