/* Thème VALNUM — charte : Vert VALNUM #0a5e4d, Sauge #3d8f7b, Menthe #7ac3a3, Brume #a1d1ac.
   Zammad pilote ses couleurs par des variables CSS (thème clair = :root, thème sombre = [data-theme='dark']).
   On ne redéfinit que celles qui portent le bleu d'origine ; chargé APRÈS la feuille de Zammad.
   Contrastes vérifiés (WCAG) : texte blanc sur #0a5e4d 7,7:1 ; sur #2f7a68 5,1:1 ; lien #7ac3a3 sur fond sombre 6,5:1. */
:root {
  --button-primary-background: #0a5e4d;
  --button-primary-background-active: #084a3d;
  --text-link: #0a5e4d;
  --text-nav: #0a5e4d;
  --highlight: #2f7a68;
  --text-muted-highlight: #d3eee0;
  --background-highlight: #e2f3eb;
  --background-article-customer: #1d6a8f;
  --background-article-customer-meta: #2275a0;
  --border-highlight: #3d8f7b;
  --border-article-customer: #4f93b5;
  --border-article-customer-selected: #8cc3e0;
  --shadow-highlight: #d7eae2;
  --backdrop-clue-start: rgba(61, 143, 123, 0.1);
  --backdrop-clue-end: rgba(61, 143, 123, 0.9);
}
[data-theme='dark'] {
  --button-primary-background: #2f7a68;
  --button-primary-background-active: #276a5a;
  --text-link: #7ac3a3;
  --highlight: #2f7a68;
  --background-highlight: #2a5147;
  --border-highlight: #3d8f7b;
  --shadow-highlight: #376c5f;
  --backdrop-clue-start: rgba(61, 143, 123, 0.1);
  --backdrop-clue-end: rgba(61, 143, 123, 0.9);
  /* Variables que ma feuille redéfinit en :root (clair) et que Zammad redéfinit aussi en sombre : sans ces lignes,
     mon :root (chargé après) écraserait les valeurs sombres d'origine (texte de menu vert illisible, fonds clairs). */
  --text-nav: hsl(205, 1%, 84%);
  --background-article-customer: #1d6a8f;
  --background-article-customer-meta: #2275a0;
  --border-article-customer: #4f93b5;
  --border-article-customer-selected: #8cc3e0;
}

/* Pages plein écran (connexion, mot de passe oublié, inscription) : fond Vert VALNUM.
   Les variables sont posées sur ces pages seulement (la classe .darkBackground, qui partage
   --fullscreen-background, n'est donc pas touchée). Le texte hors carte passe en clair ;
   la carte (.hero-unit) retrouve les valeurs d'origine pour rester lisible en thème clair comme sombre.
   Contraste sur #0a5e4d : #dff0e6 6,5:1 ; #ffffff 7,7:1 ; #cfe8d9 6,0:1. */
.login,
.reset_password,
.request_admin_password_auth,
.signup {
  --fullscreen-background: #0a5e4d;
  --fullscreen-text: #dff0e6;
  --fullscreen-text-link: #ffffff;
  --fullscreen-text-muted: #cfe8d9;
}
.login .hero-unit,
.reset_password .hero-unit,
.request_admin_password_auth .hero-unit,
.signup .hero-unit {
  --fullscreen-text: var(--text-muted);
  --fullscreen-text-link: var(--text-inverted);
}

/* Logo de la page de connexion : SVG blanc, affiché 3 fois plus grand que d'origine (contenu visible ~413 px de large au lieu de ~138 ; image 447 x 272 px, cadre resserré et centré).
   La carte passe de 430 à 620 px (limitée à la largeur de l'écran, y compris sur mobile).
   En thème clair la carte est BLANCHE (logo invisible) : pastille Vert VALNUM derrière le logo, retirée en thème sombre. */
