/* Sarah Social Media Manager – Custom Styles */

:root {
  --brand-green:  #2d7a3a;
  --brand-gold:   #c9952a;
  --brand-rose:   #e05280;
}

/* ── Global ───────────────────────────────────────────────────────────── */
body {
  background: #f4f6f9;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.9rem;
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
#main-nav {
  background: linear-gradient(135deg, var(--brand-green) 0%, #1a4d24 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
#main-nav .nav-link { color: rgba(255,255,255,.85); }
#main-nav .nav-link:hover,
#main-nav .nav-link.active { color: #fff; }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.stat-card {
  transition: transform .15s;
  border-radius: 12px !important;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-icon { font-size: 2rem; }
.stat-number { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.stat-label  { font-size: .75rem; color: #6c757d; text-transform: uppercase; letter-spacing: .5px; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card { border-radius: 12px !important; }
.card-header { border-radius: 12px 12px 0 0 !important; }

/* ── Hashtag chips ────────────────────────────────────────────────────── */
.hashtag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  padding: 4px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #fff;
}
.hashtag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0d6efd;
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .78rem;
  font-weight: 500;
}

/* ── Review grid ─────────────────────────────────────────────────────── */
.btn-xs { padding: .1rem .4rem; font-size: .72rem; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast { min-width: 220px; }

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.monitor-active { animation: pulse-dot 1.5s infinite; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table { font-size: .85rem; }
.table th { font-weight: 600; color: #495057; }

/* ── Pipeline log ────────────────────────────────────────────────────── */
#live-log { background: #1e1e1e; color: #d4d4d4; padding: 10px; border-radius: 8px; }

/* ── Accordion ───────────────────────────────────────────────────────── */
.accordion-button:not(.collapsed) { background: #e8f4ea; color: var(--brand-green); }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .25rem; }
.form-control, .form-select {
  font-size: .88rem;
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 .2rem rgba(45,122,58,.2);
}

/* ── Responsive helpers ──────────────────────────────────────────────── */
@media (max-width: 576px) {
  .stat-number { font-size: 1.6rem; }
  .stat-icon   { font-size: 1.4rem; }
}