/* ─────────────────────────────────────────
   CATALOGUE — barre d'outils (recherche + tri)
───────────────────────────────────────── */
.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.catalog-toolbar .input {
  flex: 1 1 12rem;
  min-width: 0;
}
.catalog-toolbar .buttons {
  margin-bottom: 0;
  flex-shrink: 0;
}
.catalog-toolbar .buttons .button {
  margin-bottom: 0;
}
.catalog-toolbar .sort-arrow {
  margin-left: 0.35em;
  font-weight: bold;
}

/* ─────────────────────────────────────────
   TOAST (notification growl bas-droite)
───────────────────────────────────────── */
.toast-notification {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  max-width: 22rem;
  padding: 0.85rem 1.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  animation: toast-in 0.25s ease-out;
}
.toast-notification.is-leaving {
  animation: toast-out 0.3s ease-in forwards;
}
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(20px); opacity: 0; }
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer {
  padding: 1.5rem 1rem;
  margin-top: 2rem;
}
#footer-logout-link,
#btn-save-anon {
  cursor: pointer;
  text-decoration: underline;
}

/* Récap bonus / contre-pied à côté du statut de la grille */
#grid-markers {
  display: inline-flex;
  gap: 0.3rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.grid-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #c4c4c4;
  font-size: 0.72rem;
  cursor: help;
  transition: background 0.15s, color 0.15s;
}
#marker-bonus.is-used {
  background: #ffc107;
  color: #fff;
}
#marker-counter.is-used {
  background: #485fc7;
  color: #fff;
}

/* ─────────────────────────────────────────
   GRILLE BINGO
───────────────────────────────────────── */
.bingo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.grid-cell {
  min-height: 80px;
  border: 2px dashed #dbdbdb;
  border-radius: 6px;
  padding: 0.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.3;
  transition: border-color 0.15s, background 0.15s;
}

.grid-cell--empty {
  color: #bbb;
  cursor: default;
}

.grid-cell--empty::after {
  content: '+';
  font-size: 1.5rem;
  color: #ddd;
}

.grid-cell--empty.drag-over {
  border-color: #485fc7;
  background: #f0f3ff;
}

.grid-cell--filled {
  border-style: solid;
  border-color: #dbdbdb;
  cursor: grab;
}

.grid-cell--filled:active {
  cursor: grabbing;
}

.grid-cell--realized {
  border-color: #48c78e;
  background: #effaf5;
}

.grid-cell__check {
  display: none;
  position: absolute;
  top: 4px;
  left: 6px;
  color: #48c78e;
  font-size: 0.85rem;
  font-weight: 700;
}

.grid-cell--realized .grid-cell__check {
  display: block;
}

.grid-cell__details {
  position: absolute;
  top: 4px;
  right: 22px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 0.78rem;
  color: #b5b5b5;
  cursor: pointer;
}
.grid-cell__details:hover {
  color: #485fc7;
}
body.mode-readonly .grid-cell__details {
  right: 5px;  /* pas de bouton remove à côté en lecture seule */
}

