/* ═══════════════════════════════════════════════════════════
   EmailSurvey — Professional Theme
   Design: Clean fintech/LinkedIn aesthetic
   Primary: Deep Navy #0A2540
   Accent:  Emerald #00A36C  
   Surface: White with subtle warm grays
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --navy:        #0A2540;
  --navy-mid:    #1a3a5c;
  --navy-light:  #e8f0fe;
  --emerald:     #00A36C;
  --emerald-mid: #008f5d;
  --emerald-light: #e6f7f1;
  --gold:        #F5A623;
  --gold-light:  #fef6e6;
  --surface:     #ffffff;
  --surface-2:   #f7f9fc;
  --surface-3:   #eef1f5;
  --border:      #e2e8f0;
  --border-dark: #cbd5e1;
  --text-1:      #0f172a;
  --text-2:      #475569;
  --text-3:      #94a3b8;
  --danger:      #dc2626;
  --warning:     #d97706;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --shadow-sm:   0 1px 3px rgba(10,37,64,.06), 0 1px 2px rgba(10,37,64,.04);
  --shadow:      0 4px 12px rgba(10,37,64,.08), 0 2px 4px rgba(10,37,64,.04);
  --shadow-lg:   0 12px 32px rgba(10,37,64,.12), 0 4px 8px rgba(10,37,64,.06);
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background: var(--navy) !important;
  border-bottom: none !important;
  padding: 0 1.5rem !important;
  height: 60px;
  box-shadow: 0 2px 8px rgba(10,37,64,.2);
}

.navbar-brand {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar-brand::before {
  content: '';
  width: 28px;
  height: 28px;
  background: var(--emerald);
  border-radius: 8px;
  display: inline-block;
  flex-shrink: 0;
}

.navbar .nav-link {
  color: rgba(255,255,255,.75) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--radius-sm);
  transition: all .15s;
}

.navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}

.navbar .nav-link.text-warning {
  color: var(--gold) !important;
}

/* Points badge in navbar */
.navbar .badge.bg-warning {
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
}

.navbar .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}

.navbar .dropdown-item {
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  padding: 7px 12px;
  color: var(--text-1);
}

.navbar .dropdown-item:hover {
  background: var(--surface-2);
}

/* ── Flash Messages ───────────────────────────────────────── */
.alert {
  border-radius: var(--radius) !important;
  border: none !important;
  font-size: 13.5px;
  font-weight: 500;
}

.alert-success { background: var(--emerald-light) !important; color: #065f46 !important; }
.alert-danger   { background: #fee2e2 !important; color: #991b1b !important; }
.alert-warning  { background: var(--gold-light) !important; color: #92400e !important; }
.alert-info     { background: var(--navy-light) !important; color: #1e3a5f !important; }

/* ── Main Container ───────────────────────────────────────── */
main.container {
  max-width: 1140px;
  padding: 2rem 1.5rem !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
  transition: box-shadow .2s, transform .2s;
}

.card:hover { box-shadow: var(--shadow) !important; }

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 1rem 1.25rem !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
}

.card-body { padding: 1.25rem !important; }

.card-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* ── Stat / Metric Cards ──────────────────────────────────── */
.stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.25rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .2s, transform .15s;
}

.stat-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px);
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.stat-card .stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.stat-icon.green  { background: var(--emerald-light); color: var(--emerald); }
.stat-icon.navy   { background: var(--navy-light);    color: var(--navy); }
.stat-icon.gold   { background: var(--gold-light);    color: var(--gold); }
.stat-icon.red    { background: #fee2e2;              color: var(--danger); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 16px !important;
  transition: all .15s !important;
  border-width: 1px !important;
}

.btn-primary {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--navy-mid) !important;
  border-color: var(--navy-mid) !important;
}

.btn-success {
  background: var(--emerald) !important;
  border-color: var(--emerald) !important;
  color: #fff !important;
}
.btn-success:hover {
  background: var(--emerald-mid) !important;
  border-color: var(--emerald-mid) !important;
}

.btn-outline-primary {
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}
.btn-outline-primary:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

.btn-outline-success {
  color: var(--emerald) !important;
  border-color: var(--emerald) !important;
}
.btn-outline-success:hover {
  background: var(--emerald) !important;
  color: #fff !important;
}

.btn-lg {
  padding: 10px 24px !important;
  font-size: 15px !important;
  border-radius: var(--radius) !important;
}

.btn-sm {
  padding: 4px 12px !important;
  font-size: 12.5px !important;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em;
}

.bg-success { background: var(--emerald) !important; }
.bg-primary { background: var(--navy) !important; }
.bg-warning { background: var(--gold) !important; color: var(--navy) !important; }
.bg-info    { background: #0891b2 !important; }

/* ── Tables ───────────────────────────────────────────────── */
.table {
  font-size: 13.5px;
  color: var(--text-1);
}

.table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 12px !important;
  background: var(--surface-2);
}

.table td {
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
  color: var(--text-1);
}

.table-hover tbody tr:hover {
  background: var(--surface-2) !important;
}

.table-light { background: var(--surface-2) !important; }

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select {
  border: 1px solid var(--border-dark) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
  color: var(--text-1) !important;
  background: var(--surface) !important;
  transition: border-color .15s, box-shadow .15s !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(10,37,64,.08) !important;
  outline: none !important;
}

.form-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  margin-bottom: 5px !important;
}

.form-text { font-size: 12px !important; color: var(--text-3) !important; }

/* ── Progress ─────────────────────────────────────────────── */
.progress {
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--surface-3) !important;
}

.progress-bar {
  border-radius: 99px !important;
}

