/* Portail Agents — mairie de Man
   Palette volontairement proche du site citoyen (identité visuelle commune)
   mais avec un bandeau "usage interne" marqué, pour qu'un agent ne confonde
   jamais cet espace avec le site public.

   Refonte UX/UI (voir le document d'architecture, onglet dédié) : les
   couleurs institutionnelles restent la marque, mais chaque couleur
   supplémentaire ci-dessous porte un SENS précis (succès/attention/urgence/
   info/neutre) — jamais purement décorative. Le mode sombre redéfinit ces
   mêmes tokens plutôt que d'en introduire de nouveaux. */

:root {
  --mairie-vert: #0a6847;
  --mairie-vert-fonce: #054d33;
  --mairie-orange: #e08e2b;
  --mairie-fond: #f4f6f5;
  --mairie-texte: #1f2624;
  --mairie-texte-clair: #5c6663;
  --mairie-bordure: #e2e5e2;
  --mairie-blanc: #ffffff;
  --radius: 0.6rem;

  /* Tokens sémantiques — toujours utilisés pour porter du sens (statut,
     tendance, alerte), jamais pour décorer. */
  --succes: #0a6847;
  --succes-fond: #e3f3ea;
  --attention: #a5680f;
  --attention-fond: #fdf1e0;
  --urgence: #a3372f;
  --urgence-fond: #fbeaea;
  --info: #1d5fa8;
  --info-fond: #e7eff9;
  --neutre: #5c6663;
  --neutre-fond: #eceeed;

  --surface: var(--mairie-blanc);
  --ombre: 0 1px 2px rgba(31, 38, 36, 0.06), 0 1px 3px rgba(31, 38, 36, 0.08);
}

:root[data-theme="dark"] {
  --mairie-fond: #14201b;
  --mairie-texte: #e9efec;
  --mairie-texte-clair: #a9b6b1;
  --mairie-bordure: #2a3931;
  --surface: #1b2b23;
  --mairie-blanc: #1b2b23;

  --succes: #4ade9b;
  --succes-fond: #163a2c;
  --attention: #e8ab52;
  --attention-fond: #3a2c12;
  --urgence: #ef8177;
  --urgence-fond: #3a1a17;
  --info: #7cb0ea;
  --info-fond: #17263b;
  --neutre: #a9b6b1;
  --neutre-fond: #22322a;

  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mairie-fond: #14201b;
    --mairie-texte: #e9efec;
    --mairie-texte-clair: #a9b6b1;
    --mairie-bordure: #2a3931;
    --surface: #1b2b23;
    --mairie-blanc: #1b2b23;

    --succes: #4ade9b;
    --succes-fond: #163a2c;
    --attention: #e8ab52;
    --attention-fond: #3a2c12;
    --urgence: #ef8177;
    --urgence-fond: #3a1a17;
    --info: #7cb0ea;
    --info-fond: #17263b;
    --neutre: #a9b6b1;
    --neutre-fond: #22322a;

    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background-color: var(--mairie-fond);
  color: var(--mairie-texte);
}

a { color: var(--mairie-vert-fonce); }

.bandeau-interne {
  background: var(--mairie-vert-fonce);
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.3rem;
  letter-spacing: 0.03em;
}

/* Navigation latérale — remplace l'ancien bandeau horizontal (décision
   validée lors de la présentation de l'architecture) : plus adaptée à un
   menu qui va s'étoffer (Tickets, Administration système...), et se replie
   sur mobile plutôt que de déborder. `x-data`/`x-show` : Alpine.js, chargé
   globalement dans base.html. */
.mise-en-page { display: flex; min-height: 100vh; }

.barre-laterale {
  background: var(--mairie-vert-fonce);
  color: #fff;
  width: 15.5rem;
  flex-shrink: 0;
  padding: 1rem 0.85rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.barre-laterale .marque { font-size: 1.05rem; font-weight: 700; padding: 0.4rem 0.5rem 1.1rem; }
.barre-laterale .rubrique { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; padding: 0.9rem 0.5rem 0.3rem; }
.barre-laterale a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0.45rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.92rem;
}
.barre-laterale a:hover { background: rgba(255, 255, 255, 0.12); }
.barre-laterale form button {
  background: none; border: none; color: #fff; text-decoration: none; cursor: pointer;
  font-size: 0.92rem; padding: 0.45rem 0.5rem; width: 100%; text-align: left; border-radius: 0.4rem;
}
.barre-laterale form button:hover { background: rgba(255, 255, 255, 0.12); }

