/* ============================================================
   AgroLoupe — Override theme (bleu canard · vert · moutarde)
   ------------------------------------------------------------
   Drop-in CSS that re-skins the live Flask app without
   touching base.html. It works by:
     1. Redefining the existing CSS variables (--brand-navy,
        --brand-orange, --green-dark…) — every selector in
        base.html that uses them auto-updates.
     2. Adding targeted overrides for the few components that
        used hard-coded colors (header gradient, banderole,
        culture tabs, login).

   Install
   -------
   1. Copy this file to:   webapp/static/agroloupe-theme.css
   2. Add this <link> in webapp/templates/base.html, AFTER the
      Bootstrap line and AFTER the existing inline <style> block:

      <link rel="stylesheet" href="/static/agroloupe-theme.css">

   3. Reload. To rollback: just remove the <link>.
   ============================================================ */

:root {
  /* ─── Brand v2 — bleu canard · vert forêt · moutarde ─── */
  --brand-canard:      #1d5673;
  --brand-canard-2:    #2f7a99;
  --brand-canard-deep: #0e3c54;
  --brand-canard-pale: #e3ecf2;

  --brand-forest:      #4a7c3a;
  --brand-sage:        #8aa978;
  --brand-leaf-pale:   #eaf1e2;

  --brand-mustard:     #d4a72c;
  --brand-mustard-deep:#a87f15;
  --brand-mustard-pale:#fbf2d5;

  --brand-clay:        #b86b3a;

  /* Rewire existing variables (legacy names) → new palette */
  --brand-navy:    var(--brand-canard);
  --brand-navy-2:  var(--brand-canard-2);
  --brand-green:   var(--brand-forest);
  --brand-lime:    var(--brand-sage);
  --brand-orange:  var(--brand-mustard);
  --brand-orange-deep: var(--brand-mustard-deep);
  --brand-cyan:    var(--brand-canard-2);

  --green-dark:    var(--brand-canard);
  --green-mid:     var(--brand-forest);
  --green-light:   var(--brand-leaf-pale);
  --green-pale:    var(--brand-canard-pale);
}


/* Nav links inside the light header */
.app-nav a {
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
}
.app-nav a:hover {
  background: var(--brand-canard-pale) !important;
  color: var(--brand-canard-deep) !important;
}
.app-nav a.active {
  background: var(--brand-canard) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(29,86,115,.30) !important;
}

/* Me contacter — single mustard CTA */
.app-nav .me-contacter {
  background: var(--brand-mustard) !important;
  color: #1a1a1a !important;
  border: 1px solid var(--brand-mustard-deep) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}
.app-nav .me-contacter:hover {
  background: #e8c660 !important;
  color: #1a1a1a !important;
  transform: none !important;
}

/* Dropdowns inside the light header — re-color triggers */
.accueil-dropdown > a,
.filiere-dropdown > a,
.user-dropdown > a,
.admin-dropdown > a {
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
}
.accueil-dropdown > a:hover,
.filiere-dropdown > a:hover,
.user-dropdown > a:hover,
.admin-dropdown > a:hover {
  background: var(--brand-canard-pale) !important;
  color: var(--brand-canard-deep) !important;
}
.accueil-dropdown > a.active,
.filiere-dropdown > a.active {
  background: var(--brand-canard) !important;
  color: #fff !important;
}

