/* ============================================================
   Enhanced Tracking v0.2.0 — CSS Additions
   Append to existing app.css
   ============================================================ */

/* ── Modal overlay ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease-out;
}

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

.modal-content {
  background: var(--surface);
  border-radius: 12px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.drilldown-modal {
  width: 90%;
  max-width: 900px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0 4px;
  line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }

.modal-body {
  padding: 24px;
}

/* ── Drill-down sections ── */
.drilldown-section {
  margin-bottom: 24px;
}

.drilldown-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.drilldown-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .drilldown-columns { grid-template-columns: 1fr; }
  .drilldown-modal { width: 95%; }
}

/* ── Compact data table variant ── */
.data-table.compact th,
.data-table.compact td {
  padding: 6px 10px;
  font-size: 0.82rem;
}

.data-table.compact th {
  font-size: 0.72rem;
}

/* ── Content health badges ── */
.badge-declining {
  background: #FEF3C7 !important;
  color: #92400E !important;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.badge-decayed {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── Velocity pill ── */
.velocity-pill {
  display: inline-block;
  background: #EDF2F7;
  color: #4A5568;
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  margin-left: 4px;
}

/* ── Health alerts ── */
.health-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.health-alert-warning {
  background: #FFFBEB;
  border-left: 3px solid #F59E0B;
}

.health-alert-danger {
  background: #FEF2F2;
  border-left: 3px solid #EF4444;
}

.health-alert-info {
  background: #EFF6FF;
  border-left: 3px solid #3B82F6;
}

.health-alert-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.health-alert-body {
  flex: 1;
  min-width: 0;
}

.health-alert-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.health-alert-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.health-ok {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.health-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* ── Velocity summary ── */
.velocity-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 16px;
  background: #F7FAFC;
  border-radius: 8px;
}

.velocity-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.velocity-num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.velocity-label {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-align: center;
}

/* ── Traffic source bars ── */
.source-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.source-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.source-bar-label {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
}

.source-bar-track {
  flex: 1;
  height: 20px;
  background: #F3F2EF;
  border-radius: 4px;
  overflow: hidden;
}

.source-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  min-width: 2px;
}

.source-bar-value {
  width: 120px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
}

/* ── Medium pills ── */
.medium-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: lowercase;
}

.medium-organic { background: #C6F6D5; color: #22543D; }
.medium-paid { background: #FEEBC8; color: #7B341E; }
.medium-referral { background: #BEE3F8; color: #2A4365; }
.medium-social { background: #E9D8FD; color: #44337A; }
.medium-email { background: #FED7E2; color: #702459; }
.medium-direct { background: #E2E8F0; color: #4A5568; }
.medium-other { background: #EDF2F7; color: #4A5568; }

/* ── Clickable ranking rows ── */
.ranking-row:hover {
  background: #F7FAFC;
}

.ranking-row td {
  transition: background 0.15s;
}

/* Stats popup background */
.stats-modal,
.modal-content.stats-popup,
#stats-modal .modal-content {
  background: var(--bg-card, #ffffff);
}