/* ============================================================
   Redax — style.css
   Version: 1.0.0
   Tailwind CDN is loaded in the HTML. This file handles:
   - CSS custom properties (design tokens)
   - Custom animations & keyframes
   - Utility classes not in Tailwind core
   - Component-specific overrides
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --brand-500: #d80000;
  --brand-600: #b80000;
  --brand-700: #9f0000;
  --brand-100: #fee2e2;
  --brand-200: #fecaca;
  --brand-300: #fca5a5;
  --brand-400: #f87171;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-900: #0f172a;

  --font-main: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-brand: 0 10px 40px -10px rgba(184,0,0,.35);
  --shadow-card:  0 4px 24px 0 rgba(15,23,42,.08);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background-color: var(--slate-50);
  color: var(--slate-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent FOUC on lucide icons */
[data-lucide] { display: inline-block; vertical-align: middle; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes floatLight {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.65s cubic-bezier(.22,1,.36,1) both;
}

.animate-fade-in-up-delay-1 {
  animation: fadeInUp 0.65s cubic-bezier(.22,1,.36,1) 0.1s both;
}

.animate-fade-in-up-delay-2 {
  animation: fadeInUp 0.65s cubic-bezier(.22,1,.36,1) 0.2s both;
}

.animate-fade-in-up-delay-3 {
  animation: fadeInUp 0.65s cubic-bezier(.22,1,.36,1) 0.3s both;
}

/* ── Glass / Blur panel ─────────────────────────────────────── */
.glass-panel {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* ── Background blobs (decorative) ─────────────────────────── */
.bg-blob {
  position: fixed;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(120px);
  z-index: 0;
}

.bg-blob--brand {
  top: -10%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: rgba(216, 0, 0, 0.07);
}

.bg-blob--orange {
  bottom: 10%;
  left: -10%;
  width: 40%;
  height: 40%;
  background: rgba(251, 146, 60, 0.06);
}

/* ── QR / Feature card — floating animation ─────────────────── */
/*
   Wrapper handles the vertical float (translateY).
   Inner handles the rotate + smooth hover transition.
   Keeping them separate avoids the browser conflict where
   a CSS animation and a transition fight over the same property.
*/
.visual-float-wrapper {
  animation: floatY 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.visual-float-inner {
  transform: rotate(2deg);
  transition: transform 0.5s cubic-bezier(.22,1,.36,1),
              box-shadow 0.4s ease;
}

.visual-float-wrapper:hover .visual-float-inner {
  transform: rotate(0deg);
  box-shadow: 0 20px 60px -10px rgba(15,23,42,.15);
}

/* ── Activity panel (Retours clients + Activités auto) ──────── */
/*
   Previously dark (slate-900 bg). Now white/light to match the
   real app screenshots. The card gets a subtle lift on hover.
*/
.activity-panel {
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1),
              box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}

.activity-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -8px rgba(15,23,42,.14);
}

/* Activity item rows */
.activity-item {
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--slate-100);
  background: var(--slate-50);
  transition: border-color 0.2s, background 0.2s;
}

.activity-item:hover { border-color: var(--slate-200); background: #fff; }

.activity-item--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.activity-item--auto {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.activity-item--warn {
  background: #fff7ed;
  border-color: #fed7aa;
}

/* Section divider inside the activity panel on desktop */
.activity-divider {
  border-left: 1px solid var(--slate-200);
}

/* Activity section headers */
.activity-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ── App demo container ─────────────────────────────────────── */
.app-demo-wrapper {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  text-align: left;
}

.app-demo-glow {
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, rgba(184,0,0,.25), rgba(234,88,12,.2));
  border-radius: 1.25rem;
  filter: blur(8px);
  opacity: 0.2;
  pointer-events: none;
}

/* ── Brand button ───────────────────────────────────────────── */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: var(--brand-600);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 28px -6px rgba(184,0,0,.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-brand:hover {
  background: var(--brand-700);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -6px rgba(184,0,0,.55);
}

/* ── Sidebar nav active item ────────────────────────────────── */
.sidebar-active {
  background: var(--brand-600);
  color: #fff;
  border-radius: 0.375rem;
}

/* ── Invoice rows — qty input ───────────────────────────────── */
.qty-input:focus {
  border-bottom-color: var(--brand-600) !important;
  outline: none;
}

/* ── Pricing card ───────────────────────────────────────────── */
.pricing-card {
  background: var(--slate-900);
  border: 1px solid var(--brand-600);
  border-radius: 1.5rem;
  box-shadow: 0 24px 80px -16px rgba(184,0,0,.25);
  position: relative;
  overflow: hidden;
}

.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(184,0,0,.12) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer a:hover { color: var(--brand-600); }

/* ── Responsive helpers ─────────────────────────────────────── */
@media (max-width: 768px) {
  .activity-divider { border-left: none; border-top: 1px solid var(--slate-200); padding-top: 1rem; margin-top: 1rem; }
}

/* ── Cache-busting note ─────────────────────────────────────── */
/* Add ?v=X.X.X to <link> and <script> tags in HTML when deploying */