/*
 * XP_WORKSPACE_LOGO_NORMALIZATION_V1_20260929
 *
 * Source visuelle commune du branding Workspace Xperium SaaS.
 *
 * Cette classe est volontairement indépendante des classes historiques
 * propres aux pages. Elle deviendra également le point d'entrée du futur
 * logo d'organisation.
 *
 * IMPORTANT :
 * - aucune déformation ;
 * - aucun crop ;
 * - conservation du ratio natif ;
 * - même enveloppe visuelle sur tous les écrans backend.
 */

.xp-workspace-logo {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 150px !important;
    max-height: 60px !important;

    object-fit: contain !important;
    object-position: center !important;

    flex: 0 0 auto;
}

/*
 * En affichage mobile, le logo doit conserver exactement
 * la même logique géométrique, avec une enveloppe réduite.
 */
@media (max-width: 960px) {
    .xp-workspace-logo {
        width: auto !important;
        height: auto !important;

        max-width: 148px !important;
        max-height: 46px !important;

        object-fit: contain !important;
        object-position: center !important;
    }
}


/* =========================================================
   XP_ORGANISATION_BRANDING_V1_20260929
   ========================================================= */

.xp-organisation-logo-upload,
.xp-settings__branding-editor {
    display: flex;
    align-items: center;
    gap: 18px;
}

.xp-organisation-logo-preview,
.xp-settings__branding-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 72px;
    flex: 0 0 150px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}

.xp-organisation-logo-preview img,
.xp-settings__branding-preview img {
    display: block;
    max-width: 132px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.xp-organisation-logo-preview > span {
    opacity: .45;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.xp-organisation-logo-upload__body,
.xp-settings__branding-controls {
    flex: 1 1 auto;
    min-width: 0;
}

.xp-organisation-logo-upload__body p,
.xp-settings__branding-help {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.45;
    opacity: .66;
}

.xp-field-optional {
    opacity: .55;
    font-weight: 400;
}

.xp-settings__branding-remove {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .xp-organisation-logo-upload,
    .xp-settings__branding-editor {
        align-items: flex-start;
        flex-direction: column;
    }

    .xp-organisation-logo-preview,
    .xp-settings__branding-preview {
        width: 140px;
        height: 68px;
        flex-basis: 68px;
    }
}


/* =========================================================
   XP_ORGANISATION_BRANDING_UPLOAD_UI_V2_20260930
   ========================================================= */

.xp-settings__branding-upload {
    min-width: 0;
}

.xp-settings__branding-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.xp-settings__branding-picker,
.xp-branding-file-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.xp-branding-file-button {
    flex: 0 0 auto;
    cursor: pointer;
}

.xp-branding-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    opacity: .68;
}

@media (max-width: 640px) {
    .xp-settings__branding-picker,
    .xp-branding-file-picker {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .xp-branding-file-name {
        max-width: 100%;
    }
}


/* =========================================================
   XP_WORKSPACE_LOGO_SQUARE_CONTAIN_V3_20260930

   Zone équitable pour tous les ratios de logo :
   - horizontal
   - carré
   - vertical

   Aucun crop.
   Aucune déformation.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 961px) {

    html body .xp-workspace-logo {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 96px !important;
        max-height: 96px !important;

        object-fit: contain !important;
        object-position: center center !important;

        flex-shrink: 0 !important;
    }


    /*
     * Le header historique faisait environ 76px.
     * 116px permet une zone 96px réellement exploitable
     * avec respiration verticale.
     */

    html body .xp-app__sidebar-top,
    html body .xp-projects__sidebar-top,
    html body .xp-project-detail__sidebar-top,
    html body .xp-storage__sidebar-top,
    html body .xp-users__sidebar-top,
    html body .xp-settings__sidebar-top,
    html body .xp-studio__sidebar-top {
        min-height: 116px !important;
    }
}


/* ---------------------------------------------------------
   MOBILE / TABLETTE
   --------------------------------------------------------- */

@media (max-width: 960px) {

    html body .xp-workspace-logo {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 56px !important;
        max-height: 56px !important;

        object-fit: contain !important;
        object-position: center center !important;

        flex-shrink: 0 !important;
    }
}


/* =========================================================
   XP_BRANDING_UPLOAD_UI_V3_20260930

   Branding uploader :
   - bouton compact
   - placeholder organisation non technique
   ========================================================= */

.xp-branding-file-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;

    padding: 0 14px !important;

    border-radius: 8px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}

