/* ==========================================================================
   Personnalisation Aprogsys de la page de connexion Taiga.

   Injectee par le gateway nginx (sub_filter), donc AUCUNE modification de
   l'image officielle taiga-front : cette surcouche survit aux montees de
   version. Pour la retirer : supprimer les directives sub_filter et le
   bloc "location /custom/" dans taiga-gateway/taiga.conf/default.conf.

   Reperes du DOM cible (template auth/login.html de taiga-front) :
     .auth  >  .auth-container  >  .logo-svg (svg Taiga)
                                >  h1.logo   ("Taiga")
                                >  h2.tagline (baseline traduite)
   Le fond de .auth est blanc (#fff), d'ou le logo a lettrage noir tel quel.
   ========================================================================== */

/* Bleu de l'ellipse du logo : #96b4d2.
   Trop clair pour du texte sur blanc (2,6:1), d'ou une declinaison foncee
   de meme teinte pour les liens : #3b689b (5,8:1, conforme WCAG AA). */
:root {
    --aprogsys-blue: #96b4d2;
    --aprogsys-blue-text: #3b689b;
    --aprogsys-ink: #2e3440; /* couleur de texte native du theme Taiga */
}

/* --- Logo : on masque le losange Taiga et on pose le logo Aprogsys ------- */
.auth .logo-svg svg {
    display: none;
}

.auth .logo-svg {
    /* le theme impose "padding: 0 32%", qui ecraserait un logo large */
    padding: 0;
    width: 100%;
    height: 5.6rem;
    margin-bottom: 1.5rem;
    background-image: url("/custom/logo-aprogsys.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* --- Titre "Taiga" : le logo porte deja le nom, on le retire ------------- */
.auth h1.logo {
    display: none;
}

/* --- Baseline : "Bienvenue sur le portail de support" -------------------- */
/* font-size:0 neutralise le texte traduit injecte par Angular sans creer de
   clignotement au chargement ; le contenu reel vient du pseudo-element.     */
.auth .tagline {
    font-size: 0;
    text-transform: none;
    margin-bottom: 1.9rem;
}

.auth .tagline::after {
    content: "Bienvenue sur le portail de support";
    display: block;
    font-size: 1.45rem;
    line-height: 1.9rem;
    color: var(--aprogsys-ink);
    text-align: center;
}

/* Filet fin aux couleurs du logo, sous la baseline */
.auth .tagline::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 2px;
    margin: 0 auto 1.1rem;
    background-color: var(--aprogsys-blue);
    border-radius: 2px;
}

/* --- Barre de navigation : logo Taiga -> logo Aprogsys -------------------
   Le template navigation-bar.html utilise la meme classe .logo pour la
   variante anonyme (lien vers taiga.io) et la variante connectee (lien
   interne), donc une seule regle couvre les deux. Fond de navbar : #d8dee9,
   le lettrage noir du logo y est parfaitement lisible.                     */
.navbar .nav-left .logo svg {
    display: none;
}

.navbar .nav-left .logo {
    box-sizing: border-box;
    display: block;
    width: 8rem;
    height: 48px; /* hauteur de .navbar */
    padding: .45rem .7rem;
    background-image: url("/custom/logo-aprogsys.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    background-origin: content-box;
}

/* --- Pied de page : invitation vers le site vitrine ----------------------
   Le bloc est injecte dans <body> pour toutes les pages ; :has() le limite
   aux ecrans d'authentification (.auth n'existe que la). Sur un navigateur
   sans :has(), il reste simplement masque : degradation sans casse.        */
.aprogsys-portal-footer {
    display: none;
}

body:has(.auth) .aprogsys-portal-footer {
    display: block;
    position: fixed;
    right: 0;
    bottom: 1.6rem;
    left: 0;
    z-index: 3; /* .auth est en z-index 2 */
    padding: 0 1rem;
    color: #5a6472;
    font-size: .95rem;
    text-align: center;
}

.aprogsys-portal-footer a {
    color: var(--aprogsys-blue-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(59, 104, 155, .45);
    transition: color .15s ease, border-color .15s ease;
}

.aprogsys-portal-footer a:hover,
.aprogsys-portal-footer a:focus {
    color: var(--aprogsys-ink);
    border-bottom-color: var(--aprogsys-ink);
}

/* Ecrans courts : on resserre plutot que de repasser en flux normal.
   .auth est en position:fixed / z-index:2 et couvre tout le viewport, donc
   un pied de page en flux normal passerait dessous et serait invisible. */
@media (max-height: 640px) {
    body:has(.auth) .aprogsys-portal-footer {
        bottom: .6rem;
        font-size: .85rem;
    }
}

/* Tres petits ecrans : le formulaire prime, on efface le pied de page. */
@media (max-height: 480px) {
    body:has(.auth) .aprogsys-portal-footer {
        display: none;
    }
}

/* ==========================================================================
   Liste des votants (voir custom/voters.js)

   voters.js reutilise les classes natives du bloc "Observateurs"
   (ticket-user-list-container / user-list-single / user-list-avatar /
   user-list-name). Le gabarit ci-dessous reprend celui mesure sur ce bloc
   dans le theme : avatar 48x48 sans arrondi, gouttiere de 4px.

   Retrait de la fonctionnalite : supprimer ce bloc + la directive sub_filter
   qui injecte voters.js.
   ========================================================================== */

/* .upvote-btn est une ligne flex (libelle | compteur | bouton). Sans
   flex-wrap, la liste se placerait A COTE du compteur au lieu d'en dessous. */
.upvote-btn {
    flex-wrap: wrap;
}

/* flex: 0 0 100% et non width: 100% — le theme pose des flex-basis sur ces
   classes, et un flex-basis l'emporte sur une largeur. */
.aprogsys-voters {
    flex: 0 0 100%;
    margin-top: .4rem;
}

.aprogsys-voters[hidden] {
    display: none;
}

/* Liste longue : on defile plutot que d'etirer la colonne laterale. */
.aprogsys-voters .ticket-user-list {
    max-height: 15rem;
    overflow-y: auto;
}

/* Meme gabarit que les avatars du bloc Observateurs. */
.aprogsys-voters .user-list-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-right: 4px;
}

.aprogsys-voters .user-list-avatar img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
}

/* Sans photo : pastille au meme gabarit. Encre #4c566a sur #e5e9f0 = 7:1,
   la ou du blanc sur le bleu du logo n'atteignait que 1,9:1. */
.aprogsys-voters .aprogsys-voters__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #e5e9f0;
    color: #4c566a;
    font-size: .9rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}