.login .hero-unit {
  width: 620px;
  max-width: calc(100vw - 48px);
}
.login .company-logo {
  width: 447px;
  max-width: calc(100% - 40px);
  max-height: 290px;
  height: auto;
  background: #0a5e4d;
  padding: 16px 20px;
  border-radius: 8px;
  box-sizing: content-box;
}
[data-theme='dark'] .login .company-logo {
  background: none;
  padding: 0;
}

/* Tableau de bord : fond Vert VALNUM derrière les cartes (comme la page de connexion). Les cartes gardent leur fond.
   Limité au tableau de bord : sur les pages à formulaires ou fils de tickets, le texte gris courant serait trop peu contrasté sur le vert. */
.dashboard.main,
.content:has(> .dashboard) {
  background: #0a5e4d;
}

/* Bouton « + » (nouveau ticket) en bas de la barre de gauche : tuile ORANGE par défaut, « + » blanc.
   Au survol / actif, Zammad garde son vert d'origine (#38ae6a), car ses règles de survol sont plus spécifiques que celles-ci.
   Orange #e06a00 : blanc dessus 3,4:1 (icône, seuil 3:1) ; sur le fond sombre du menu 4,7:1. L'orange n'est pas dans la charte VALNUM. */
.user-menu li.add .list-button::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background: #e06a00;
}
.user-menu > li.add .user-menu-icon.icon-plus {
  fill: #fff;
}

/* ---- Éléments ajoutés par valnum-tweaks.js ---- */

/* Page de connexion : lien vers le site de l'entreprise (un peu plus bas que les textes d'aide). */
.login .valnum-site {
  margin-top: 34px;
  font-size: 1.05em;
}

/* Portail client, volet de droite : chapitre « Aide à la qualification ».
   Couleurs du texte choisies pour rester lisibles (>= 4,5:1) sur fond clair comme sur fond sombre. */
