/* ============================================
   ECHELLE DES POLICES

   Les tailles reprennent celles du Compagnon, exprimees en points WPF
   (SegoeUI14 = FontSize 14pt). Un point WPF suit l'echelle DPI de Windows,
   alors qu'un pt CSS vaut 1,333 px fixe : convertir un 14pt en 19px est
   arithmetiquement juste mais rend le texte visiblement trop grand.

   Toutes les polices du site portent donc un facteur d'echelle de 0,72,
   arrondi au pixel. Le commentaire "14pt a l'echelle Web" qui suit une
   declaration documente la taille d'origine du Compagnon et signale que la
   valeur ecrite porte ce facteur : 14pt donne 13px, et non 19px.

   Une nouvelle taille se calcule de la meme facon : round(N x 1,333 x 0,72).
   ============================================ */

/* Colors */

html, body {
    font-family: 'Segoe UI', 'Inter', sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

/* Supprimer les scrollbars sur tous les conteneurs Blazor */
#blazor-error-ui,
#components-reconnect-modal,
.page,
article,
main {
    overflow: hidden !important;
}

/* Cacher la scrollbar globalement sauf quand explicitement autorisée */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

/* Réactiver la scrollbar uniquement pour les zones de contenu qui en ont besoin */
.sidebar-content-area::-webkit-scrollbar,
.scroll-enabled::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sidebar-content-area::-webkit-scrollbar-thumb,
.scroll-enabled::-webkit-scrollbar-thumb {
    background: #DBDBDB;
    border-radius: 4px;
}

.sidebar-content-area::-webkit-scrollbar-track,
.scroll-enabled::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-blue {
    background: #2A2E3F;
}

.bg-blue {
    background-color: #2A2E3F;
}

.text-grey {
    color: #707070;
}

.bg-light-gray {
    background-color: #f3f5fb;
}

.subtitle {
    font-size: 1.25em;
    font-weight: bold;
    color: #0277ED;
    margin-bottom: 0.8em;
}

.alinea {
    margin-left: 1.938rem;
}

.left-panel {
    border-right: solid;
    border-color: #DBDBDB;
    min-width: 20rem;
}

.button-primary {
    border-width: 0.1em;
    border-radius: 0.5em;
    background-color: blue;
    border-color: black;
    width: 15em;
    padding: 0.5em;
}

btn.btn-primary[disabled] {
    background-color: #F3F3F3;
}

.button-secondary {
    border-width: 0.1em;
    border-radius: 0.5em;
    background-color: white;
    border-color: black;
    width: 15em;
    padding: 0.5em;
}

.custom-icon {
    width: 3.5em;
    height: 3.5em;
}

.min-width15 {
    min-width: 15rem;
}

.w-3rem {
    width: 3rem;
}

.h-4rem {
    height: 4rem;
}

.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.margin-component {
    margin-left: 1.938rem;
}

.border-1px-black{
    border: 1px solid black;
}

/* ------------------------- LAYOUTS -------------------------- */
.full-screen {
    height: 100%;
    box-sizing: border-box;
}

.split-screen {
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
    height: 100vh;
    margin-top: 1.6rem;
}

.left {
    min-width: 25rem;
    margin-left: 1.938rem;
}

.right {
    min-width: 25rem;
    margin-left: 4rem;
}

.divider {
    background-color: #ccc;
    width: 3px;
}

/* ------------------------ END LAYOUTS ------------------------- */


/* ------------------------- INPUT FIELDS -------------------------- */
/* Text Input ne peut être design qu'ici */
.custom-input-text {
    width: 100%;
    height: 100%;
    padding: 0.5rem 1rem 0.5rem 5.5rem;
    font-size: 0.72rem;
    border: 1px solid #555; /* #ccc;*/
    border-radius: 0.5rem;
    background-color: #fff;
    outline: none;
}

.custom-input-combobox {
    font-weight: 600; /* DemiBold */
    cursor: pointer;
    appearance: auto;
}

.custom-form-group {
    position: relative;
    /*height: 2.188rem;*/
   /* margin-bottom: 1rem;*/

    /*max-width: 25rem;*/
    min-width: 15rem;
}

.custom-form-label {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 5rem;
    font-size: 0.54rem;
    color: #707070;
    pointer-events: none;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-form-input:focus {
    border-color: #007bff;
}


/* Override pour les form-groups dans les lignes de correspondance (InitializeProject) */
.match-row .custom-form-group {
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* ------------------------- END INPUT FIELDS -------------------------- */

/* Effects */

.rounded-10px {
    border-radius: 10px;
}

.rounded-15px {
    border-radius: 15px;
}

.rounded-20px {
    border-radius: 20px;
}

.rounded-left-15px {
    border-radius: 15px 0 0 15px;
}

.rounded-top-15px {
    border-radius: 15px 15px 0 0;
}

.shadow {
    box-shadow: 0px 3px 6px #00000029;
}

/* Labels */


.inter-12px {
    font-size: 9px;
    font-family: 'Inter', sans-serif;
}

.inter-14px {
    font-size: 10px;
    font-family: 'Inter', sans-serif;
}

.inter-16px {
    font-size: 12px;
    font-family: 'Inter', sans-serif;
}

.inter-18px {
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}

.inter-20px {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.inter-24px {
    font-size: 17px;
    font-family: 'Inter', sans-serif;
}

.inter-30px {
    font-size: 22px;
    font-family: 'Inter', sans-serif;
}

.segoe-20px {
    font-size: 14px;
    font-family: 'Segoe UI';
}

.fs-7{
    font-size: 9px;
}

.semibold {
    font-weight: 600;
}

/* Icônes */

.icon-40px {
    width: 40px;
    height: 40px;
}

.icon-32px {
    width: 32px;
    height: 32px;
}

.icon-24px {
    width: 24px;
    height: 24px;
}

.icon-16px {
    width: 16px;
    height: 16px;
}

/* Containers */

.full-size-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.navbar-top {
    height: 6rem;
    width: 100%;
}

.accordion-button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.accordion-body {
    padding: 1px !important;
}

.accordion-button::after {
    order: -1;
    //swap order margin-left: 0;
    //margin-right: 0.5em;
    margin-left: 0;
    // just extra space between text and icon
}

.hover:hover {
    background-color: lightblue;
    border: 1px solid blue;
}

/* ------------------------- LOADING STATE -------------------------- */

/* Libelle d'attente affiche pendant le chargement des donnees d'une page.
   Centre dans l'espace restant sous l'en-tete, comme le StackPanel centre du Spinner du
   Compagnon (Views/Controls/Spinner.xaml), au lieu du coin haut gauche ou le placait le
   flux normal d'un simple paragraphe.
   La taille de police suit l'echelle du Compagnon : 22px correspond a SegoeUI22 du theme WPF.

   Le nom porte le suffixe -page et non .loading-message : ce dernier est deja pris par deux
   composants (VisualizeProject et FileTransferProgressModal), ou il designe un paragraphe
   ordinaire dans un empilement vertical. Une regle globale de ce nom les centrerait et les
   passerait de 12/16 px a 22 px.

   flex: 1 et min-height: 0 : le libelle est le seul enfant rendu pendant le chargement, il
   doit donc reclamer toute la hauteur offerte par le conteneur de page pour pouvoir s'y
   centrer. Le wrapper de contenu du layout etant lui-meme une colonne flex, cela vaut aussi
   pour les pages sans conteneur racine (ModelProject, EditTypologies). */
.loading-message-page {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 22px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    color: #0277ED;
    text-align: center;
}

/* ------------------------- NOT FOUND STATE -------------------------- */

/* Message "entite introuvable" avec lien de retour */
.not-found-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    margin: 40px auto;
    max-width: 600px;
    background-color: #F3F5FB;
    border-radius: 12px;
    box-shadow: 0px 3px 6px #00000029;
}

.not-found-message p {
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    color: #FF0000;
    margin: 0 0 30px 0;
    text-align: center;
}

/* Bouton de retour vers la liste (style coherent avec les boutons secondaires) */
.btn-back {
    display: inline-block;
    padding: 10px 40px;
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    color: #0277ED;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #0277ED;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-back:hover {
    background-color: #0277ED;
    color: #FFFFFF;
    text-decoration: none;
}

/* ------------------------- END NOT FOUND STATE -------------------------- */