.grid-cell__prob-dot {
  position: absolute;
  bottom: 5px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dbdbdb;
}
.grid-cell__prob-dot.prob-low  { background: #312e81; }
.grid-cell__prob-dot.prob-mid  { background: #818cf8; }
.grid-cell__prob-dot.prob-high { background: #06b6d4; }

.grid-cell__remove {
  position: absolute;
  top: 2px;
  right: 5px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  color: #ccc;
  cursor: pointer;
}

.grid-cell__remove:hover {
  color: #f14668;
}

/* Masqué en mode lecture seule */
body.mode-readonly .grid-cell__remove {
  display: none;
}

/* Bouton bonus (étoile, bas-gauche) */
.grid-cell__bonus {
  position: absolute;
  bottom: 4px;
  left: 6px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
  color: #d8d8d8;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.grid-cell__bonus:hover:not(:disabled) {
  color: #ffc107;
  transform: scale(1.15);
}
.grid-cell__bonus.is-active {
  color: #ffc107;
  text-shadow: 0 0 4px rgba(255, 193, 7, 0.55);
}
.grid-cell__bonus:disabled {
  cursor: default;
}
body.mode-readonly .grid-cell__bonus {
  display: none;
}
body.mode-readonly .grid-cell--bonus .grid-cell__bonus {
  /* En lecture seule, l'étoile reste visible si elle est active */
  display: block;
  color: #ffc107;
}

/* Mise en valeur de la case bonus */
.grid-cell--bonus {
  border-color: #ffc107;
  box-shadow: 0 0 0 1px #ffc107 inset;
}
.grid-cell--bonus.grid-cell--realized {
  border-color: #ffb300;
  box-shadow: 0 0 0 1px #ffb300 inset;
  background: linear-gradient(135deg, #effaf5 0%, #fff8e1 100%);
}

/* Bouton contre-pied (flèche retour, à droite du bouton bonus) */
.grid-cell__counter {
  position: absolute;
  bottom: 4px;
  left: 22px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 0.78rem;
  color: #d8d8d8;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.grid-cell__counter:hover:not(:disabled) {
  color: #485fc7;
  transform: scale(1.15);
}
.grid-cell__counter.is-active {
  color: #485fc7;
  text-shadow: 0 0 4px rgba(72, 95, 199, 0.45);
}
.grid-cell__counter:disabled {
  cursor: default;
}
body.mode-readonly .grid-cell__counter {
  display: none;
}
body.mode-readonly .grid-cell--counter .grid-cell__counter {
  display: block;
  color: #485fc7;
}

/* Mise en valeur de la case contre-pied */
.grid-cell--counter {
  border-color: #485fc7;
  box-shadow: 0 0 0 1px #485fc7 inset;
}
/* Si l'event contre-pied se réalise quand même, retour visuel "raté" : */
.grid-cell--counter.grid-cell--realized {
  border-color: #b5b5b5;
  box-shadow: none;
  background: #f5f5f5;
}

/* ─────────────────────────────────────────
   BONUS DE LIGNE — case appartenant à une
   ligne (rangée ou colonne) entièrement
   réalisée
───────────────────────────────────────── */
.grid-cell--in-line {
  background: linear-gradient(135deg, #effaf5 0%, #d4f4e3 100%);
  box-shadow: 0 0 0 2px #ffc107 inset;
  position: relative;
}
.grid-cell--in-line::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 193, 7, 0.18) 50%, transparent 100%);
}
/* Le bonus l'emporte visuellement sur les autres marqueurs */
.grid-cell--in-line.grid-cell--bonus,
.grid-cell--in-line.grid-cell--counter {
  border-color: #ffc107;
}

/* ─────────────────────────────────────────
   CATALOGUE
───────────────────────────────────────── */
.catalog-list {
  max-height: 62vh;
  overflow-y: auto;
}

.catalog-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.catalog-item__text {
  flex: 1;
  min-width: 0;
}
.catalog-item__title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
}
.catalog-item__description {
  font-size: 0.78rem;
  color: #7a7a7a;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.catalog-item__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.catalog-item__prob {
  font-size: 0.72rem;
  min-width: 38px;
  text-align: center;
}

/* ─────────────────────────────────────────
   MODALE LARGE (merge)
───────────────────────────────────────── */
.modal-card.is-wide {
  width: 760px;
  max-width: 95vw;
}

.merge-preview__list {
  max-height: 180px;
  overflow-y: auto;
  font-size: 0.82rem;
}

.merge-preview__list li {
  padding: 0.2rem 0;
  border-bottom: 1px solid #f5f5f5;
  list-style: none;
}

/* ─────────────────────────────────────────
   MODES CONTEXTUELS
───────────────────────────────────────── */
body.mode-readonly #col-catalog,
body.mode-readonly #grid-actions {
  display: none;
}

/* Lecture seule : la colonne grille occupe toute la largeur */
body.mode-readonly #col-grid {
  flex: none;
  width: 100%;
  max-width: 100%;
}

/* ─────────────────────────────────────────
   ADMIN
───────────────────────────────────────── */
#events-list td {
  vertical-align: middle;
}

.tag.prob-low    { background: #312e81; color: #fff; }
.tag.prob-mid    { background: #818cf8; color: #fff; }
.tag.prob-high   { background: #06b6d4; color: #fff; }

/* ─────────────────────────────────────────
   DIVERS
───────────────────────────────────────── */
.navbar .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.navbar .brand strong {
  font-size: 1rem;
}
.navbar-logo {
  display: inline-flex;
  align-items: center;
  color: inherit;     /* pour currentColor du SVG */
}
.navbar-logo svg {
  height: 28px;
  width: auto;
  display: block;
}

#score-display .tag.score-tag {
  font-size: 1rem;
  background: #fff;
  color: #2c3e50;
  border: 1px solid #e2e2e2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#score-display .tag.score-tag strong {
  color: #1a202c;
}

.section.is-slim {
  padding-top: 1rem;
  padding-bottom: 1rem;
}