/* ===== Layout global ===== */
.fc-wrap { max-width:1200px; margin:0 auto; position:relative; }

/* Toolbar : 2 zones (gauche empilée, droite = recherche) */
.fc-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;      /* haut de la ligne */
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.fc-filters-left{
  display:flex;
  flex-direction:column;       /* Ligne 1 puis Ligne 2 */
  align-items:flex-start;      /* tout à gauche */
  gap:10px;
  flex:1 1 auto;
  min-width:0;
}
.fc-actions{ flex:0 0 auto; margin-left:auto; }

/* ===== Recherche (à droite) ===== */
.fc-search-wrap{
  position:relative;
  display:inline-block;        /* évite les étirements bizarres */
  vertical-align:middle;
}
.fc-search{
  display:block;
  box-sizing:border-box;
  min-width:260px;             /* confort */
  height:42px;                 /* hauteur stable */
  padding:10px 12px 10px 52px !important;  /* marge pour l’icône */
  border:1px solid #e5e7eb;
  border-radius:999px;
  outline:0;
  background:#fff;
  line-height:1.2;
  -webkit-appearance:none; appearance:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.fc-search:focus{
  border-color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.fc-search-ico{
  position:absolute;
  left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px;
  opacity:.6; pointer-events:none;
}
.fc-search::placeholder{ color:#6b7280; opacity:1; }
/* neutralise certains styles webkit */
.fc-search[type="search"]::-webkit-search-decoration,
.fc-search[type="search"]::-webkit-search-cancel-button,
.fc-search[type="search"]::-webkit-search-results-button,
.fc-search[type="search"]::-webkit-search-results-decoration{ -webkit-appearance:none; }

/* Responsive recherche */
@media (max-width:640px){
  .fc-actions{ width:100%; display:flex; justify-content:flex-end; }
  .fc-search{ width:100%; min-width:0; }
}

/* ===== Filtres toggles ===== */

/* LIGNE 1 : congélateurs + "Ruptures uniquement" (sur la même ligne) */
.fc-row-top{
  display:flex;
  align-items:center;
  gap:8px;                    /* petit espace entre chips et coche */
  flex-wrap:nowrap;           /* ne casse pas la ligne */
  width:100%;
  min-width:0;
}

/* Congélateurs : une seule ligne, scroll horizontal si trop d’items
   >>> Réserve de la place à la coche (≈180px) pour qu’elle reste collée après les chips */
.fc-row-top .fc-freezers{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;               /* défilement horizontal si besoin */
  -webkit-overflow-scrolling:touch;
  flex:0 1 calc(100% - 180px);   /* <<< clé pour coller la coche à droite des chips */
  max-width:calc(100% - 180px);
  min-width:0;
}
@media (max-width:480px){
  .fc-row-top .fc-freezers{
    flex-basis: calc(100% - 150px);
    max-width: calc(100% - 150px);
  }
}
.fc-row-top .fc-freezer-option span{ white-space:nowrap; }

/* Coche “Ruptures uniquement” : reste collée, largeur naturelle */
.fc-toggle{
  display:flex; align-items:center; gap:6px;
  background:#f1f5f9; border-radius:999px; padding:6px 10px;
  font-size:13px; color:#111; user-select:none; white-space:nowrap;
  flex:0 0 auto;                 /* largeur naturelle */
}
.fc-toggle input{ width:16px; height:16px; margin:0; }

/* Style commun "chip" (congélos et catégories) */
.fc-freezer-option, .fc-cat-option{ cursor:pointer; }
.fc-freezer-option input, .fc-cat-option input{ display:none; }
.fc-freezer-option span,
.fc-cat-option span{
  display:inline-block; padding:6px 12px; border-radius:20px;
  background:#eee; color:#222; font-size:14px; transition:.2s;
}

/* Congélos sélectionnés = noir */
.fc-freezer-option input:checked + span{ background:#000; color:#fff; }

/* LIGNE 2 : catégories (descend sous la ligne 1) */
.fc-row-cats{ width:100%; flex:0 0 100%; }
.fc-row-cats .fc-cats{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;
}
/* Catégories sélectionnées = vert */
.fc-cat-option input:checked + span{ background:green; color:#fff; }

/* ===== Grille & cartes ===== */
.fc-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  gap:14px;
}
.fc-card{
  background:#fff; border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column;
}

/* Fallback CSS : cacher ruptures sans JS */
.fc-card.fc-oos{ display:none; }

.fc-thumb{
  position:relative; aspect-ratio:16/11;
  background:#f6f7f9; display:flex; align-items:center; justify-content:center;
}
.fc-thumb img{ width:100%; height:100%; object-fit:cover; }
.fc-thumb--placeholder{
  width:72px; height:72px; border-radius:12px;
  background:#e9eef5; display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:700; color:#445;
}

/* Boutons +/– : groupe haut-droite */
.fc-thumb-actions{
  position:absolute; right:8px; top:8px;
  display:flex; flex-direction:row; align-items:center; gap:8px;
}
.fc-card .fc-thumb .fc-btn{
  width:32px !important; height:32px !important; padding:0 !important;
  border:none !important; border-radius:50% !important;
  -webkit-appearance:none; appearance:none;
  background:#000 !important; color:#fff !important;
  font-size:18px !important; line-height:1 !important;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2); cursor:pointer; z-index:19;
}
.fc-card .fc-thumb .fc-btn:hover{ opacity:.92; }

/* Bouton supprimer (haut-gauche) : rond rouge + icône blanche */
.fc-card .fc-thumb .fc-del-btn{
  position:absolute; left:8px; top:8px;
  width:36px; height:36px; padding:0 !important;
  border:none !important; border-radius:50% !important;
  -webkit-appearance:none; appearance:none;
  background:#e02424 !important; color:#fff; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2); cursor:pointer; z-index:30; overflow:hidden;
}
.fc-card .fc-thumb .fc-del-btn:hover{ background:#c81e1e !important; }
.fc-card .fc-thumb .fc-del-btn::before{
  content:""; width:18px; height:18px; display:block;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23ffffff' d='M9 3h6l1 2h5v2H3V5h5l1-2Zm1 6h2v9h-2V9Zm6 0h2v9h-2V9ZM6 9h2v9H6V9Zm-1 11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7H5v13Z'/>\
</svg>");
}

/* Badge quantité (bas-droite) */
.fc-qty-badge{
  position:absolute; right:8px; bottom:8px;
  width:36px; height:36px; border-radius:999px;
  background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}

/* Corps de carte */
.fc-body{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.fc-title{ font-weight:700; font-size:16px; line-height:1.3; color:#222; }
.fc-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.fc-chip{ background:#f1f3f5; color:#333; padding:4px 8px; border-radius:999px; font-size:12px; }
.fc-dates{ display:flex; gap:12px; flex-wrap:wrap; color:#555; font-size:12px; }
.fc-date strong{ color:#222; }

/* =========================================================
   Mobile optimisé (PUCES + RUPTURES + BOUTONS + STOCK)
   ========================================================= */

/* ---- Tablettes et mobiles ---- */
@media (max-width: 768px){

  /* Toolbar */
  .fc-toolbar{
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
  }
  .fc-filters-left{ width:100%; gap:8px; }

  /* LIGNE 1 : congélateurs + checkbox "ruptures" */
  .fc-row-top{
    display:flex;
    align-items:center;
    gap:8px;                /* espacement réduit */
    flex-wrap:nowrap;       /* reste sur une seule ligne */
    width:100%;
    min-width:0;
  }
  .fc-row-top .fc-freezers{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;       /* une ligne, avec scroll si besoin */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex:1 1 auto;
    min-width:0;
  }
  .fc-row-top .fc-freezer-option span{
    white-space:nowrap;
  }

  /* Puces congélateurs : plus compacts */
  .fc-freezer-option span{
    padding:6px 10px;
    min-height:30px;
    border-radius:16px;
    font-size:13px;
  }

  /* Coche “Ruptures uniquement” : taille réduite */
  .fc-toggle{
    flex:0 0 auto;
    white-space:nowrap;
    background:#f3f4f6; 
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    gap:6px;
  }
  .fc-toggle input{ width:14px; height:14px; }

  /* LIGNE 2 : catégories en-dessous */
  .fc-row-cats{ width:100%; }
  .fc-row-cats .fc-cats{
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .fc-cat-option span{
    padding:6px 10px;
    min-height:30px;
    border-radius:16px;
    font-size:13px;
  }

  /* Barre de recherche : pleine largeur en dessous */
  .fc-actions{ width:100%; display:flex; justify-content:flex-end; }
  .fc-search{ width:100%; min-width:0; height:40px; padding-left:50px !important; }
  .fc-search-ico{ left:16px; width:18px; height:18px; }

  /* Grille : légère réduction de la taille mini des cartes */
  .fc-grid{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }

  /* ---- Boutons sur image (plus discrets) ---- */
  .fc-thumb-actions{ gap:6px; }
  .fc-card .fc-thumb .fc-btn{
    width:30px !important;
    height:30px !important;
    font-size:18px !important;
  }
  .fc-card .fc-thumb .fc-del-btn{
    width:30px;
    height:30px;
  }
  .fc-qty-badge{
    width:30px; height:30px; font-size:13px;
  }

  /* Typo carte un peu plus compacte */
  .fc-title{ font-size:15px; }
  .fc-chip{ font-size:12px; }
  .fc-dates{ font-size:12px; }
}

/* ---- Petits téléphones ---- */
@media (max-width: 480px){

  /* Congélateurs + coche : encore plus resserré */
  .fc-row-top{ gap:6px; }
  .fc-row-top .fc-freezers{ gap:6px; }
  .fc-freezer-option span,
  .fc-cat-option span{
    min-height:28px;
    padding:5px 9px;
    border-radius:14px;
    font-size:12.5px;
  }
  .fc-toggle{
    padding:5px 9px;
    font-size:12.5px;
  }

  /* Grille : cartes plus grandes = 1 ou 2 par ligne selon largeur */
  .fc-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }

  /* Boutons / badge taille réduite */
  .fc-card .fc-thumb .fc-btn{
    width:28px !important;
    height:28px !important;
    font-size:17px !important;
  }
  .fc-card .fc-thumb .fc-del-btn{
    width:28px;
    height:28px;
  }
  .fc-qty-badge{
    width:28px; height:28px; font-size:12px;
  }

  .fc-title{ font-size:14.5px; }
  .fc-dates{ font-size:12px; }
}

/* =========================================================
   Mobile : "Ruptures uniquement" AU-DESSUS des congélateurs,
   sur sa propre ligne (largeur naturelle)
   ========================================================= */
@media (max-width: 768px){

  /* La rangée passe en colonne : les éléments s’empilent */
  .fc-row-top{
    display:flex;
    flex-direction:column;     /* <- empile */
    align-items:flex-start;    /* aligné à gauche */
    gap:8px;                   /* petit espace entre les deux lignes */
    width:100%;
    min-width:0;
  }

  /* La coche conserve sa largeur naturelle */
  .fc-row-top .fc-oos{
    order:0;                   /* d’abord */
    flex:0 0 auto;             /* pas pleine largeur */
    margin:0;                  /* pas d’espace superflu */
  }

  /* Les congélateurs passent en dessous et peuvent défiler horizontalement */
  .fc-row-top .fc-freezers{
    order:1;                   /* ensuite */
    flex:0 0 100% !important;  /* pleine largeur */
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
  }
}

/* Bouton Edit (crayon) */
.fc-edit-btn{
  position:absolute; left:48px; top:8px;   /* à côté de la poubelle */
  width:32px; height:32px; border-radius:50%;
  border:none; background:#fff; color:#111;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2); cursor:pointer; z-index:28;
}
.fc-edit-btn::before{
  content:""; width:16px; height:16px; display:block;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> \
<path fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm18.71-11.04a1 1 0 0 0 0-1.41L18.2 0.29a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z'/> \
</svg>");
}
.fc-edit-btn:hover{ background:#f5f5f5; }

/* Modale */
.fc-modal[hidden]{ display:none !important; }
.fc-modal{
  position:fixed; inset:0; z-index:9999;
}
.fc-modal__backdrop{
  position:absolute; inset:0; background:rgba(17,24,39,.55);
}
.fc-modal__dialog{
  position:relative; z-index:1;
  width: min(520px, calc(100% - 32px));
  margin: 60px auto; background:#fff; border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.2);
  padding:16px 16px 12px;
}

/* CHANGEMENTS ICI — Bouton fermeture modale (plus rond, pas de background, icône noire) */
.fc-modal__close{
  position:absolute; right:8px; top:8px;
  width:32px; height:32px;
  border:0 !important; 
  background: transparent !important;   /* ← plus de background */
  border-radius: 0 !important;          /* ← plus de bord arrondi */
  cursor:pointer;
  line-height:0; 
  font-size:0;                          /* masque un éventuel "×" texte */
  box-shadow:none !important;
}
.fc-modal__close::before{
  content:""; width:24px; height:24px; display:block;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path fill='%23000000' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 1 0-1.41 1.42L10.59 12l-4.9 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.9a1 1 0 0 0 1.41-1.42L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4Z'/>\
</svg>");
}

/* Formulaire édition */
.fc-edit-form{ display:flex; flex-direction:column; gap:12px; }
.fc-row{ display:flex; gap:12px; }
.fc-field{ flex:1 1 0; display:flex; flex-direction:column; gap:6px; }
.fc-field label{ font-size:13px; color:#333; }
.fc-field input, .fc-field select{
  padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px;
}

/* Boutons actions modale */
.fc-modal__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.fc-btn-cancel, .fc-btn-save{
  padding:8px 12px; border-radius:8px; border:1px solid #e5e7eb; cursor:pointer;
}

/* Sauvegarder = noir normal */
.fc-btn-save{
  background:#111; color:#fff; border-color:#111;
  transition: background .2s ease;
}

/* CHANGEMENT ICI — Hover avec dégradé noir */
.fc-btn-save:hover{
  background: linear-gradient(180deg, #111 0%, #000 100%);
}

/* Annuler = gris */
.fc-btn-cancel{
  background:#e5e7eb; color:#111; border-color:#e5e7eb;
}
.fc-btn-cancel:hover{ background:#d1d5db; }

@media (max-width:520px){
  .fc-row{ flex-direction:column; }
}

/* ========== RÉPARATIONS BOUTONS RONDS & ICONES (sur la carte) ========== */

/* RESET global pour éviter les styles du thème */
.fc-card .fc-thumb button {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  padding: 0 !important;
  background: none;
  outline: none !important;
  box-shadow: none;
}

/* Groupe des boutons sur l'image : position */
.fc-thumb-actions{
  position:absolute; right:8px; top:8px;
  display:flex; align-items:center; gap:8px;
}

/* + / – : ronds, compacts */
.fc-card .fc-thumb .fc-btn{
  width:28px !important; height:28px !important;
  border-radius:50% !important;
  background:#000 !important; color:#fff !important;
  font-size:16px !important; line-height:1 !important;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  cursor:pointer; z-index:19;
}
.fc-card .fc-thumb .fc-btn:hover{ opacity:.92; }

/* Badge quantité : plus discret */
.fc-qty-badge{
  position:absolute; right:8px; bottom:8px;
  width:28px; height:28px; border-radius:50%;
  background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}

/* SUPPRIMER (poubelle) : rond rouge + icône en ::before */
.fc-card .fc-thumb .fc-del-btn{
  position:absolute; left:8px; top:8px;
  width:28px; height:28px;
  border-radius:50% !important;
  background:#e02424 !important; color:#fff !important;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:30; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.fc-card .fc-thumb .fc-del-btn:hover{ background:#c81e1e !important; }
.fc-card .fc-thumb .fc-del-btn::before{
  content:""; width:16px; height:16px; display:block;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23ffffff' d='M9 3h6l1 2h5v2H3V5h5l1-2Zm1 6h2v9h-2V9Zm6 0h2v9h-2V9ZM6 9h2v9H6V9Zm-1 11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7H5v13Z'/>\
</svg>");
}

/* EDITER (crayon) : rond bleu + icône en ::before */
.fc-card .fc-thumb .fc-edit-btn{
  position:absolute; left:40px; top:8px;   /* à côté de la poubelle */
  width:28px; height:28px;
  border-radius:50% !important;
  background:#2563eb !important; color:#fff !important;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:30; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.fc-card .fc-thumb .fc-edit-btn:hover{ background:#1d4ed8 !important; }
.fc-card .fc-thumb .fc-edit-btn::before{
  content:""; width:16px; height:16px; display:block;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23ffffff' d='M3 17.25V21h3.75L17.81 9.94l-3.76-3.76L3 17.25zm14.71-10.46a1 1 0 0 0 0-1.41L16.62 3.3a1 1 0 0 0-1.41 0l-1.83 1.83 3.76 3.76 1.83-1.83z'/>\
</svg>");
}

/* En cas d’icônes SVG inline qui se font “vider” par le thème */
.fc-card .fc-thumb svg,
.fc-card .fc-thumb svg *{
  fill: currentColor !important;
}

/* .fc-thumb doit pouvoir accueillir un overlay */
.fc-thumb { position: relative; }

/* Le badge rond en bas à gauche */
.fc-badge-opened{
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.fc-badge-opened svg{ display:block; fill:#fff; }

/* Ne pas forcer 100% / block sur les checkbox */
.fc-modal .fc-field input[type="checkbox"]{
  width: auto;
  height: auto;
  display: inline-block;
  margin: 0 8px 0 0;
  position: static;   /* au cas où */
  box-shadow: none;   /* si tu stylises les inputs */
}

/* Label inline propre pour la case à cocher */
.fc-modal .fc-field.fc-inline{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Optionnel: espace avant la ligne checkbox */
.fc-modal .fc-row + .fc-row { margin-top: 12px; }

/* Étoile favori : coin haut-droite au-dessus de tout */
.fc-fav-btn{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border:0; border-radius:9999px;
  background: rgba(0,0,0,.55);
  cursor:pointer;
  z-index: 40; /* <- au-dessus des +/-, edit, delete */
}
.fc-fav-btn::before{
  content:"☆"; font-size:16px; line-height:28px; display:block; text-align:center; color:#fff;
}
.fc-fav-btn.is-on{ background:rgba(255,195,0,.95); }
.fc-fav-btn.is-on::before{ content:"★"; color:#000; }

/* Décale le groupe + / – un peu plus bas pour ne pas chevaucher l’étoile */
.fc-thumb-actions{
  position:absolute;
  right:8px;
  top: 44px; /* <- avant c’était 8px : on le descend sous l’étoile */
  display:flex;
  align-items:center;
  gap:8px;
  z-index: 19;
}

.fc-dialog-inline[hidden] { display:none; }

.fc-dialog-box {
  width: min(520px, calc(100% - 32px));
  margin: 40px auto;   /* centré dans la page */
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:16px;
  position:relative;
}

.fc-dialog-close {
  position:absolute; top:8px; right:8px;
  border:0; background:transparent; cursor:pointer;
  font-size:20px;
}

.fc-fav-btn{
  position:absolute; right:8px; top:8px;
  width:28px; height:28px; border:none; border-radius:50%;
  background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.18); cursor:pointer;
}
.fc-fav-btn::before{
  content:"☆"; font-size:18px; line-height:28px; display:block; text-align:center;
}
.fc-fav-btn.is-on::before{ content:"★"; }

.select2-container .select2-selection--single {
  height: 38px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  padding-left: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}