/* ============================================================================
   CivilHive — Shared Design System
   Single source of truth for brand tokens, animations, animated backgrounds,
   and reusable components. Loaded globally via base.html.
   Brand: navy #0F172A · blue #2563EB · orange #EA580C
   ========================================================================== */

/* ─── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --ch-primary:        #2563EB;
  --ch-primary-dark:   #1D4ED8;
  --ch-primary-light:  #3B82F6;
  --ch-primary-soft:   #EFF6FF;
  --ch-accent:         #EA580C;
  --ch-accent-dark:    #C2410C;
  --ch-accent-light:   #FB923C;
  --ch-accent-soft:    #FFF4EE;
  --ch-navy:           #0F172A;
  --ch-navy-2:         #1E293B;

  /* Semantic */
  --ch-success:        #16A34A;
  --ch-success-soft:   #DCFCE7;
  --ch-danger:         #DC2626;
  --ch-danger-soft:    #FEE2E2;
  --ch-warning:        #F59E0B;
  --ch-warning-soft:   #FEF3C7;
  --ch-info:           #0891B2;
  --ch-info-soft:      #ECFEFF;
  --ch-violet:         #7C3AED;
  --ch-violet-soft:    #F5F3FF;

  /* Surfaces */
  --ch-bg:             #F1F5F9;
  --ch-surface:        #FFFFFF;
  --ch-surface-2:      #F8FAFC;
  --ch-text:           #0F172A;
  --ch-muted:          #64748B;
  --ch-border:         #E2E8F0;

  /* Effects */
  --ch-shadow:         0 12px 34px rgba(15, 23, 42, 0.10);
  --ch-shadow-sm:      0 4px 14px rgba(15, 23, 42, 0.07);
  --ch-shadow-lg:      0 24px 60px rgba(15, 23, 42, 0.16);
  --ch-radius:         16px;
  --ch-radius-sm:      12px;
  --ch-radius-lg:      22px;

  /* Gradients */
  --ch-grad-brand:     linear-gradient(135deg, #2563EB 0%, #1D4ED8 45%, #EA580C 130%);
  --ch-grad-blue:      linear-gradient(135deg, #3B82F6, #1D4ED8);
  --ch-grad-orange:    linear-gradient(135deg, #FB923C, #EA580C);
  --ch-grad-navy:      linear-gradient(135deg, #0F172A, #1E293B);
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--ch-text);
  background-color: var(--ch-bg);
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  min-height: calc(100vh - 220px);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.navbar {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ch-border);
  transition: all 0.25s ease;
  position: relative;
  z-index: 10;
}
.navbar.scrolled {
  box-shadow: var(--ch-shadow-sm);
  background: rgba(255, 255, 255, 0.97);
}
.navbar-brand {
  font-weight: 800;
  color: var(--ch-text) !important;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.navbar-brand img { transition: transform 0.3s ease; }
.navbar-brand:hover img { transform: rotate(-6deg) scale(1.06); }

.nav-link {
  color: #334155 !important;
  font-weight: 600;
  margin-left: 0.25rem;
  border-radius: 9px;
  padding: 0.55rem 0.8rem !important;
  transition: all 0.2s ease;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  background: var(--ch-grad-orange);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}
.nav-link:hover::after, .nav-link:focus::after { width: 60%; }
.nav-link:hover, .nav-link:focus {
  color: var(--ch-primary) !important;
  background: var(--ch-primary-soft);
}
.nav-link i { margin-right: 0.35rem; font-size: 1rem; }

.dropdown-menu {
  border: 1px solid var(--ch-border);
  box-shadow: var(--ch-shadow);
  border-radius: 14px;
  padding: 0.5rem;
  animation: ddIn 0.18s ease;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-item { border-radius: 9px; padding: 0.5rem 0.75rem; font-weight: 500; transition: all 0.15s ease; }
.dropdown-item:hover { background: var(--ch-primary-soft); color: var(--ch-primary); transform: translateX(3px); }
.dropdown-item i { width: 18px; text-align: center; margin-right: 0.5rem; }

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: var(--ch-surface);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--ch-shadow); }

.ch-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow-sm);
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease, border-color 0.2s ease;
}
.ch-card:hover { transform: translateY(-5px); box-shadow: var(--ch-shadow); border-color: #BFD3F5; }

/* Bootstrap's .card-body / .card-header padding comes from --bs-card-spacer-*,
   which are only defined on .card — not .ch-card. Restore sensible padding so
   content inside a .ch-card never sits flush against the edges. */
.ch-card > .card-header {
  padding: 1rem 1.5rem;
  border: none;
}
.ch-card > .card-body { padding: 1.5rem; }
.ch-card > .card-header + .card-body { padding-top: 1.25rem; }
@media (max-width: 575.98px) {
  .ch-card > .card-header { padding: 0.875rem 1.1rem; }
  .ch-card > .card-body { padding: 1.1rem; }
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background-color: var(--ch-primary); border-color: var(--ch-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--ch-primary-dark); border-color: var(--ch-primary-dark); }

.ch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 11px; font-weight: 700; font-size: 0.92rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ch-btn:active { transform: translateY(1px); }
.ch-btn-primary { background: var(--ch-grad-blue); color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,0.28); }
.ch-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,99,235,0.36); }
.ch-btn-accent { background: var(--ch-grad-orange); color: #fff; box-shadow: 0 8px 20px rgba(234,88,12,0.28); }
.ch-btn-accent:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(234,88,12,0.36); }
.ch-btn-ghost { background: transparent; color: #CBD5E1; border: 1.5px solid #334155; }
.ch-btn-ghost:hover { color: #fff; border-color: #64748B; }
.ch-btn-outline { background: var(--ch-surface); color: #334155; border: 1.5px solid var(--ch-border); }
.ch-btn-outline:hover { border-color: var(--ch-primary); color: var(--ch-primary); }

/* ─── Forms ─────────────────────────────────────────────────────────────── */
.form-control, .form-select { border-radius: 10px; border: 1px solid #CBD5E1; padding: 0.7rem 0.95rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--ch-primary);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
}

/* ─── Badges (status) ───────────────────────────────────────────────────── */
.badge-open        { background-color: var(--ch-primary); }
.badge-in-progress { background-color: var(--ch-warning); color: #1f2937; }
.badge-completed   { background-color: var(--ch-success); }
.badge-cancelled   { background-color: var(--ch-danger); }
.badge-submitted   { background-color: var(--ch-info); }
.badge-accepted    { background-color: var(--ch-success); }
.badge-rejected    { background-color: var(--ch-danger); }
.badge-withdrawn   { background-color: #64748B; }

.ch-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.ch-badge-success { background: var(--ch-success-soft); color: #166534; }
.ch-badge-warning { background: var(--ch-warning-soft); color: #92400E; }
.ch-badge-danger  { background: var(--ch-danger-soft);  color: #991B1B; }
.ch-badge-info    { background: var(--ch-primary-soft); color: #1E40AF; }

/* ─── Alerts ────────────────────────────────────────────────────────────── */
.alert { border-radius: 12px; border: 1px solid transparent; }

/* ─── Stars / ratings ───────────────────────────────────────────────────── */
.stars { color: #FBBF24; font-size: 1rem; }

/* ─── Glass cards ───────────────────────────────────────────────────────── */
.glass-card, .glass-card-grey {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--ch-shadow-sm);
  transition: transform 0.25s ease;
}
.glass-card:hover, .glass-card-grey:hover, .subsciption-card:hover { transform: translateY(-2px); }

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty-state, .ch-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ch-muted); }
.empty-state i, .ch-empty i { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6; }

/* ============================================================================
   SHARED COMPONENTS
   ========================================================================== */

/* ─── Page header (animated gradient bar) ───────────────────────────────── */
.ch-page-header {
  position: relative;
  overflow: hidden;
  background: var(--ch-grad-navy);
  border-radius: var(--ch-radius-lg);
  padding: 2rem 2.25rem;
  margin-bottom: 1.75rem;
  color: #fff;
  box-shadow: var(--ch-shadow);
}
.ch-page-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 12% 20%, rgba(37,99,235,0.40), transparent 60%),
    radial-gradient(ellipse 55% 75% at 88% 90%, rgba(234,88,12,0.28), transparent 60%);
  background-size: 200% 200%;
  animation: gradientShift 14s ease infinite;
  pointer-events: none;
}
.ch-page-header > * { position: relative; z-index: 1; }
.ch-page-header h1, .ch-page-header h2 { font-weight: 900; letter-spacing: -0.02em; margin: 0; }
.ch-page-header p { color: rgba(226,232,240,0.85); margin: 6px 0 0; }
.ch-page-header .ch-eyebrow { color: var(--ch-accent-light); }

/* ─── Eyebrow / section header ──────────────────────────────────────────── */
.ch-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(234,88,12,0.10); border: 1px solid rgba(234,88,12,0.28);
  color: var(--ch-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 12px;
}
.ch-sec-title { font-size: 1.6rem; font-weight: 900; color: var(--ch-navy); margin-bottom: 6px; letter-spacing: -0.02em; }
.ch-sec-sub   { font-size: 0.9rem; color: var(--ch-muted); }

/* ─── Stat cards ────────────────────────────────────────────────────────── */
.ch-stat-card {
  position: relative;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius);
  padding: 1.25rem 1.3rem;
  display: flex; align-items: center; gap: 1rem;
  min-height: 104px;
  overflow: hidden;
  box-shadow: var(--ch-shadow-sm);
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease;
}
.ch-stat-card::after {
  content: ''; position: absolute; right: -28px; top: -28px;
  width: 96px; height: 96px; border-radius: 50%;
  background: currentColor; opacity: 0.06; transition: transform 0.3s ease;
}
.ch-stat-card:hover { transform: translateY(-5px); box-shadow: var(--ch-shadow); }
.ch-stat-card:hover::after { transform: scale(1.4); }
.ch-stat-icon {
  width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
}
.ch-stat-number { font-size: 1.85rem; font-weight: 800; color: var(--ch-text); margin: 0; line-height: 1.1; }
.ch-stat-label  { color: var(--ch-muted); margin: 0.2rem 0 0; font-size: 0.85rem; font-weight: 600; }

.ch-stat-blue   { color: var(--ch-primary); }   .ch-stat-blue   .ch-stat-icon { background: var(--ch-grad-blue); }
.ch-stat-orange { color: var(--ch-accent); }    .ch-stat-orange .ch-stat-icon { background: var(--ch-grad-orange); }
.ch-stat-green  { color: var(--ch-success); }   .ch-stat-green  .ch-stat-icon { background: linear-gradient(135deg, #22C55E, #16A34A); }
.ch-stat-violet { color: var(--ch-violet); }     .ch-stat-violet .ch-stat-icon { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.ch-stat-cyan   { color: var(--ch-info); }       .ch-stat-cyan   .ch-stat-icon { background: linear-gradient(135deg, #22D3EE, #0891B2); }
.ch-stat-navy   { color: var(--ch-navy); }       .ch-stat-navy   .ch-stat-icon { background: var(--ch-grad-navy); }
.ch-stat-danger { color: var(--ch-danger); }     .ch-stat-danger .ch-stat-icon { background: linear-gradient(135deg, #F87171, #DC2626); }

/* ─── Tables ────────────────────────────────────────────────────────────── */
.ch-table th, .table th {
  font-weight: 600; color: #475569;
  border-bottom: 1px solid var(--ch-border);
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em;
}
.ch-table tbody tr, .table tbody tr { border-bottom: 1px solid #F1F5F9; transition: background 0.15s ease; }
.ch-table tbody tr:hover, .table tbody tr:hover { background-color: var(--ch-surface-2); }

/* ============================================================================
   ANIMATIONS
   ========================================================================== */

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.07s; }
.reveal.delay-2 { transition-delay: 0.14s; }
.reveal.delay-3 { transition-delay: 0.21s; }
.reveal.delay-4 { transition-delay: 0.28s; }
.reveal.delay-5 { transition-delay: 0.35s; }
.reveal.delay-6 { transition-delay: 0.42s; }

/* Entrance helpers */
.anim-fade-in { animation: fadeIn 0.6s ease both; }
.anim-slide-r { animation: slideRight 0.55s ease both; }
.anim-pop     { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn      { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes gradientShift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
@keyframes iconBounce {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.22) translateY(-4px); }
  60%  { transform: scale(0.96) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  33%      { transform: translateY(-26px) translateX(14px) rotate(8deg); }
  66%      { transform: translateY(14px) translateX(-12px) rotate(-6deg); }
}
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.5); } 50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } }

/* ─── Gradient animated text ────────────────────────────────────────────── */
.ch-gradient-text {
  background: linear-gradient(90deg, #2563EB, #3B82F6, #FB923C, #EA580C, #2563EB);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientText 6s linear infinite;
}
@keyframes gradientText { to { background-position: 300% center; } }

/* ─── Typewriter ────────────────────────────────────────────────────────── */
.ch-typewriter {
  display: inline-block;
  border-right: 3px solid var(--ch-accent-light);
  white-space: nowrap;
  overflow: hidden;
  animation: blink 0.8s step-end infinite;
}

/* ─── Animated mesh background (opt-in container) ───────────────────────── */
.ch-animated-bg { position: relative; overflow: hidden; }
.ch-animated-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 50% 55% at 18% 22%, rgba(37,99,235,0.45), transparent 60%),
    radial-gradient(ellipse 45% 50% at 82% 28%, rgba(234,88,12,0.30), transparent 60%),
    radial-gradient(ellipse 55% 60% at 60% 92%, rgba(124,58,237,0.22), transparent 60%);
  background-size: 200% 200%;
  animation: gradientShift 16s ease infinite;
  pointer-events: none;
}
.ch-animated-bg > * { position: relative; z-index: 1; }

/* ─── Floating particle shapes ──────────────────────────────────────────── */
.ch-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ch-particles span {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  animation: float linear infinite;
}
.ch-particles span:nth-child(1) { width: 80px;  height: 80px;  left: 8%;  top: 18%; animation-duration: 18s; }
.ch-particles span:nth-child(2) { width: 130px; height: 130px; left: 70%; top: 12%; animation-duration: 23s; background: radial-gradient(circle at 30% 30%, rgba(251,146,60,0.20), transparent); }
.ch-particles span:nth-child(3) { width: 50px;  height: 50px;  left: 42%; top: 62%; animation-duration: 15s; }
.ch-particles span:nth-child(4) { width: 100px; height: 100px; left: 84%; top: 66%; animation-duration: 26s; background: radial-gradient(circle at 30% 30%, rgba(59,130,246,0.20), transparent); }
.ch-particles span:nth-child(5) { width: 64px;  height: 64px;  left: 24%; top: 80%; animation-duration: 20s; }
.ch-particles span:nth-child(6) { width: 38px;  height: 38px;  left: 56%; top: 24%; animation-duration: 17s; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,0.22), transparent); }

/* ─── Material price marquee (shared) ───────────────────────────────────── */
.ch-marquee { display: flex; align-items: center; background: var(--ch-navy); height: 38px; overflow: hidden; width: 100%; }
.ch-marquee .ch-marquee-label {
  flex-shrink: 0; display: flex; align-items: center; background: var(--ch-accent);
  height: 38px; padding: 0 16px; font-size: 11px; font-weight: 800; color: #fff;
  letter-spacing: 0.7px; border-right: 1px solid rgba(255,255,255,0.15); white-space: nowrap;
}
.ch-marquee .ch-marquee-viewport { flex: 1; overflow: hidden; height: 38px; display: flex; align-items: center; }
.ch-marquee .marquee-track { display: flex; align-items: center; white-space: nowrap; animation: marquee-scroll 55s linear infinite; will-change: transform; }
.ch-marquee:hover .marquee-track { animation-play-state: paused; }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  color: #E2E8F0;
  background: linear-gradient(135deg, #0F172A, #1E293B);
  padding: 2.5rem 0 1.75rem;
  margin-top: 3rem;
  border-top: 1px solid #334155;
  position: relative; z-index: 1;
}
.site-footer h5 { font-weight: 700; color: #F8FAFC; }
.site-footer a { color: #CBD5E1; text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: #F8FAFC; text-decoration: underline; }
.site-footer .ch-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; margin-right: 8px;
  background: rgba(255,255,255,0.08); color: #E2E8F0 !important;
  transition: transform 0.2s ease, background 0.2s ease;
}
.site-footer .ch-social:hover { transform: translateY(-3px); background: var(--ch-primary); text-decoration: none; }

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}