loko/streetup/controls/static/controls/controls_detail.css

body {
    padding-top: 70px; /* Ajuste cette valeur selon la hauteur de ta navbar */
}

.remark-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacement entre les images */
}

.remark-image-wrapper {
    position: relative;
    display: inline-block;
}

.remark-images img {
    width: 100px; /* Largeur fixe */
    height: 100px; /* Hauteur fixe */
    object-fit: cover; /* Garde le ratio et remplit */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.remark-images a {
    display: inline-block; /* Permet de cliquer sur toute la zone */
    border-radius: 8px;
    overflow: hidden; /* Pour éviter les débordements */
}

.remark-image-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0.125rem 0.35rem;
    z-index: 5;
}

#remark-form-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white;
    z-index: 1050;
    display: none; /* Caché par défaut */
    flex-direction: column;
}

#quantity-form-container {
    position: fixed;
    top:0; left:0; width:100%; height:100dvh;
    background: #fff;
    z-index:1050;

    display:none;
    justify-content:center;   /* horizontal */
    padding: 16px;             /* marge écran mobile */
    overflow:auto;             /* scroll si contenu > viewport */
}

#add-quantity-btn { scroll-margin-top: 80px; }

#map {
    height: 45vh; /* 45% de l'écran pour la carte */
}

/* ✅ Positionner le conteneur des boutons sur la carte */
#layer-controls {
    position: absolute;
    top: 20px; /* Distance du bas */
    left: 20px; /* Distance de la gauche */
    z-index: 1000; /* Assure que c'est au-dessus de la carte */
}

/* ✅ Améliorer le style des boutons */
#layer-controls button {
    display: inline;
    margin: 5px 0;
    width: 100px;
    text-align: center;
    overflow: hidden; /* ✅ Empêcher le débordement */
    white-space: nowrap; /* ✅ Empêcher le retour à la ligne */
    text-overflow: ellipsis; /* ✅ Tronquer le texte si nécessaire */
    font-size: 14px; /* ✅ Taille de police par défaut */
    border: 1px solid #007bff; /* ✅ Bordure bleue */
}



.form-content {
    flex-grow: 1; /* Formulaire prend l'espace restant */
    padding: 20px;
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    z-index:10001;
}

.remark-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(169, 179, 191);
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

.badge {
    min-width: 120px; /* Assure une largeur uniforme pour le statut */
    text-align: center;
}

.d-flex.gap-2 button {
    width: 40px; /* Assure que les boutons ont la même taille */
}



#upload-plan-form-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white;
    z-index: 1050;
    display: none; /* Caché par défaut */
    flex-direction: column;
}

.message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
}
.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-badge {
    min-width: 80px;
}

.stick-to-bottom {
    margin-top: auto;
  }


/***** Action bar mobile *****/
:root {
  --action-bar-h: 220px; /* hauteur par défaut (2 gros boutons) */
}

.action-bar {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 16px rgba(0,0,0,.08);
  z-index: 1060;
}

.content-scroll{
  padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
}

#qty-editor, .form-content{
  height: 100dvh;          /* mieux que 100vh sur mobile */
  display: flex;
  flex-direction: column;
}