* {
  box-sizing: border-box;
}
body{
 font-family:Arial;
 padding:0px;
margin-top: 0px;
}
.listLine{
    display: ruby-base;
}

#toolbar{
    position:sticky;
    top:0;
    background:#eee;
    padding:8px;
    display:block;
    align-items:center;
    gap:0px;
    z-index:1000;
    flex-wrap:wrap;
    width: 100%;
    min-height: 40px;
    border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
    

}
/*#toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #eee;
    z-index: 1000;
    transform: translate3d(0,0,0);
    will-change: transform;
}*/

#toolbar a{
    text-decoration:none;
    font-size:18px;
    padding-right: 5px;
}

#toolbar select{
    font-size:10px;
}
.topbar,
.subbar {
  display: flex;
}
.centrer {
    width: fit-content;
    margin: auto;
}
.nav {
    width: fit-content;
    margin: auto;
}
.site{
 display:block;
 padding:15px;
 margin:10px 0;
 background:#f2f2f2;
 border-radius:8px;
 text-decoration:none;
 color:black;
 font-size:18px;
 width:90%
}

/*img {
    cursor: pointer;
    transition: 0.2s;
}
img:hover {
    transform: scale(1.05);
}
*/
#viewer {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.8);
    display:none;
    align-items:center;
    justify-content:center;
}
#viewer img {
    max-width:90%;
    max-height:90%;
}
.loginForm{
margin-bottom:20px;
position:relative;
}

.loginForm input{
width:100%;
padding:8px;
font-size:16px;
}

.history{
display:none;
background:#f5f5f5;
padding:6px;
margin-top:5px;
border-radius:6px;
}

.suggestions{
position:absolute;
background:white;
/* border:1px solid #ccc; */
width:95%;
max-height:150px;
overflow:auto;
z-index:9;
}

.suggestions div{
padding:6px;
cursor:pointer;
}

.suggestions div:hover{
background:#eee;
}

.photo{
width:110px;
margin:5px;
border:1px solid #ccc;
cursor:pointer;
}

/*ELEMENTS*/


/* Fond sombre */
#filters {
  position: fixed;        /* reste collé à l'écran */
  top: 8%;                /* centré verticalement */
  left: 2%;               /* centré horizontalement */
  width: 96vw;            /* 90% largeur écran */
  height: 90dvh;           /* 90% hauteur écran */

  background: white;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);

  overflow-y: auto;       
  overflow-x: auto
  ;

  display: none;          /* caché par défaut */
  z-index: 1000;
}
/*
#filters{
display:none;
border:1px solid #ccc;
padding:10px;
margin-bottom:10px;
border-radius:6px;

position:sticky;
    top:50px;
    background:#eee;
    padding:8px;
   
    align-items:center;
    gap:8px;
    z-index:1001;
    flex-wrap:wrap;
    width: 100%;
}
*/
.element{
border:1px solid #ccc;
margin-bottom:10px;
padding:10px;
border-radius:6px;
}

.attribute{margin-left:10px;}

img.photo{max-width:100px;margin:5px;}
.filterRow{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:6px;
}

.filterRow label{
    min-width:120px;
}
/*Element*/

.field{
margin-bottom:20px;
position:relative;
}

.field input {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

/*gallery*/
.grid {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.card {
    border:1px solid #ccc;
    padding:10px;
    width:200px;
    border-radius:8px;
}
.card img {
    width:100%;
}
.meta {
    font-size:12px;
}

/**/
/* --- ELEMENT --- */
.element{
    border:1px solid #ccc;
    margin-bottom:10px;
    padding:12px;
    border-radius:10px;
    background:white;
    transition:0.2s;
    position:relative;
}

/* sélection visuelle */
.element.selected{
    background:#d0ebff;
    border-color:#339af0;
}

/* checkbox cachée (on garde pour compatibilité) */
.element input[type="checkbox"]{
    position:absolute;
    top:10px;
    right:10px;
    transform:scale(1.3);
}

/* --- bouton flottant --- */
#bulkBar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#222;
    color:white;
    padding:10px;
    display:block;
/*    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;*/
    z-index:999;
}

/* caché si rien sélectionné */
#bulkBar.hidden{
    display:none;
}

#bulkBar select,
#bulkBar button{
    font-size:10px;
    padding:6px;
}
#renameBuilder{
display: none;
transition: all 0.2s ease;
}
#fieldsContainer{
    max-height: 80%;
    overflow-y: auto;
    position: relative; /* 🔥 IMPORTANT */
}

.filterRow{
    display:flex;
    align-items:center;
    gap:10px;
    padding:5px;
    background:white;
}

.dragHandle {
    touch-action: none;
}

.dragging{
    opacity:0.8;
    background:#ddd;
    pointer-events:none;
}
#countSelected{
    margin-right: auto;
}