/* User + admin pills on the right */
.user-dropdown > a {
  border: 1px solid #d6dad5 !important;
  background: #fff !important;
  border-radius: 8px !important;
  color: var(--brand-canard-deep) !important;
}
.admin-dropdown > a {
  background: var(--brand-canard-deep) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.logout-btn-direct {
  background: #fff !important;
  border: 1px solid #d6dad5 !important;
  color: var(--brand-canard-deep) !important;
  border-radius: 8px !important;
}
.logout-btn-direct:hover {
  border-color: var(--brand-canard) !important;
  color: var(--brand-canard) !important;
}

/* ============================================================
   Filière banderole — single compact row + mustard active
   ============================================================ */
.filiere-zone { background: transparent !important; }
.filiere-banderole {
  padding: 7px 14px 7px 20px !important;
  font-size: .8rem !important;
  text-transform: uppercase;
}
.filiere-cultures {
  background: var(--brand-canard-pale) !important;
  border-bottom: 1px solid #d8e0e1 !important;
  gap: 5px !important;
  padding: 6px 16px !important;
}
.filiere-cultures .culture-btn {
  background: #fff !important;
  color: #2f4a23 !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 4px 12px !important;
  font-size: .78rem !important;
}
.filiere-cultures .culture-btn:hover {
  background: var(--brand-mustard-pale) !important;
  color: var(--brand-mustard-deep) !important;
  transform: none !important;
}
.filiere-cultures .culture-btn.actif {
  background: var(--brand-mustard) !important;
  color: #1a1a1a !important;
  border-color: var(--brand-mustard-deep) !important;
  font-weight: 700 !important;
}

/* ============================================================
   Culture tabs — mustard active, white + canard border inactive
   ============================================================ */
.culture-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 6px !important;
  background: #fff !important;
  border: 1px solid #ece9df !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
  border-bottom-width: 1px !important;
}
.culture-tab {
  background: #fff !important;
  border: 1px solid var(--brand-canard) !important;
  border-radius: 8px !important;
  color: var(--brand-canard-deep) !important;
  padding: 8px 14px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
.culture-tab:hover {
  background: var(--brand-canard-pale) !important;
  color: var(--brand-canard-deep) !important;
}
.culture-tab.active {
  background: var(--brand-mustard) !important;
  color: #1a1a1a !important;
  border-color: var(--brand-mustard-deep) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(168,127,21,.30), inset 0 -2px 0 var(--brand-mustard-deep) !important;
}
.culture-tab .badge-tab {
  background: var(--brand-canard) !important;
  color: #fff !important;
}
.culture-tab.active .badge-tab {
  background: var(--brand-canard-deep) !important;
}

/* ============================================================
   Section cards — warm border + canard-pale header
   ============================================================ */
.section-card { border: 1px solid #ece9df; }
.section-header { background: var(--brand-canard-pale) !important; }
.section-header h5 { color: var(--brand-canard) !important; }

/* Tables: hover row in canard-pale */
.data-table tbody tr:hover { background: var(--brand-canard-pale) !important; }
.data-table thead th { background: #faf8f1 !important; color: #5a564a !important; border-bottom-color: #ece9df !important; }
.data-table td { border-bottom-color: #f4f1e8 !important; }

/* Status badges — earthen palette */
.badge-autorise   { background: #dbe8cd !important; color: #355820 !important; }
.badge-autorise2  { background: #d4e7e9 !important; color: #114a4f !important; }
.badge-retrait    { background: #f1d2c4 !important; color: #7a3215 !important; }
.badge-autre      { background: #e8e6df !important; color: #5a564a !important; }
.mrl-default      { background: #fbf2d5 !important; color: #7c5a0a !important; }
.mrl-normal       { background: #dbe8cd !important; color: #355820 !important; }

/* ============================================================
   Login screen (template has its own :root, override hard)
   ============================================================ */
body.login,
html body:has(.login-card) {
  background:
    radial-gradient(ellipse at 80% 110%, rgba(212,167,44,.22) 0%, transparent 55%),
    linear-gradient(135deg, var(--brand-canard-deep) 0%, var(--brand-canard) 60%, var(--brand-canard-2) 100%)
    !important;
}
.login-card .logo h1 { color: var(--brand-canard) !important; }
.login-card label { color: var(--brand-canard) !important; }
.login-card input.form-control:focus {
  border-color: var(--brand-canard) !important;
  box-shadow: 0 0 0 .2rem rgba(29,86,115,.15) !important;
}
.login-card .btn-submit {
  background: var(--brand-mustard) !important;
  color: #1a1a1a !important;
  border: 1px solid var(--brand-mustard-deep) !important;
  font-weight: 700 !important;
}
.login-card .btn-submit:hover {
  background: #e8c660 !important;
  color: #1a1a1a !important;
}

/* ============================================================
   Footer — canard-deep + mustard top border
   ============================================================ */
.app-footer {
  background: var(--brand-canard-deep) !important;
  border-top: 3px solid var(--brand-mustard) !important;
}
.app-footer a:hover { color: var(--brand-mustard) !important; }

/* ============================================================
   PHASE 0 — Tokens design system AgroLoupe v2
   (ajoutes pour le brief refonte UX/UI 2026-05)
   ============================================================ */
:root {
  /* ── Statuts désaturés (cohérent palette canard) ────────── */
  --status-ok-bg:      #e1f0e3;
  --status-ok-fg:      #2a5e36;
  --status-ko-bg:      #f5e0de;
  --status-ko-fg:      #8a3025;
  --status-warn-bg:    #fbf2d5;
  --status-warn-fg:    #7a5c10;
  --status-info-bg:    #e3ecf2;
  --status-info-fg:    #0e3c54;
  --status-neutral-bg: #ecedee;
  --status-neutral-fg: #4a4d51;

  /* ── Foreground (niveaux de gris) ──────────────────────── */
  --fg-1: #1a1d20;        /* texte principal */
  --fg-2: #444;           /* texte secondaire */
  --fg-3: #6b7075;        /* texte muted */
  --fg-4: #8a8a8a;        /* texte placeholder, contraste WCAG */

  /* ── Backgrounds ───────────────────────────────────────── */
  --bg-app:  #f8f9fa;
  --bg-card: #fff;
  --border:       #dce0e5;
  --border-soft:  #ebeef2;

  /* ── Radius ────────────────────────────────────────────── */
  --r-xs:  3px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  14px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --sh-card-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-card-sm: 0 1px 4px rgba(0,0,0,.06);
  --sh-card:    0 1px 6px rgba(0,0,0,.07);
  --sh-header:  0 2px 8px rgba(0,0,0,.10);
  --sh-hover:   0 4px 14px rgba(0,0,0,.12);
  --sh-modal:   0 12px 40px rgba(0,0,0,.20);

  /* ── Tailles de police ─────────────────────────────────── */
  --fs-h1: 2rem;          /* 32px */
  --fs-h2: 1.75rem;       /* 28px */
  --fs-h3: 1.25rem;       /* 20px */
  --fs-md: 0.92rem;
  --fs-sm: 0.84rem;
  --fs-xs: 0.74rem;
  --fs-section-label: 0.72rem;

  /* ── Filieres (couleurs d'accent identifiantes) ─────────── */
  --fil-cl:    #4a7c3a;   /* Cultures legumieres = vert foret */
  --fil-cf:    #d4a72c;   /* Cultures fruitieres = moutarde */
  --fil-vigne: #7a3057;   /* Vigne = pourpre */
  --fil-ppam:  #6a8caf;   /* PPAM = canard clair */
  --fil-gc:    #b86b3a;   /* Grandes cultures = clay */
  --fil-ct:    #1d5673;   /* Cultures tropicales = canard */

  /* ── Gradients utilitaires ─────────────────────────────── */
  --grad-login: linear-gradient(135deg, var(--brand-canard) 0%, var(--brand-canard-deep) 70%);

  /* ── Police monospace ──────────────────────────────────── */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Header height : sera surcharge par P2.2 (1.4) */
  --header-h: 92px;
}

/* ============================================================
   P4.1 — Badges status globaux (factorisés)
   ============================================================ */
.badge-status {
  padding: 2px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700;
  display: inline-block; line-height: 1.4;
}
.badge-status-ok      { background: var(--status-ok-bg);      color: var(--status-ok-fg); }
.badge-status-ko      { background: var(--status-ko-bg);      color: var(--status-ko-fg); }
.badge-status-warn    { background: var(--status-warn-bg);    color: var(--status-warn-fg); }
.badge-status-info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.badge-status-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* ============================================================
   P2.5 — Statuts désaturés sur classes legacy
   ============================================================ */
.badge-autorise  { background: var(--status-ok-bg);   color: var(--status-ok-fg); }
.badge-retrait   { background: var(--status-ko-bg);   color: var(--status-ko-fg); }
.badge-autorise2 { background: var(--status-info-bg); color: var(--status-info-fg); }
.mrl-default     { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.mrl-normal      { background: var(--status-ok-bg);   color: var(--status-ok-fg); }

/* ============================================================
   P2.6 — Acronymes (.acro)
   ============================================================ */
.acro {
  border-bottom: 1px dotted var(--brand-canard);
  cursor: help; font-weight: 600;
  color: var(--brand-canard-deep);
  text-decoration: none;
}

/* ============================================================
   P3.6 — Focus visible moutarde
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.culture-tab:focus-visible, .culture-btn:focus-visible {
  outline: 2px solid var(--brand-mustard);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ============================================================
   P2.3 — Hiérarchie typographique
   ============================================================ */
.section-label {
  font-size: var(--fs-section-label);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fg-3);
  font-weight: 700;
  margin: 14px 0 6px;
}

/* ============================================================
   P3.2 — Empty states utiles
   ============================================================ */
.empty-state {
  background: linear-gradient(180deg, var(--brand-canard-pale), #fff);
  border: 1px dashed var(--brand-canard);
  border-radius: var(--r-lg);
  padding: 30px;
  color: var(--fg-3);
  text-align: center;
}
.empty-state i { color: var(--brand-canard); font-size: 1.8rem; }
.empty-state .help {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  margin-top: 8px;
}
.empty-state .help a { color: var(--brand-canard); text-decoration: underline; }

/* ============================================================
   P3.1 — Skeleton rows pour tables en chargement
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-bar {
  height: 12px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, #f0f0f0 0%, #e5e5e5 50%, #f0f0f0 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-row td { padding: 6px 9px !important; }

/* ============================================================
   P2.7 — Contrastes WCAG améliorés
   ============================================================ */
.empty-state         { color: var(--fg-3, #6b7075) !important; }
.app-footer .text-muted { color: rgba(255,255,255,.78) !important; }

/* Le header est désormais light (cf. agroloupe-theme.css plus haut) :
   le contraste sur les liens nav non-actifs est déjà géré par .app-nav a.
   On renforce uniquement quand le header est dark (legacy) via media query. */
@media (prefers-color-scheme: light) {
  .app-nav a { color: rgba(255,255,255,.72) !important; }
}

/* ============================================================
   P3.3 — Pastilles couleurs filière (accents identifiants)
   ============================================================ */
.fil-pastille {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
  background: var(--brand-canard);
}
.fil-pastille.cl    { background: var(--fil-cl); }
.fil-pastille.cf    { background: var(--fil-cf); }
.fil-pastille.vigne { background: var(--fil-vigne); }
.fil-pastille.ppam  { background: var(--fil-ppam); }
.fil-pastille.gc    { background: var(--fil-gc); }
.fil-pastille.ct    { background: var(--fil-ct); }