.valnum-qualif {
  --vq-high: #c4303a;
  --vq-normal: #a15c00;
  --vq-low: #1f7a4d;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
[data-theme='dark'] .valnum-qualif {
  --vq-high: #ff8a92;
  --vq-normal: #f5b94d;
  --vq-low: #6fd7a3;
}
.valnum-qualif-title {
  margin: 0 0 6px;
  font-size: 1.15em;
  font-weight: 700;
}
.valnum-qualif-intro {
  margin: 0 0 12px;
  color: var(--text-muted);
}
.valnum-level {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.valnum-level-badge {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.valnum-level--high .valnum-level-badge { background: #e5484d; }
.valnum-level--normal .valnum-level-badge { background: #f0a124; }
.valnum-level--low .valnum-level-badge { background: #2da66e; }
.valnum-level-name {
  font-size: 1.15em;
  font-weight: 700;
}
.valnum-level--high .valnum-level-desc { color: var(--vq-high); }
.valnum-level--normal .valnum-level-desc { color: var(--vq-normal); }
.valnum-level--low .valnum-level-desc { color: var(--vq-low); }
.valnum-level-desc {
  font-weight: 600;
  margin: 1px 0 4px;
}
.valnum-level-ex {
  color: var(--text-normal);
}

/* ---- Formulaire de création côté client (valnum-tweaks.js) ---- */
/* Le bloc Type / Priorité passe entre le titre et le texte : une colonne pleine largeur, comme un champ ordinaire. */
.valnum-form .ticket-form-middle {
  flex-wrap: wrap;
}
.valnum-form .ticket-form-middle > .column {
  flex: 1 1 100%;
  max-width: 100%;
}
/* Priorité : 3 cartes à la place de la liste (la vraie liste reste dans la page, masquée, et garde la valeur envoyée). */
.valnum-prio-group .controls--select {
  display: none;
}
.valnum-prio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.valnum-prio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-normal);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.valnum-prio-card:hover {
  background: var(--background-modifier-hover);
}
.valnum-prio-card:focus-visible {
  outline: 2px solid var(--border-highlight);
  outline-offset: 2px;
}
.valnum-prio-card .valnum-level-badge {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}
.valnum-prio-name {
  font-size: 1.1em;
  font-weight: 700;
}
.valnum-prio-card.is-selected.valnum-level--high   { border-color: #e5484d; background: rgba(229, 72, 77, 0.14); }
.valnum-prio-card.is-selected.valnum-level--normal { border-color: #f0a124; background: rgba(240, 161, 36, 0.14); }
.valnum-prio-card.is-selected.valnum-level--low    { border-color: #2da66e; background: rgba(45, 166, 110, 0.14); }
@media (max-width: 600px) {
  .valnum-prio { grid-template-columns: 1fr; }
}

/* Formulaire de création de ticket : fond Vert VALNUM autour du cadre du formulaire (comme le tableau de bord et la connexion).
   Le cadre (.box--newTicket) garde son fond gris : les textes restent lisibles. */
.main:has(> .newTicket),
.content:has(.newTicket) {
  background: #0a5e4d;
}

/* Barre de gauche : le logo V passe à GAUCHE du champ de recherche (flex : order négatif ; marges ajustées pour tenir dans les 260 px). */
.navigation .search .logo {
  order: -1;
  margin: -4px 8px 0 0;
}

/* ---- Messages des tickets : fonds VERTS, texte blanc ---- */
/* Équipe (agents, système) : Vert VALNUM #0a5e4d. Client : BLEU pétrole (#1d6a8f, accordé au vert) pour les distinguer d'un coup d'œil ;
   le client passe par les variables --background-article-customer* définies plus haut (clair et sombre), flèches comprises. */
.textBubble {
  background: #0a5e4d;
  border-color: #3d8f7b;
  box-shadow: none;
  color: #fff;
}
.customer.ticket-article-item .textBubble {
  background: var(--background-article-customer);
  border-color: var(--border-article-customer);
  box-shadow: none;
}
.textBubble-content,
.textBubble-content p,
.textBubble-content div,
.textBubble-content span {
  color: #fff;
}
.textBubble a:not(.btn),
.textBubble-content a {
  color: #d6efe3;
  text-decoration: underline;
}
.bubble-arrow::after {
  background: #0a5e4d;
  border-color: #3d8f7b;
  box-shadow: none;
}
.customer.ticket-article-item .bubble-arrow::after {
  background: var(--background-article-customer);
  border-color: var(--border-article-customer);
}
.textBubble-overflowContainer {
  background: #0a5e4d;
}
.textBubble-overflowContainer::before {
  background: linear-gradient(rgba(10, 94, 77, 0), #0a5e4d);
}
.customer .textBubble-overflowContainer {
  background: var(--background-article-customer);
}
.customer .textBubble-overflowContainer::before {
  background: linear-gradient(rgba(29, 106, 143, 0), var(--background-article-customer));
}

/* ---- Priorité en TAG (listes de tickets ; valnum-tweaks.js remplace le texte par un <span class="valnum-tag">) ---- */
.valnum-tag {
  display: inline-block;
  padding: 2px 11px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92em;
  line-height: 1.5;
  white-space: nowrap;
}
.valnum-tag--high   { background: #c4303a; color: #fff; }
.valnum-tag--normal { background: #f0a124; color: #2b1d00; }
.valnum-tag--low    { background: #1f7a4d; color: #fff; }

/* Avatar du « système » (flux d'activité, fil des tickets) : Zammad le dessine avec le logo sur un fond BLANC en ligne (style="background: white") ;
   notre V est blanc, donc invisible. On passe le fond au Vert VALNUM. */
.avatar[style*="background: white"] {
  background: #0a5e4d !important;
}

/* ---- Fil du ticket : lignes système (valnum-tweaks.js) ---- */
.valnum-log {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.valnum-log svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0.85;
  position: relative;
  top: 1px; /* centre optique par rapport aux minuscules du texte */
}
.valnum-log-text { line-height: 1.2; }
.valnum-log--info svg {
  color: #7ac3a3;
  opacity: 1;
}

/* ---- Tableau de bord agent : cartes de compteurs cliquables (valnum-tweaks.js, vues du script 011) ---- */
.valnum-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.valnum-count:hover,
.valnum-count:focus {
  background: var(--background-modifier-hover);
  color: inherit;
  text-decoration: none;
}
.valnum-count-number {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  margin: 6px 0;
}
.valnum-count--new  .valnum-count-number { color: #7ac3a3; }
.valnum-count--open .valnum-count-number { color: #a1d1ac; }
.valnum-count--site .valnum-count-number { color: #f0a124; }
.valnum-count--reply .valnum-count-number { color: #6fb5dc; }

/* ---- État en TAG (listes de tickets ; valnum-tweaks.js) : coins arrondis (la priorité est une pilule) ---- */
.valnum-state {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.92em;
  line-height: 1.5;
  white-space: nowrap;
}
.valnum-state--new    { background: var(--valnum-st-new);    color: #2b1d00; }
.valnum-state--treat  { background: var(--valnum-st-treat);  color: #04223a; }
.valnum-state--site   { background: var(--valnum-st-site);   color: #fff; }
.valnum-state--wait   { background: var(--valnum-st-wait);   color: #1c1e22; }
.valnum-state--closed { background: var(--valnum-st-closed); color: #fff; }
.valnum-state--merged { background: var(--valnum-st-merged); color: #fff; }

/* Formulaire de création de ticket : champ TEXTE deux fois plus haut (82 px -> 164 px). Zammad fixe min-height: 82px sur le champ éditable. */
.newTicket .richtext.form-control [contenteditable] {
  min-height: 164px;
}

/* ---- Bouton de téléchargement (clients ; valnum-tweaks.js) : dans la barre de gauche, au-dessus du nom et du « + » ---- */
.valnum-download {
  padding: 6px 10px 10px; /* un peu d'air sous le bouton : il se place légèrement plus haut que les deux boutons du bas */
  margin-bottom: 6px;
}
.valnum-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #0a5e4d;
  border: 1px solid #3d8f7b;
  color: #fff;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}
.valnum-download-btn:hover,
.valnum-download-btn:focus {
  background: #138067;
  color: #fff;
  text-decoration: none;
}
.valnum-download-btn svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* ---- Application MOBILE (/mobile, Tailwind) : écran de connexion uniquement (option 3) ----
   Cible : le conteneur noir qui contient « logo + titre h1 + formulaire ». Variables internes de Zammad non utilisées (rien à restater). */
.bg-black:has(main h1 + form.formkit-form) {
  background-color: #0a5e4d;
}
.bg-black:has(main h1 + form.formkit-form) button.formkit-input[type='submit'] {
  background-color: #7ac3a3;
  color: #06312a;
}
.bg-black:has(main h1 + form.formkit-form) footer,
.bg-black:has(main h1 + form.formkit-form) footer + * {
  display: none; /* « Propulsé par Zammad » */
}
.bg-black:has(main h1 + form.formkit-form) a.text-gray {
  color: #cfe8dc;
}
/* Titre du login mobile : « Support » seul (le nom du produit « Support VALNUM » reste inchangé partout ailleurs) */
.bg-black:has(main h1 + form.formkit-form) main h1 {
  font-size: 0;
}
.bg-black:has(main h1 + form.formkit-form) main h1::after {
  content: 'Support';
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
}

/* Application mobile : ligne d'information du fil (remplace la bulle de note système) */
.valnum-m-info {
  display: flex;
  justify-content: center;
  padding: 6px 0 10px;
  font-size: 0.85rem;
  color: #d5e6de;
}
.text-gray .valnum-log-text { color: #d5e6de; }

/* Thème sombre imposé (valnum-tweaks.js : forceDark) : on retire les commandes de choix du thème. */
[class*='menu-item--toggle']:has(#dark-mode-quick-switch),
li:has(> a[href='#profile/appearance']),
a[href='#profile/appearance'],
.js-theme {
  display: none !important;
}

/* Champ de réponse du CLIENT (zone de saisie du ticket) : bleu comme ses messages (valnum-tweaks.js : markRole). Les agents gardent le vert. */
[data-valnum-role='customer'] .article-new .textBubble {
  background: var(--background-article-customer);
  border-color: var(--border-article-customer);
}
[data-valnum-role='customer'] .article-new .bubble-arrow::after {
  background: var(--background-article-customer);
  border-color: var(--border-article-customer);
}

/* Légende discrète des pastilles d'onglets (agents, valnum-tweaks.js : agentLegend). Couleurs = variables de Zammad, donc toujours identiques aux pastilles. */
.valnum-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  padding: 6px 12px 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.85;
}
.valnum-legend-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.valnum-legend-dot { box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; border: 2px solid currentColor; background: transparent; } /* anneau, comme la pastille des onglets et des listes */
.valnum-legend-dot--new { color: var(--valnum-st-new); }
.valnum-legend-dot--treat { color: var(--valnum-st-treat); }
.valnum-legend-dot--site { color: var(--valnum-st-site); }
.valnum-legend-dot--wait { color: var(--valnum-st-wait); }
.valnum-legend-dot--closed { color: var(--valnum-st-closed); }
.valnum-legend-dot--escalating { color: var(--superbad-color); }

/* Légende clients : une ligne sous le tableau des tickets */
.valnum-legend-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 10px 4px 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.valnum-legend-list .valnum-legend-title { font-weight: 700; }

/* ---- Une couleur par ÉTAT (étiquettes, pastilles, onglet actif, légendes) : palette validée par l'utilisateur ---- */
:root {
  --valnum-st-new: #f0a124;
  --valnum-st-treat: #3b9ddd;
  --valnum-st-site: #8e6bd1;
  --valnum-st-wait: #8a8f98;
  --valnum-st-closed: #1f7a4d;
  --valnum-st-merged: #5b6068;
}
.icon-task-state.valnum-r-new    { fill: var(--valnum-st-new) !important; }
.icon-task-state.valnum-r-treat  { fill: var(--valnum-st-treat) !important; }
.icon-task-state.valnum-r-site   { fill: var(--valnum-st-site) !important; }
.icon-task-state.valnum-r-wait   { fill: var(--valnum-st-wait) !important; }
.icon-task-state.valnum-r-closed { fill: var(--valnum-st-closed) !important; }
.icon-task-state.valnum-r-merged { fill: var(--valnum-st-merged) !important; }
.nav-tab.valnum-t-new.is-active    { background-color: var(--valnum-st-new) !important;    color: #2b1d00 !important; }
.nav-tab.valnum-t-treat.is-active  { background-color: var(--valnum-st-treat) !important;  color: #04223a !important; }
.nav-tab.valnum-t-site.is-active   { background-color: var(--valnum-st-site) !important;   color: #fff !important; }
.nav-tab.valnum-t-wait.is-active   { background-color: var(--valnum-st-wait) !important;   color: #1c1e22 !important; }
.nav-tab.valnum-t-closed.is-active { background-color: var(--valnum-st-closed) !important; color: #fff !important; }
.nav-tab.valnum-t-merged.is-active { background-color: var(--valnum-st-merged) !important; color: #fff !important; }

/* Bouton « Inviter un client » (tableau de bord agent) : petit, en haut à droite de la zone centrale */
.dashboard { position: relative; }
.dashboard .valnum-invite-btn {
  position: absolute; top: 14px; right: 18px; z-index: 2;
  padding: 5px 14px; font-size: 13px; font-weight: 400; line-height: 1.3; border-radius: 6px;
}