.bouton-menu-mobile {
  display: none;
  background: var(--mairie-vert);
  color: #fff;
  border: none;
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
  cursor: pointer;
}

.zone-principale { flex: 1; min-width: 0; }

.barre-superieure {
  background: var(--surface);
  border-bottom: 1px solid var(--mairie-bordure);
  padding: 0.7rem 1.25rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}
.bouton-theme {
  background: none;
  border: 1px solid var(--mairie-bordure);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mairie-texte);
}

[x-cloak] { display: none !important; }

.palette-recherche-fond {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1rem 1rem;
}
.palette-recherche {
  background: var(--surface);
  border-radius: 0.6rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 40rem;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.palette-recherche input[type="search"] {
  border: none;
  border-bottom: 1px solid var(--mairie-bordure);
  padding: 1rem 1.1rem;
  font-size: 1.05rem;
  background: transparent;
  color: var(--mairie-texte);
  width: 100%;
}
.palette-recherche input[type="search"]:focus { outline: none; }
.palette-recherche-resultats { overflow-y: auto; padding: 0.4rem 0; }
.palette-recherche-statut { padding: 1rem 1.1rem; color: var(--mairie-texte-clair); margin: 0; }
.palette-recherche-groupe {
  padding: 0.5rem 1.1rem 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mairie-texte-clair);
}
.palette-recherche-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.1rem;
  color: var(--mairie-texte);
  text-decoration: none;
}
.palette-recherche-ligne:hover { background: var(--mairie-fond); }
.palette-recherche-ligne small { color: var(--mairie-texte-clair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-recherche-voir-tout {
  display: block;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--mairie-bordure);
  color: var(--mairie-vert);
  text-decoration: none;
  font-size: 0.9rem;
}

@media (max-width: 56rem) {
  .barre-laterale {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .barre-laterale.ouverte { transform: translateX(0); }
  .bouton-menu-mobile { display: inline-block; }
}

.conteneur {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--mairie-bordure);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--ombre);
}

.carte h2 { margin-top: 0; font-size: 1.05rem; color: var(--mairie-vert-fonce); }
:root[data-theme="dark"] .carte h2 { color: var(--succes); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carte h2 { color: var(--succes); } }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--mairie-bordure); font-size: 0.92rem; }
th { color: var(--mairie-texte-clair); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--neutre-fond);
  color: var(--neutre);
}
.badge-validee, .badge-present { background: var(--succes-fond); color: var(--succes); }
.badge-rejetee, .badge-absent { background: var(--urgence-fond); color: var(--urgence); }
.badge-soumise, .badge-retard { background: var(--attention-fond); color: var(--attention); }

/* Tickets — mêmes tokens sémantiques que le reste du portail : le statut
   d'un ticket n'a jamais sa propre palette. */
.badge-statut-ouvert, .badge-statut-assigne, .badge-statut-en_cours { background: var(--info-fond); color: var(--info); }
.badge-statut-en_attente, .badge-statut-reouvert { background: var(--attention-fond); color: var(--attention); }
.badge-statut-resolu, .badge-statut-cloture { background: var(--succes-fond); color: var(--succes); }
.badge-statut-brouillon { background: var(--neutre-fond); color: var(--neutre); }
.badge-priorite-faible, .badge-priorite-normale { background: var(--neutre-fond); color: var(--neutre); }
.badge-priorite-elevee { background: var(--attention-fond); color: var(--attention); }
.badge-priorite-urgente { background: var(--urgence-fond); color: var(--urgence); }

/* Tableau intelligent (recherche/tri/pagination) — un seul composant
   réutilisé sur tous les écrans qui en ont besoin, cahier des charges
   UX/UI ("jamais un module qui ressemble à un logiciel à part"). */
