/* Promotions Analytics Dashboard Styles */

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Key Metrics Card */
.key-metrics--card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Badge Styles */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.badge--success {
  background-color: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
}

.badge--warning {
  background-color: rgba(251, 191, 36, 0.1);
  color: rgb(251, 191, 36);
}

.badge--subtle {
  background-color: rgba(156, 163, 175, 0.1);
  color: rgb(156, 163, 175);
}

.badge--positive {
  background-color: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
}

/* Text Color Utilities */
.text-positive {
  color: rgb(34, 197, 94);
}

.text-negative {
  color: rgb(239, 68, 68);
}

.text-warning {
  color: rgb(251, 191, 36);
}

.text-subtle {
  color: rgb(107, 114, 128);
}

.text-primary {
  color: rgb(59, 130, 246);
}

/* Background Utilities */
.bg-positive\/10 {
  background-color: rgba(34, 197, 94, 0.1);
}

.bg-primary\/10 {
  background-color: rgba(59, 130, 246, 0.1);
}

.bg-warning\/10 {
  background-color: rgba(251, 191, 36, 0.1);
}

.bg-negative\/10 {
  background-color: rgba(239, 68, 68, 0.1);
}

/* Chart Container */
.chart-container {
  position: relative;
  width: 100%;
  max-height: 300px;
}

/* User Segment Table */
.user-segment-table {
  width: 100%;
  border-collapse: collapse;
}

.user-segment-table th,
.user-segment-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-main, #e5e7eb);
}

.user-segment-table th {
  font-weight: 600;
  font-size: 0.875rem;
  color: rgb(107, 114, 128);
}

/* Conversion Funnel Visual */
.funnel-stage {
  position: relative;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(59, 130, 246, 0.05) 100%
  );
  border-radius: 0.5rem;
}

/* Table Styles */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
}

.table thead th {
  font-weight: 600;
  color: rgb(107, 114, 128);
}

.table tbody tr {
  transition: background-color 0.15s ease;
}

.table tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.02);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Border utilities */
.border-block-start {
  border-top: 1px solid var(--border-main, #e5e7eb);
}

/* Spacing utilities */
.mbe-1 {
  margin-block-end: 0.25rem;
}
.mbe-2 {
  margin-block-end: 0.5rem;
}
.mbe-4 {
  margin-block-end: 1rem;
}
.mbe-6 {
  margin-block-end: 1.5rem;
}
.mbs-4 {
  margin-block-start: 1rem;
}
.mbs-6 {
  margin-block-start: 1.5rem;
}
.pbs-4 {
  padding-block-start: 1rem;
}
.pbs-6 {
  padding-block-start: 1.5rem;
}
.pbs-8 {
  padding-block-start: 2rem;
}
.pbe-4 {
  padding-block-end: 1rem;
}
.mis-2 {
  margin-inline-start: 0.5rem;
}
.gap-half {
  gap: 0.5rem;
}

/* Min width utilities */
.min-inline-size-48 {
  min-width: 12rem;
}
.min-inline-size-64 {
  min-width: 16rem;
}

/* Overflow utilities */
.overflow-x-auto {
  overflow-x: auto;
}

/* Space utilities */
.space-y-4 > * + * {
  margin-top: 1rem;
}