/* Ajustements maison, par-dessus le thème.
 *
 * Fichier distinct d'`app.css` à dessein : celui-là vient du thème et sera
 * remplacé tel quel le jour où on le mettra à jour. Ce qui nous appartient
 * vit ici.
 */

/* Les liens de la console ne se soulignent pas : dans une interface de
 * travail, presque tout est cliquable, et tout souligner rend la page
 * illisible. La couleur et le survol suffisent à les désigner. */
.sidebar a,
.sidebar__menu a,
.body-wrapper a,
.navbar-wrapper a {
  text-decoration: none;
}

/* Sauf au survol, où le soulignement redevient un repère utile — mais pas
 * dans la barre latérale, qui a déjà son état actif. */
.body-wrapper a:hover {
  text-decoration: underline;
}

.sidebar a:hover,
.sidebar__menu a:hover {
  text-decoration: none;
}

/* Le thème ne retire jamais lui-même la puce par défaut d'un <li> — sa
 * propre démo compte sur un reset qu'on n'a pas repris. `list-style` se
 * transmet aux enfants : une seule règle sur le <ul> suffit pour le menu et
 * ses en-têtes de section. */
.sidebar__menu {
  list-style: none;
  margin: 0;
}

/* Le thème met `flex-wrap: wrap` sur chaque entrée du menu : dès qu'icône et
 * texte ne tiennent pas côte à côte sur une ligne, l'icône passe seule sur
 * la sienne et le texte en dessous — visible sur « Demandes de production »
 * (22 caractères), pas sur « Applications » ou « Comptes », plus courts.
 * `nowrap` garde les deux sur la même ligne ; si le texte est trop long
 * pour la largeur qui reste, c'est LUI qui se replie sur une seconde ligne,
 * à côté de l'icône plutôt qu'en dessous — et l'icône, `flex-shrink: 0`,
 * ne rétrécit jamais pour lui laisser la place. */
.sidebar__menu .sidebar-menu-item > a {
  flex-wrap: nowrap;
}

.sidebar__menu .menu-icon {
  flex-shrink: 0;
}

/* Un identifiant de dossier est un code : il se lit mieux en chasse fixe,
 * et n'a pas besoin d'être souligné pour qu'on comprenne qu'on peut cliquer. */
.body-wrapper table code {
  font-size: .85em;
}

/* ─────────────────────────────────────────── tableaux sur petit écran
 *
 * `table-responsive` de Bootstrap ne fait qu'ajouter un défilement
 * horizontal : sur un téléphone, un tableau à cinq colonnes reste illisible
 * et oblige à balayer de gauche à droite pour lire une seule ligne.
 *
 * Sous 768 px, chaque ligne devient donc une carte, et chaque cellule porte
 * son libellé à gauche — repris de l'en-tête par `data-libelle`. L'en-tête
 * lui-même disparaît : il ne dirait plus rien d'utile.
 *
 * Les cellules sans `data-libelle` (actions, vignettes) s'affichent pleine
 * largeur, sans étiquette : leur contenu se suffit.
 */
@media (max-width: 767.98px) {
  .body-wrapper .table-responsive { overflow-x: visible; }

  .body-wrapper table thead { display: none; }

  .body-wrapper table,
  .body-wrapper table tbody,
  .body-wrapper table tr,
  .body-wrapper table td {
    display: block;
    width: 100%;
  }

  .body-wrapper table tr {
    border: 1px solid #e6e9f0;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 4px 0;
    background: #fff;
  }

  .body-wrapper table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #f1f3f8;
    padding: 10px 14px;
    text-align: right;
  }

  .body-wrapper table tr td:last-child { border-bottom: 0; }

  .body-wrapper table td[data-libelle]::before {
    content: attr(data-libelle);
    font-size: .78rem;
    color: #8a93a8;
    text-align: left;
    flex: 0 0 auto;
    margin-right: auto;
  }

  /* Une cellule sans libellé prend toute la place : ce sont les actions et
   * les images, qui n'ont pas besoin qu'on les nomme. */
  .body-wrapper table td:not([data-libelle]) {
    justify-content: flex-start;
    text-align: left;
  }

  /* Les filtres empilés respirent mieux qu'alignés de force. */
  .body-wrapper .form-select-sm,
  .body-wrapper .form-control-sm { font-size: .95rem; }
}

/* ------------------------------------------------------------ Applications */

/* Une clé ou un secret : pleine largeur, coupable n'importe où, et lisible
   sans ambiguïté — un O et un 0 recopiés de travers coûtent une heure. */
.valeur-secrete {
  background: #111827;
  color: #7ee787;
  word-break: break-all;
  font-size: .85rem;
  display: block;
}

}

/* Le tableau des applications ---------------------------------------------

   Sept colonnes et cinq boutons par ligne débordaient de l'écran : la ligne
   ne porte plus que ce qui se lit, et tout ce qui agit vit dans un panneau
   qui se déplie sous elle.  */

.tableau-applications .cellule-webhook {
  max-width: 320px;
}

/* La ligne du panneau n'est pas une ligne de données : ni bordure, ni fond,
   ni rayure alternée — sinon elle se lit comme une application de plus. */
.ligne-panneau > td {
  border-top: 0;
  background: transparent;
  /* `.table td { white-space: nowrap }` (le thème) est hérité par tout ce
   * qui vit dans cette cellule — `white-space` se transmet aux enfants. Le
   * panneau n'est pourtant fait que de phrases (bloc-action p) : sans ce
   * reset, chaque paragraphe tenait sur une seule ligne, débordait de sa
   * carte, et venait chevaucher le bloc voisin. Constaté à l'écran le
   * 23/09/2026 sur la page Applications. */
  white-space: normal;
}

.panneau-gestion {
  padding: 4px 14px 18px;
}

.bloc-action {
  border: 1px solid #e6e9f0;
  border-radius: 10px;
  padding: 14px;
  background: #fbfcfe;
}

.bloc-action p {
  margin-bottom: 10px;
}

@media (max-width: 767.98px) {
  /* Chaque ligne est déjà une carte : le panneau se recolle à la sienne au
     lieu d'en former une seconde, vide de libellés. */
  .body-wrapper table tr.ligne-panneau {
    border: 0;
    background: transparent;
    margin-top: -12px;
    padding: 0;
  }

  .body-wrapper table tr.ligne-panneau td {
    display: block;
    text-align: left;
    padding: 0;
    border-bottom: 0;
  }

  .panneau-gestion {
    padding: 0 0 12px;
  }

  .tableau-applications .cellule-webhook {
    max-width: none;
  }
}