.xp-branding-file-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.xp-branding-file-name {
    font-size: 13px;
    line-height: 1.35;
}

.xp-branding-placeholder-text {
    display: block;

    max-width: 110px;

    padding: 0 8px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;

    opacity: 0.62;
}


/*
 * Le placeholder reste parfaitement centré dans la zone logo.
 */
.xp-organisation-logo-preview .xp-branding-placeholder-text,
.xp-settings__branding-preview .xp-branding-placeholder-text {
    margin: auto;
}


/* =========================================================
   XP_STEP1_ORGANISATION_LOGO_LAYOUT_V2
   Alignement propre du bloc upload Step 1.
   ========================================================= */

.xp-organisation-logo-upload {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    column-gap: 32px;
}

.xp-organisation-logo-upload__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.xp-organisation-logo-upload .xp-branding-file-picker {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.xp-organisation-logo-upload .xp-branding-file-name {
    margin: 0;
    min-width: 0;
}

.xp-organisation-logo-upload__body > p {
    margin: 0;
}

.xp-organisation-logo-preview {
    align-self: center;
    justify-self: center;
}

.xp-organisation-logo-preview img {
    display: block;
    max-width: 132px;
    max-height: 96px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 640px) {
    .xp-organisation-logo-upload {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .xp-organisation-logo-upload__body {
        align-items: center;
        text-align: center;
    }

    .xp-organisation-logo-upload .xp-branding-file-picker {
        justify-content: center;
    }
}


/* =========================================================
   XP_STEP1_LOGO_UI_CLEAN_V3_20260930
   Style cohérent avec les boutons Get Access existants.
   ========================================================= */

.xp-organisation-logo-upload {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    column-gap: 28px !important;
    align-items: center !important;
}

.xp-organisation-logo-upload__body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.xp-organisation-logo-upload .xp-branding-file-picker {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;

    min-height: 38px !important;
}


/* Vrai bouton compact — même langage visuel que Get Access */

html body .xp-branding-file-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 136px !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: #202a34 !important;
    background-image: none !important;

    border: 1px solid #202a34 !important;
    border-radius: 4px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    box-shadow: none !important;
    transform: none !important;
}

html body .xp-branding-file-button:hover {
    background: #11161c !important;
    border-color: #11161c !important;
}


/* Nom du fichier : même axe vertical que le bouton */

.xp-organisation-logo-upload .xp-branding-file-name {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 38px !important;
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
}


/* Pas de "Aucun fichier sélectionné" visible à vide */

.xp-organisation-logo-upload .xp-branding-file-name.is-empty {
    display: none !important;
}


/* Texte d'aide exactement sous la ligne bouton/fichier */

.xp-organisation-logo-upload__body > p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* Preview centrée dans sa colonne */

.xp-organisation-logo-preview {
    align-self: center !important;
    justify-self: center !important;
}


@media (max-width: 640px) {

    .xp-organisation-logo-upload {
        grid-template-columns: 1fr !important;
        row-gap: 14px !important;
    }

    .xp-organisation-logo-upload__body {
        align-items: center !important;
    }

    .xp-organisation-logo-upload .xp-branding-file-picker {
        justify-content: center !important;
    }

    .xp-organisation-logo-upload__body > p {
        text-align: center !important;
    }
}


/* =========================================================
   XP_STEP1_LOGO_UI_V4_20260930
   Le label natif est neutre.
   Le bouton visuel est un span interne isolé.
   ========================================================= */

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-picker {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;

    width: auto !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Neutralise complètement les règles globales appliquées aux labels */

.xp-get-access-form
.xp-organisation-logo-upload
label.xp-branding-file-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    line-height: normal !important;

    cursor: pointer !important;
}


/* Bouton visuel réel */

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-trigger
.xp-branding-file-button {
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    background: #202a34 !important;
    background-image: none !important;

    border: 1px solid #202a34 !important;
    border-radius: 6px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;

    box-shadow: none !important;

    cursor: pointer !important;
}

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-trigger:hover
.xp-branding-file-button {
    background: #111820 !important;
    border-color: #111820 !important;
}


/* Nom du fichier parfaitement centré sur le même axe */

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-name {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #6f7882 !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 38px !important;

    white-space: nowrap !important;
}

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-name.is-empty {
    display: none !important;
}


/* Texte explicatif */

.xp-get-access-form
.xp-organisation-logo-upload__body > p {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* Bloc général */

.xp-get-access-form
.xp-organisation-logo-upload {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;

    align-items: center !important;

    column-gap: 28px !important;
}

.xp-get-access-form
.xp-organisation-logo-upload__body {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Mobile */

@media (max-width: 640px) {

    .xp-get-access-form
    .xp-organisation-logo-upload {
        grid-template-columns: 1fr !important;
        row-gap: 14px !important;
    }

    .xp-get-access-form
    .xp-organisation-logo-upload__body {
        align-items: center !important;
    }

    .xp-get-access-form
    .xp-organisation-logo-upload
    .xp-branding-file-picker {
        justify-content: center !important;
    }

    .xp-get-access-form
    .xp-organisation-logo-upload__body > p {
        text-align: center !important;
    }
}


/* =========================================================
   XP_STEP1_LOGO_BUTTON_VISUAL_V5_20260930
   Bouton secondaire cohérent avec le thème Xperium
   ========================================================= */

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-trigger
.xp-branding-file-button {
    height: 34px !important;
    min-height: 34px !important;

    padding: 0 14px !important;

    background: #394650 !important;
    background-image: none !important;

    border: 1px solid #394650 !important;
    border-radius: 4px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    letter-spacing: normal !important;
    text-transform: none !important;

    box-shadow: none !important;
}

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-trigger:hover
.xp-branding-file-button {
    background: #202a34 !important;
    border-color: #202a34 !important;
}


/* =========================================================
   XP_STEP1_LOGO_PREVIEW_SPACE_V6_20260930
   Plus d'espace pour les logos horizontaux / carrés / verticaux
   ========================================================= */

.xp-get-access-form
.xp-organisation-logo-upload {
    grid-template-columns: 190px minmax(0, 1fr) !important;
}


/* Zone réelle disponible pour le logo */

.xp-get-access-form
.xp-organisation-logo-preview {
    box-sizing: border-box !important;

    width: 180px !important;
    height: 120px !important;

    min-width: 180px !important;
    min-height: 120px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}


/* Le logo reste entièrement visible, sans crop ni déformation */

.xp-get-access-form
.xp-organisation-logo-preview img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 166px !important;
    max-height: 106px !important;

    object-fit: contain !important;
    object-position: center center !important;
}


/* Placeholder centré dans la même zone */

.xp-get-access-form
.xp-organisation-logo-preview
.xp-branding-placeholder-text {
    max-width: 150px !important;
    margin: auto !important;
}


@media (max-width: 640px) {

    .xp-get-access-form
    .xp-organisation-logo-upload {
        grid-template-columns: 1fr !important;
    }

    .xp-get-access-form
    .xp-organisation-logo-preview {
        width: 160px !important;
        height: 110px !important;

        min-width: 160px !important;
        min-height: 110px !important;
    }

    .xp-get-access-form
    .xp-organisation-logo-preview img {
        max-width: 146px !important;
        max-height: 96px !important;
    }
}


/* =========================================================
   XP_STEP1_LOGO_BUTTON_BACK_STYLE_V7_20260930
   Même langage visuel que le bouton Retour de Get Access
   ========================================================= */

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-trigger
.xp-branding-file-button {
    height: 38px !important;
    min-height: 38px !important;

    padding: 0 15px !important;

    color: #52606c !important;
    -webkit-text-fill-color: #52606c !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #ccd3da !important;
    border-radius: 4px !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;

    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}

.xp-get-access-form
.xp-organisation-logo-upload
.xp-branding-file-trigger:hover
.xp-branding-file-button {
    color: #202932 !important;
    -webkit-text-fill-color: #202932 !important;

    background: #f7f8f9 !important;

    border-color: #aeb8c1 !important;

    transform: none !important;
}