/* ══════════════════════════════════════════════════════════════════════
   ANTIGRAVITY — COCKPIT GOOGLE ADS v2
   Styles Supplémentaires — Shopping Produit
   ══════════════════════════════════════════════════════════════════════ */

/* HERO ZONE - SHOPPING SPECIFIC */
.hero-zone--shopping {
  background: linear-gradient(135deg, #162447 0%, #1e5c40 55%, #b83232 100%);
  position: relative;
}

/* NAVIGATION */
.header-nav {
  display: flex;
  gap: var(--space-4);
  margin-left: var(--space-8);
  border-left: 1px solid var(--color-border-strong);
  padding-left: var(--space-6);
  height: 40px;
  align-items: center;
}

.nav-link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.nav-link:hover {
  background: var(--color-bg-alt);
  color: var(--color-text-primary);
}

.nav-link.active {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

/* TIERED SECTIONS */
.tier-section {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: opacity var(--transition-base), display 0s;
}

.tier-section.hidden-tier {
  display: none !important;
}

/* Achats (Tier 1) - Strong green/success indicators */
.tier-section--1 { border-left: 4px solid var(--color-success); }
.tier-section--1 .section-title { color: var(--color-success); }

/* Ajouts Panier (Tier 2) - Warning/Amber indicators */
.tier-section--2 { border-left: 4px solid var(--color-warning); background: var(--color-surface-alt); }
.tier-section--2 .section-title { color: var(--color-warning); }

/* Vues Panier (Tier 3) - Info/Blue indicators */
.tier-section--3 { border-left: 4px solid var(--color-info); }
.tier-section--3 .section-title { color: var(--color-info); }

/* Zero signal (Tier 0) - Grey/Muted indicators */
.tier-section--0 { border-left: 4px solid var(--color-text-muted); opacity: 0.9; }

/* Zombie Pmax */
.zombie-section { border-left: 4px solid var(--color-danger); background: rgba(184, 50, 50, 0.02); }

/* Non-Eligible */
.non-eligible-section { border-left: 4px solid var(--color-text-secondary); background: rgba(0,0,0,0.02); }

.section-header {
  margin-bottom: var(--space-4);
}
.tier-icon {
  font-size: 2rem;
  line-height: 1;
}
.section-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.section-badge--ok { background: var(--color-success-bg); color: var(--color-success); }
.section-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.section-badge--info { background: var(--color-info-bg); color: var(--color-info); }
.section-badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }

/* EXTENDED FILTERS BAR */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.filter-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
}

.advanced-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  margin-top: calc(var(--space-4) * -1 + var(--space-2));
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.filter-group label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-group select,
.filter-group input {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  min-width: 0;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-group select:focus,
.filter-group input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
  outline: none;
}
.filter-group--range input {
  min-width: 0;
}

/* DANGER OUTLINE BUTTON (Non-Eligible) */
.btn--danger-outline {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  transition: all var(--transition-fast);
}
.btn--danger-outline:hover {
  background: var(--color-danger);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* DECISION BADGES */
.decision-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--transition-fast);
}
.decision-badge:hover { transform: scale(1.05); }
.decision--garder { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.decision--hp { background: var(--color-scale-bg); color: var(--color-scale); border: 1px solid var(--color-scale); }
.decision--observer { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); }
.decision--geler { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); }

/* POUSSER BADGE */
.pousser-badge {
  cursor: help;
  font-size: 1rem;
  line-height: 1;
}
.pousser-badge-lg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(46,125,94,0.12), rgba(46,125,94,0.06));
  border: 1px solid var(--color-success);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-left: auto;
}

/* HIGHLIGHT PULSE (scroll-to non-eligible) */
@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 50, 50, 0.4); }
  40% { box-shadow: 0 0 0 12px rgba(184, 50, 50, 0); }
  100% { box-shadow: none; }
}

/* DRAWER ENHANCEMENTS */
.drawer-header--shopping {
  background: linear-gradient(135deg, #162447 0%, #1e5c40 100%);
}
.drawer-metrics-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* COMPOSITE BANNER */
.composite-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(to right, rgba(230, 185, 45, 0.1), rgba(230, 185, 45, 0.05));
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.composite-banner.hidden { display: none; }
.composite-banner-icon { font-size: 2rem; line-height: 1; }
.composite-banner-text strong { color: var(--color-warning); font-size: 1rem; }
.composite-formula { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* LOAD MORE */
.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-top: 1px dashed var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.load-more-wrap.hidden { display: none; }
.load-more-btn { min-width: 250px; }

/* STICKY COLUMNS */
.th-sticky, .td-sticky {
  position: sticky;
  right: 0;
  background: var(--color-surface);
  z-index: 2;
  box-shadow: -2px 0 5px rgba(0,0,0,0.05);
}
tr:hover .td-sticky {
  background: var(--color-surface-hover);
}
[data-theme='dark'] .th-sticky, [data-theme='dark'] .td-sticky {
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
}

/* ACCORDION */
.metrics-accordion {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.accordion-trigger {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.accordion-trigger:hover { background: var(--color-surface-hover); }
.accordion-icon { transition: transform var(--transition-fast); }
details[open] .accordion-icon { transform: rotate(90deg); }
.accordion-body { padding: var(--space-4); background: var(--color-surface); }

/* BREAKDOWNS */
.breakdown-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.breakdown-campaign {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.breakdown-campaign-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
.breakdown-camp-icon { font-size: 1.1rem; }
.breakdown-camp-badge {
  margin-left: auto;
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-full);
}
.breakdown-adgroups {
  display: flex;
  flex-direction: column;
}
.breakdown-adgroup {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed var(--color-border);
}
.breakdown-adgroup:last-child { border-bottom: none; }
.breakdown-ag-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.breakdown-ag-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.bmet {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-hover);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  min-width: 80px;
}
.bmet-label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 2px; }
.bmet-value { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .advanced-filters {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (max-width: 768px) {
  .header-nav { display: none; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-actions { margin-left: 0; flex-wrap: wrap; }
  .filter-actions .btn { flex: 1; min-width: 0; justify-content: center; }
  .advanced-filters { grid-template-columns: repeat(2, 1fr); }
  .drawer-metrics-grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .advanced-filters { grid-template-columns: 1fr; }
}