/* ==========================================================================
   AgroPrix — Design Premium Layer
   Grille 8px, ombres diffuses, micro-interactions, typographie contrastée
   Appliqué PAR-DESSUS styles.css — cible les éléments générés par JS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Premium Overrides
   -------------------------------------------------------------------------- */
body {
  background: #F8F9FA;
  color: #1A1A2E;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* Smooth scroll + selection color */
::selection { background: rgba(45, 106, 79, 0.2); }

/* --------------------------------------------------------------------------
   2. Cards — Élévation & Profondeur
   -------------------------------------------------------------------------- */
.card, [class*="card"],
div[style*="border-radius"][style*="padding"][style*="background:#fff"],
div[style*="border-radius"][style*="padding"][style*="background:white"],
div[style*="border-radius"][style*="padding"][style*="background: #fff"],
div[style*="border-radius"][style*="padding"][style*="background: white"] {
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border-radius: 16px !important;
}

.card:hover, [class*="card"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.1) !important;
}

/* Cards dans le contenu principal */
.view-container .card,
.view-container [style*="border-radius"][style*="padding"] {
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   3. Typographie Premium
   -------------------------------------------------------------------------- */
h1, h2, h3, .card-title, [class*="title"] {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

h1, .page-title { font-size: 24px !important; }
h2 { font-size: 20px !important; }
h3, .card-title { font-size: 16px !important; }

/* Labels et textes secondaires */
label, .form-label, [style*="font-weight:600"] {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #374151 !important;
  letter-spacing: 0.01em;
}

/* Prix et chiffres importants */
[style*="font-size:22px"], [style*="font-size:24px"],
[style*="font-size:28px"], [style*="font-size:32px"] {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   4. Boutons Premium
   -------------------------------------------------------------------------- */
button, .btn, [class*="btn"],
[style*="cursor:pointer"][style*="border-radius"][style*="padding"] {
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

button:hover, .btn:hover, [class*="btn"]:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

button:active, .btn:active, [class*="btn"]:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Boutons verts principaux (CTA) */
.btn-analyse,
button[style*="background:var(--primary)"],
button[style*="background:#2D6A4F"],
button[style*="background:#1B4332"],
[style*="background:var(--primary)"][style*="cursor:pointer"],
[style*="background:linear-gradient"][style*="1B4332"] {
  box-shadow: 0 4px 14px rgba(27, 67, 50, 0.3) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  min-height: 48px;
}

.btn-analyse:hover,
button[style*="background:var(--primary)"]:hover,
button[style*="background:#2D6A4F"]:hover {
  box-shadow: 0 6px 20px rgba(27, 67, 50, 0.4) !important;
}

/* Boutons orange (secondaires) */
button[style*="background:#E8862A"],
button[style*="background:var(--gold)"],
[style*="background:linear-gradient"][style*="E8862A"] {
  box-shadow: 0 4px 14px rgba(232, 134, 42, 0.3) !important;
  border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   5. Formulaires Premium
   -------------------------------------------------------------------------- */
select, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"], textarea {
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  background: #FFFFFF !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  min-height: 48px;
}

select:focus, input:focus, textarea:focus {
  border-color: #2D6A4F !important;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12) !important;
  outline: none !important;
}

select {
  cursor: pointer;
}

/* Toggle switches */
input[type="checkbox"][role="switch"],
.toggle-switch {
  transition: background 0.2s ease !important;
}

/* --------------------------------------------------------------------------
   6. Topbar Premium
   -------------------------------------------------------------------------- */
.topbar {
  background: linear-gradient(135deg, #1B4332 0%, #2D6A4F 100%) !important;
  box-shadow: 0 2px 12px rgba(27, 67, 50, 0.3) !important;
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   7. Bottom Nav Premium
   -------------------------------------------------------------------------- */
.bottom-nav {
  background: #FFFFFF !important;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08) !important;
  border-top: none !important;
}

.bottom-nav a, .bottom-nav button {
  transition: color 0.2s ease, transform 0.15s ease !important;
}

.bottom-nav a:active, .bottom-nav button:active {
  transform: scale(0.92);
}

.bottom-nav a.active, .bottom-nav button.active,
.bottom-nav a[style*="color:var(--primary)"],
.bottom-nav a[style*="color:#2D6A4F"] {
  position: relative;
}

/* --------------------------------------------------------------------------
   8. Hero Card Premium
   -------------------------------------------------------------------------- */
[style*="background:linear-gradient"][style*="1B4332"][style*="border-radius"] {
  box-shadow: 0 8px 32px rgba(27, 67, 50, 0.35) !important;
  border-radius: 20px !important;
}

/* --------------------------------------------------------------------------
   9. Badges & Tags
   -------------------------------------------------------------------------- */
[style*="border-radius:10px"][style*="padding:2px"],
[style*="border-radius:8px"][style*="font-size:9px"],
[style*="border-radius:10px"][style*="font-size:10px"],
[style*="border-radius:12px"][style*="font-size:10px"] {
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease !important;
}

/* Badges pourcentage (opportunités) */
[style*="border-radius"][style*="font-weight:700"][style*="background:#d1fae5"],
[style*="border-radius"][style*="font-weight:700"][style*="background:#fee2e2"] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* --------------------------------------------------------------------------
   10. Tables Premium
   -------------------------------------------------------------------------- */
table, .data-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

th {
  background: #F3F4F6 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B7280 !important;
  padding: 12px 16px !important;
}

td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  border-bottom: 1px solid #F3F4F6 !important;
}

tr:hover td {
  background: rgba(45, 106, 79, 0.03);
}

/* --------------------------------------------------------------------------
   11. Alertes Marché (section jaune)
   -------------------------------------------------------------------------- */
[style*="background:linear-gradient"][style*="FEF3C7"],
[style*="background:#FEF3C7"],
[style*="background:linear-gradient"][style*="fef3c7"] {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(245, 166, 35, 0.15) !important;
  border: 1px solid rgba(245, 166, 35, 0.2) !important;
}

/* --------------------------------------------------------------------------
   12. Score/Jauge SVG
   -------------------------------------------------------------------------- */
svg circle {
  transition: stroke-dashoffset 1s ease !important;
}

/* --------------------------------------------------------------------------
   13. Sections alternées (fond)
   -------------------------------------------------------------------------- */
.view-container > div:nth-child(odd) > .card,
.view-container > .card:nth-child(odd) {
  background: #FFFFFF;
}

.view-container > div:nth-child(even) > .card,
.view-container > .card:nth-child(even) {
  background: #FAFBFC;
}

/* --------------------------------------------------------------------------
   14. Gamification
   -------------------------------------------------------------------------- */
[style*="border-radius"][style*="padding"][style*="background:#d1fae5"],
[style*="border-radius"][style*="padding"][style*="background:rgba(209,250,229"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer;
}

[style*="border-radius"][style*="padding"][style*="background:#d1fae5"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.15) !important;
}

/* --------------------------------------------------------------------------
   15. Ticker LIVE
   -------------------------------------------------------------------------- */
[style*="overflow:hidden"][style*="background:linear-gradient"][style*="1B4332"] {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(27, 67, 50, 0.2) !important;
}

/* --------------------------------------------------------------------------
   16. QR Code card
   -------------------------------------------------------------------------- */
[style*="border:3px solid var(--primary)"],
[style*="border:3px solid #2D6A4F"],
[style*="border:3px solid #1B4332"] {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(27, 67, 50, 0.15) !important;
  transition: transform 0.3s ease !important;
}

[style*="border:3px solid var(--primary)"]:hover {
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   17. Marketplace — Offres/Demandes
   -------------------------------------------------------------------------- */
[style*="border-left:4px solid"] {
  border-radius: 0 12px 12px 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

[style*="border-left:4px solid"]:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* --------------------------------------------------------------------------
   18. Stats KPI cards (grille)
   -------------------------------------------------------------------------- */
[style*="grid-template-columns"][style*="gap"] > div[style*="text-align:center"] {
  border-radius: 16px !important;
  padding: 16px !important;
  transition: transform 0.2s ease !important;
}

[style*="grid-template-columns"][style*="gap"] > div[style*="text-align:center"]:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   19. Scrollbar Premium
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(45, 106, 79, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(45, 106, 79, 0.4); }

/* --------------------------------------------------------------------------
   20. Page transitions — NO animation override to avoid breaking visibility
   -------------------------------------------------------------------------- */
.view-container.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   21. Loading skeleton
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
  border-radius: 8px !important;
}

/* --------------------------------------------------------------------------
   22. Empty states
   -------------------------------------------------------------------------- */
[style*="font-size:48px"][style*="margin-bottom"] {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

/* --------------------------------------------------------------------------
   23. Print optimization
   -------------------------------------------------------------------------- */
@media print {
  * { box-shadow: none !important; }
  .topbar, .bottom-nav, .sidebar { display: none !important; }
  body { background: white !important; }
}

/* --------------------------------------------------------------------------
   24. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   25. Focus visible (accessibilité)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #2D6A4F !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   26. Tooltip-style hover
   -------------------------------------------------------------------------- */
[title]:hover {
  cursor: help;
}