/* Référentiel des applications : aperçu des logos (création, modification, fiche) */

/* Logo complet sur les cartes d'application (tableau de bord, référentiel) :
   hauteur fixe, jamais plus large que la carte, quelle que soit la taille du
   fichier déposé. */
.app-card-logo {
    width: auto;
    height: 60px;
    max-width: 100%;
    object-fit: contain;
}

.app-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128px;
    padding: 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    /* Damier discret : la transparence d'un logo se voit avant l'enregistrement. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f1f3f5 25%, transparent 25%),
        linear-gradient(-45deg, #f1f3f5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f3f5 75%),
        linear-gradient(-45deg, transparent 75%, #f1f3f5 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.app-logo-frame img {
    max-width: 100%;
    object-fit: contain;
}

.app-logo-frame--full img {
    max-height: 88px;
}

.app-logo-frame--mini img {
    width: 56px;
    height: 56px;
}

.app-oauth-secret {
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    word-break: break-all;
}

/* ---- Thème sombre ---- */

/* Damier sombre : l'aperçu montre le logo tel qu'il apparaîtra sur les surfaces sombres. */
[data-bs-theme="dark"] .app-logo-frame {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    background-image:
        linear-gradient(45deg, var(--bs-secondary-bg) 25%, transparent 25%),
        linear-gradient(-45deg, var(--bs-secondary-bg) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--bs-secondary-bg) 75%),
        linear-gradient(-45deg, transparent 75%, var(--bs-secondary-bg) 75%);
}

/* Logos complets téléversés : leur mot (« check », « exploit »…) est dessiné en
   encre foncée, illisible sur une carte sombre. Même parti que les tuiles du
   sélecteur d'application du template : une plaque blanche derrière l'image. */
[data-bs-theme="dark"] .app-card-logo {
    background: #fff;
    border-radius: 8px;
    padding: 4px 8px;
}