/* ==========================================================================
   Advertising Page Styles
   ========================================================================== */

/* Performance Summary */
.ad-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .ad-summary { grid-template-columns: 1fr; }
}

.ad-summary-headline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ad-summary-status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.ad-summary-status-good { background: rgba(52, 199, 89, 0.15); color: var(--color-green); }
.ad-summary-status-ok { background: rgba(255, 149, 0, 0.15); color: var(--color-orange); }
.ad-summary-status-poor { background: rgba(255, 59, 48, 0.15); color: var(--color-red); }

.ad-summary-period {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.ad-summary-numbers {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.ad-summary-stat {
  display: flex;
  flex-direction: column;
}

.ad-summary-stat-value {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.ad-summary-stat-primary .ad-summary-stat-value {
  color: var(--color-green);
}

.ad-summary-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.ad-summary-metrics {
  display: flex;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .ad-summary-metrics { flex-wrap: wrap; }
}

.ad-metric-card {
  background: var(--color-background);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 140px;
}

.ad-metric-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.ad-metric-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.ad-metric-badge {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.ad-metric-badge-top-performer { background: rgba(52, 199, 89, 0.15); color: var(--color-green); }
.ad-metric-badge-excellent { background: rgba(52, 199, 89, 0.15); color: var(--color-green); }
.ad-metric-badge-above-average { background: rgba(0, 122, 255, 0.15); color: var(--color-blue); }
.ad-metric-badge-average { background: var(--color-background); color: var(--color-text-secondary); }
.ad-metric-badge-below-average { background: rgba(255, 149, 0, 0.15); color: var(--color-orange); }

.ad-metric-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: block;
}

.ad-metric-change {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  display: block;
  margin-top: var(--space-1);
}

.ad-metric-change.positive { color: var(--color-green); }
.ad-metric-change.negative { color: var(--color-red); }

/* Platform Cards */
.ad-platforms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
  .ad-platforms { grid-template-columns: 1fr; }
}

.ad-platform-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.ad-platform-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

.ad-platform-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-platform-icon-meta {
  background: rgba(24, 119, 242, 0.1);
  color: #1877F2;
}

.ad-platform-icon-google {
  background: rgba(234, 67, 53, 0.1);
}

.ad-platform-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.ad-platform-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .ad-platform-metrics { grid-template-columns: repeat(2, 1fr); }
}

.ad-platform-metric {
  text-align: center;
}

.ad-platform-metric-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.ad-platform-metric-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Panel */
.ad-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.ad-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.ad-panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.ad-panel-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Table */
.ad-table-wrap {
  overflow-x: auto;
}

.ad-table {
  width: 100%;
  border-collapse: collapse;
}

.ad-table th,
.ad-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.ad-table th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.ad-table tbody tr:hover {
  background: var(--color-background);
}

.ad-table tfoot td {
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  background: var(--color-background);
}

.col-name { min-width: 200px; }
.col-platform, .col-status { white-space: nowrap; }
.col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.campaign-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.campaign-link:hover .campaign-name {
  color: var(--color-blue);
}

.campaign-name {
  font-weight: var(--font-weight-medium);
  display: block;
}

.campaign-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.badge-meta { background: rgba(24, 119, 242, 0.1); color: #1877F2; }
.badge-google { background: rgba(234, 67, 53, 0.1); color: #EA4335; }
.badge-active { background: rgba(52, 199, 89, 0.1); color: var(--color-green); }
.badge-paused { background: rgba(255, 149, 0, 0.1); color: var(--color-orange); }
.badge-ended, .badge-deleted { background: var(--color-background); color: var(--color-text-tertiary); }

/* ROAS colors */
.roas-good { color: var(--color-green); font-weight: var(--font-weight-semibold); }
.roas-ok { color: var(--color-orange); font-weight: var(--font-weight-semibold); }
.roas-bad { color: var(--color-red); font-weight: var(--font-weight-semibold); }

/* Empty state */
.ad-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-secondary);
}

/* Trends */
.ad-trends {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .ad-trends { grid-template-columns: 1fr; }
}

.ad-trends .ad-panel {
  margin-bottom: 0;
}

/* Insights Grid */
.ad-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (max-width: 1024px) {
  .ad-insights-grid { grid-template-columns: 1fr; }
}

.ad-panel-compact {
  margin-bottom: 0;
}

.ad-panel-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Top Performers */
.ad-performers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ad-performer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--color-background);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.ad-performer-item:hover {
  background: var(--color-border-light);
}