.progress-bar.bg-success { background: var(--emerald) !important; }
.progress-bar.bg-info    { background: #0891b2 !important; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { gap: 3px; }

.page-link {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  padding: 5px 11px !important;
  background: var(--surface) !important;
  transition: all .15s !important;
}

.page-link:hover {
  background: var(--surface-2) !important;
  color: var(--text-1) !important;
}

.page-item.active .page-link {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

/* ── List groups ──────────────────────────────────────────── */
.list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 13.5px;
}

.list-group-item:last-child { border-bottom: none !important; }
.list-group-item-action:hover { background: var(--surface-2) !important; }

/* ── Modals ───────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 1rem 1.25rem !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 1rem 1.25rem !important;
}

/* ── Points & earnings highlight ──────────────────────────── */
.points-positive { color: var(--emerald) !important; font-weight: 600; }
.points-negative { color: var(--danger) !important;  font-weight: 600; }
.points-neutral  { color: var(--text-3) !important; }

.earning-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--emerald-light);
  color: var(--emerald-mid);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── Page headers ─────────────────────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
}

.page-header h4, .page-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
}

.page-header .text-muted {
  font-size: 13.5px;
  color: var(--text-3) !important;
}

/* ── Tier badges ──────────────────────────────────────────── */
.tier-new      { background: #f1f5f9; color: #64748b; }
.tier-trusted  { background: var(--navy-light); color: var(--navy); }
.tier-advanced { background: #e0f2fe; color: #0369a1; }
.tier-elite    { background: var(--gold-light); color: #92400e; }

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  padding: 1rem 0 !important;
  font-size: 12.5px;
  color: var(--text-3) !important;
}

/* ── Utility ──────────────────────────────────────────────── */
.text-muted { color: var(--text-3) !important; }
.text-success { color: var(--emerald) !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

.font-mono { font-family: 'SF Mono', 'Fira Code', monospace; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  main.container { padding: 1rem !important; }
  .stat-card .stat-value { font-size: 1.5rem; }
  .navbar { padding: 0 1rem !important; }
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   PREMIUM REFINEMENTS  (v2 — polished UI/UX pass)
   Reusable component classes; softer hierarchy; calmer color.
   ═══════════════════════════════════════════════════════════ */

/* Softer, less "dashboardy" stat labels — premium look */
.stat-card .stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 3px;
}
.stat-card .stat-value { font-weight: 600; }

/* Section / sub-section titles */
.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin: 0;
}
.page-sub { font-size: 13px; color: var(--text-3); margin: 2px 0 0; }

/* ── Status pills (consistent everywhere) ─────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: 0;
}
.pill i { font-size: 11px; }
.pill-awaiting  { background: var(--gold-light);    color: #92400e; }
.pill-review    { background: #eff6ff;              color: #1d4ed8; }
.pill-validated { background: var(--emerald-light); color: var(--emerald-mid); }
.pill-rejected  { background: #fee2e2;              color: #991b1b; }
.pill-expired   { background: #fef3c7;              color: #92400e; }
.pill-pending   { background: var(--surface-3);     color: var(--text-2); }
.pill-neutral   { background: var(--surface-3);     color: var(--text-2); }

/* ── Queue rows (list-of-cards pattern) ───────────────────── */
.q-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.q-row + .q-row { margin-top: 10px; }
.q-row:hover { border-color: var(--border-dark); box-shadow: var(--shadow-sm); }
.q-row.is-muted { background: var(--surface-2); }

.q-tile {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 19px;
}
.q-tile.gold  { background: var(--gold-light);    color: var(--gold); }
.q-tile.green { background: var(--emerald-light); color: var(--emerald); }
.q-tile.navy  { background: var(--navy-light);    color: var(--navy); }
.q-tile.blue  { background: #eff6ff;              color: #1d4ed8; }
.q-tile.red   { background: #fee2e2;              color: var(--danger); }
.q-tile.muted { background: var(--surface-2);     color: var(--text-3); }

.q-main  { min-width: 0; flex: 1; }
.q-title { font-size: 14.5px; font-weight: 600; color: var(--text-1);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-sub   { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.q-meta  { text-align: right; flex-shrink: 0; }
.q-value { font-size: 14.5px; font-weight: 600; color: var(--text-1); }
.q-value.gold  { color: var(--gold); }
.q-value.green { color: var(--emerald); }
.q-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Tier ladder ──────────────────────────────────────────── */
.tier-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius);
}
.tier-step.is-current {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.tier-step.is-locked { opacity: .5; }
.tier-step .tier-name { font-size: 13.5px; color: var(--text-2); }
.tier-step.is-current .tier-name { font-weight: 600; color: var(--text-1); }

/* ── Reward icon tile ─────────────────────────────────────── */
.reward-tile {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-size: 22px;
  background: var(--gold-light);
  color: var(--gold);
}

/* ── Filter / segmented buttons ───────────────────────────── */
.seg {
  display: inline-flex;
  background: var(--surface-3);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  padding: 5px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: all .15s;
}
.seg a.active { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-sm); }
.seg a:hover:not(.active) { color: var(--text-1); }

/* Small refinements */
.card { box-shadow: var(--shadow-sm) !important; }
.card:hover { box-shadow: var(--shadow-sm) !important; }   /* calmer: no hover lift on static cards */
.empty-tile {
  width: 56px; height: 56px;
  background: var(--surface-2);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px; color: var(--text-3);
}

@media (max-width: 640px) {
  .q-row { flex-wrap: wrap; }
  .q-actions { width: 100%; justify-content: flex-end; }
}