.tableau-intelligent-conteneur { margin-top: 0.5rem; }
.tableau-intelligent-barre { margin-bottom: 0.6rem; }
.tableau-intelligent-recherche {
  width: 100%;
  max-width: 320px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--mairie-bordure);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--mairie-texte);
}
.tableau-intelligent-entete-triable { cursor: pointer; user-select: none; }
.tableau-intelligent-entete-triable:hover { color: var(--mairie-texte); }
.tableau-intelligent-entete-triable[data-tri="asc"]::after { content: " \25B2"; font-size: 0.7em; }
.tableau-intelligent-entete-triable[data-tri="desc"]::after { content: " \25BC"; font-size: 0.7em; }
.tableau-intelligent-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.tableau-intelligent-info { color: var(--mairie-texte-clair); font-size: 0.85rem; }
.tableau-intelligent-pied .btn-secondaire {
  background: none;
  border: 1px solid var(--mairie-bordure);
  border-radius: var(--radius);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  color: var(--mairie-texte);
  font-size: 0.85rem;
}
.tableau-intelligent-pied .btn-secondaire:disabled { opacity: 0.5; cursor: default; }

/* Statut d'un agent (fiche agent) — mêmes tokens sémantiques. */
.badge-statut-actif { background: var(--succes-fond); color: var(--succes); }
.badge-statut-conge_longue_duree { background: var(--info-fond); color: var(--info); }
.badge-statut-suspendu { background: var(--urgence-fond); color: var(--urgence); }
.badge-statut-retraite, .badge-statut-demissionnaire { background: var(--neutre-fond); color: var(--neutre); }

/* Cartes KPI — ligne de tête des tableaux de bord : valeur + tendance,
   cliquables (le lien englobe toute la carte). */
.grille-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.carte-kpi {
  background: var(--surface);
  border: 1px solid var(--mairie-bordure);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--ombre);
  text-decoration: none;
  color: inherit;
  display: block;
}
.carte-kpi:hover { border-color: var(--mairie-vert); }
.carte-kpi .libelle { font-size: 0.8rem; color: var(--mairie-texte-clair); text-transform: uppercase; letter-spacing: 0.03em; }
.carte-kpi .valeur { font-size: 1.9rem; font-weight: 700; margin: 0.2rem 0; }
.carte-kpi .tendance { font-size: 0.85rem; }
.carte-kpi .tendance.hausse { color: var(--succes); }
.carte-kpi .tendance.baisse { color: var(--urgence); }
.carte-kpi.urgence .valeur { color: var(--urgence); }
.carte-kpi.attention .valeur { color: var(--attention); }

/* Centre d'alertes — regroupe ce qui était dispersé en cartes séparées. */
.liste-alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ligne-alerte {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.8rem; border-radius: 0.4rem; background: var(--neutre-fond); text-decoration: none; color: inherit;
}
.ligne-alerte:hover { background: var(--mairie-bordure); }
.ligne-alerte.urgence { background: var(--urgence-fond); }
.ligne-alerte.attention { background: var(--attention-fond); }
.ligne-alerte .compteur { font-weight: 700; }

.conteneur-graphique { position: relative; height: 18rem; margin-bottom: 1.25rem; }
.filtres-graphique { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.filtres-graphique button {
  background: var(--neutre-fond); border: 1px solid var(--mairie-bordure); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-size: 0.85rem; cursor: pointer; color: var(--mairie-texte);
}
.filtres-graphique button.actif { background: var(--mairie-vert); border-color: var(--mairie-vert); color: #fff; }

.btn {
  display: inline-block;
  background: var(--mairie-vert);
  color: #fff;
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
}
.btn:hover { background: var(--mairie-vert-fonce); color: #fff; }

.champ { margin-bottom: 0.9rem; }
.champ label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--mairie-texte-clair); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--mairie-bordure);
  border-radius: 0.4rem;
  font-size: 0.95rem;
}

.alerte { padding: 0.7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; }
.alerte-success { background: #e3f3ea; color: var(--mairie-vert-fonce); }
.alerte-error { background: #fbeaea; color: #a3372f; }

.connexion-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.connexion-carte { max-width: 24rem; width: 100%; }