.ad-performer-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ad-performer-name {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-performer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.ad-performer-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ad-performer-roas {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-green);
}

.ad-performer-revenue {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Recommendations */
.ad-recommendations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ad-recommendation-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-background);
  border-radius: var(--radius-md);
}

.ad-recommendation-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ad-recommendation-increase_budget .ad-recommendation-icon {
  background: rgba(52, 199, 89, 0.15);
  color: var(--color-green);
}

.ad-recommendation-pause .ad-recommendation-icon {
  background: rgba(255, 149, 0, 0.15);
  color: var(--color-orange);
}

.ad-recommendation-test_creative .ad-recommendation-icon {
  background: rgba(0, 122, 255, 0.15);
  color: var(--color-blue);
}

.ad-recommendation-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.ad-recommendation-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

.ad-recommendation-impact {
  font-size: var(--font-size-xs);
  color: var(--color-green);
  font-weight: var(--font-weight-medium);
}

/* Budget Efficiency */
.ad-efficiency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .ad-efficiency-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ad-efficiency-grid { grid-template-columns: 1fr; }
}

.ad-efficiency-item {
  background: var(--color-background);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.ad-efficiency-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.ad-efficiency-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-efficiency-badge {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.ad-efficiency-outperform {
  background: rgba(52, 199, 89, 0.15);
  color: var(--color-green);
}

.ad-efficiency-underperform {
  background: rgba(255, 59, 48, 0.15);
  color: var(--color-red);
}

.ad-efficiency-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ad-efficiency-bar {
  position: relative;
  height: 20px;
  background: var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ad-efficiency-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width var(--transition-base);
}

.ad-efficiency-bar-budget {
  background: var(--color-text-tertiary);
}

.ad-efficiency-bar-revenue {
  background: var(--color-green);
}

.ad-efficiency-bar-label {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-surface);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Platform Badges - Used across multiple pages */
.platform-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.platform-badge-meta {
  background: rgba(24, 119, 242, 0.1);
  color: #1877F2;
}

.platform-badge-google {
  background: rgba(234, 67, 53, 0.1);
  color: #EA4335;
}

/* Status Badges - Used across multiple pages */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.status-badge-active {
  background: rgba(52, 199, 89, 0.1);
  color: var(--color-green);
}

.status-badge-paused {
  background: rgba(255, 149, 0, 0.1);
  color: var(--color-orange);
}

.status-badge-ended,
.status-badge-deleted,
.status-badge-archived {
  background: var(--color-background);
  color: var(--color-text-secondary);
}

/* Sync Status Banner */
.sync-status-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.sync-status-info {
  background: rgba(0, 122, 255, 0.08);
  border: 1px solid rgba(0, 122, 255, 0.2);
}

.sync-status-info .sync-status-icon {
  color: var(--color-blue);
}

.sync-status-warning {
  background: rgba(255, 149, 0, 0.08);
  border: 1px solid rgba(255, 149, 0, 0.2);
}

.sync-status-warning .sync-status-icon {
  color: var(--color-orange);
}

.sync-status-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.sync-status-content {
  flex: 1;
}

.sync-status-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.sync-status-details {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.sync-status-details strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.sync-status-actions {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .sync-status-banner {
    flex-direction: column;
    gap: var(--space-3);
  }

  .sync-status-actions {
    width: 100%;
  }

  .sync-status-actions .btn {
    width: 100%;
  }
}

/* UTM Audit Severity Icons */
.ad-recommendation-error .ad-recommendation-icon {
  background: rgba(255, 59, 48, 0.15);
  color: var(--color-red);
}

.ad-recommendation-warning .ad-recommendation-icon {
  background: rgba(255, 149, 0, 0.15);
  color: var(--color-orange);
}

.ad-recommendation-info .ad-recommendation-icon {
  background: rgba(0, 122, 255, 0.15);
  color: var(--color-blue);
}

/* UTM Audit Score Badge */
.ad-utm-score {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.ad-utm-score-good { background: rgba(52, 199, 89, 0.15); color: var(--color-green); }
.ad-utm-score-ok { background: rgba(255, 149, 0, 0.15); color: var(--color-orange); }
.ad-utm-score-poor { background: rgba(255, 59, 48, 0.15); color: var(--color-red); }

/* UTM Suggestion Text */
.ad-recommendation-suggestion {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-family: var(--font-mono, monospace);
  word-break: break-all;
}