/* ═══════════════════════════════════════════
   RedStripe.io — Custom Styles
   ═══════════════════════════════════════════ */

:root {
  --rs-blue-deep: #0054a6;
  --rs-blue-mid: #3182ce;
  --rs-blue-light: #4299e1;
  --rs-blue-pale: #f0f7ff;
  --rs-red: #e53e3e;
  --rs-green: #38a169;
  --rs-orange: #dd6b20;
}

/* ── Gradient heading ── */
.gradient-heading {
  background: linear-gradient(90deg, #c0392b, #e74c3c, #ff6b6b, #e74c3c, #c0392b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 3s ease-in-out infinite;
  font-size: 1.75rem;
}
.gradient-heading i {
  -webkit-text-fill-color: initial;
  background: linear-gradient(90deg, #c0392b, #e74c3c, #ff6b6b, #e74c3c, #c0392b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 3s ease-in-out infinite;
}
@keyframes gradientFlow {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ── Card header tint ── */
.card-header { background-color: var(--rs-blue-pale); }

/* ── Solid badge white text ── */
.badge.bg-danger, .badge.bg-success, .badge.bg-secondary { color: #fff !important; }

/* ── Stat card ── */
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; flex-shrink: 0;
}
.stat-icon.blue   { background: linear-gradient(135deg, var(--rs-blue-deep), var(--rs-blue-light)); }
.stat-icon.green  { background: linear-gradient(135deg, #276749, var(--rs-green)); }
.stat-icon.orange { background: linear-gradient(135deg, #9c4221, var(--rs-orange)); }
.stat-icon.red    { background: linear-gradient(135deg, #9b2c2c, var(--rs-red)); }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: #1a202c; }
.stat-label { font-size: .8125rem; color: #718096; font-weight: 500; }
.stat-trend { font-size: .75rem; font-weight: 600; }
.stat-trend.up   { color: var(--rs-green); }
.stat-trend.down { color: var(--rs-red); }

/* ── Compliance gauge ── */
.compliance-ring { position: relative; width: 140px; height: 140px; margin: 0 auto; }
.compliance-ring svg { transform: rotate(-90deg); }
.compliance-ring .ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 10; }
.compliance-ring .ring-fg { fill: none; stroke-width: 10; stroke-linecap: round; }
.compliance-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.compliance-pct .pct { font-size: 2rem; font-weight: 800; color: #1a202c; }
.compliance-pct .lbl { font-size: .75rem; color: #718096; }

/* ── Violation pulse ── */
.violation-dot { width: 8px; height: 8px; background: var(--rs-red); border-radius: 50%; display: inline-block; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Retailer dot ── */
.retailer-dot {
  width: 32px; height: 32px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: .7rem;
  font-weight: 700; color: #fff; flex-shrink: 0;
}

/* ── Price status ── */
.price-below { color: var(--rs-red); font-weight: 700; }
.price-above { color: var(--rs-green); font-weight: 600; }
.price-match { color: #718096; }

/* ── Search box ── */
.search-box { position: relative; }
.search-box .form-control { padding-left: 2.5rem; }
.search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #a0aec0; }

/* ── Upload zone ── */
.upload-zone {
  border: 2px dashed #cbd5e0; border-radius: 12px; padding: 40px 20px;
  text-align: center; cursor: pointer; transition: all .2s; background: #f7fafc;
}
.upload-zone:hover { border-color: var(--rs-blue-light); background: var(--rs-blue-pale); }
.upload-zone i { font-size: 2.5rem; color: #a0aec0; }

/* ── Card hover ── */
.card { transition: box-shadow .2s; }
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); }

/* ── Row cards flex ── */
.row-cards > [class*="col"].d-flex > .card { flex: 1; width: 100%; }