/* ==========================================================================
   Styles communs VisioOne
   --------------------------------------------------------------------------
   Ce fichier contient uniquement les surcharges CSS communes aux campus.
   L'objectif est de garder l'interface native VisioOne, tout en ajustant :
   - la taille du sélecteur de bâtiment,
   - la taille du sélecteur d'étages,
   - l'alignement des contrôles,
   - les troncatures de texte.
   ========================================================================== */


/* ==========================================================================
   Layout global
   ========================================================================== */

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    position: relative;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
}

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap");


/* ==========================================================================
   Header du campus
   ========================================================================== */

.campus-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    height: 72px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 1.5rem;

    padding: 0.75rem 2rem;

    background-color: #ffffff;
    border-bottom: 1px solid #dfe4ea;
}

.campus-header__logo {
    display: block;
    width: auto;
    height: 48px;
    flex-shrink: 0;
}

.campus-header__title {
    margin: 0;
    padding-left: 1.25rem;

    color: #001f44;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
}


/* ==========================================================================
   Conteneur VisioOne
   ========================================================================== */

#app {
    position: absolute;

    top: 72px;
    right: 0;
    bottom: 0;
    left: 0;

    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
}


/* ==========================================================================
   Sélecteur du bâtiment actif
   --------------------------------------------------------------------------
   VisioOne affiche le bâtiment sélectionné dans un bouton compact.
   Par défaut, ce bouton est prévu pour afficher un ID court ("B1", "B2"...).
   On l'élargit pour afficher un vrai nom métier ("Grande Arche", etc.).
   ========================================================================== */

.border-divider > .p-1 > button:has(> span.truncate) {
    width: 10.5rem !important;
    min-width: 10.5rem !important;
    max-width: 10.5rem !important;

    height: 3rem !important;
    min-height: 3rem !important;

    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;

    justify-content: center !important;
}

/* Texte du bouton bâtiment sélectionné : évite la troncature agressive. */
.border-divider > .p-1 > button:has(> span.truncate) > span.truncate {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Sécurité globale : si VisioOne réinjecte un span.truncate, on garde un rendu stable. */
button span.truncate {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   Sélecteur d'étages
   --------------------------------------------------------------------------
   Les étages restent volontairement plus compacts que le bâtiment.
   Hiérarchie UX :
   - bâtiment = contexte principal,
   - étage = contrôle secondaire.
   ========================================================================== */

/* Carte blanche contenant les étages. */
div:has(> div > .vg_floorselector) {
    width: fit-content !important;
    min-width: fit-content !important;
    max-width: fit-content !important;

    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Wrapper interne du sélecteur d'étages. */
div:has(> .vg_floorselector) {
    width: fit-content !important;
    min-width: fit-content !important;
    max-width: fit-content !important;

    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Colonne du sélecteur d'étages. */
.vg_floorselector {
    width: fit-content !important;
    min-width: fit-content !important;
    max-width: fit-content !important;
}

/* Boutons d'étages. */
.vg_floorselector button {
    width: 3rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;

    height: 3rem !important;
    min-height: 3rem !important;

    border-radius: 0.55rem !important;
}

/* Bouton d'étage actif. */
.vg_floorselector button[class*="bg-grey"],
.vg_floorselector button[aria-selected="true"] {
    border-radius: 0.55rem !important;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .campus-header {
        height: 60px;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .campus-header__logo {
        height: 36px;
    }

    .campus-header__title {
        font-size: 1rem;
        padding-left: 0.5rem;
    }

    #app {
        top: 60px;
    }
}

@media (max-width: 480px) {
    .campus-header__title {
        font-size: 0.9rem;
    }
}