/* ============================================================
   SHARED CONTAINER GRID
   Used by: public site (index.html) + admin (conteneurs.html)

   Base class: .container-grid  (6×2 slot grid)
   Groups are rendered as single elements spanning grid cells.
   ============================================================ */

/* ── Slot Grid (shared 6×2 layout) ─────────────────────────── */

.container-grid {
  --slot-w: 52px;
  --slot-h: 52px;
  --gap: 5px;
  display: grid;
  grid-template-columns: repeat(6, var(--slot-w));
  grid-template-rows: repeat(2, var(--slot-h));
  gap: var(--gap);
  width: max-content;
  flex-shrink: 0;
}

/* ── Mobile: shrink slots to fit screen ──────────────────────── */
@media (max-width: 768px) {
  .container-grid {
    --slot-w: 36px;
    --slot-h: 36px;
    --gap: 4px;
  }
  .container-grid .slot .slot-initials { font-size: 11px; }
  .container-grid .slot .slot-model    { font-size: 7px; margin-top: 2px; }
}

@media (max-width: 400px) {
  .container-grid {
    --slot-w: 28px;
    --slot-h: 28px;
    --gap: 3px;
  }
  .container-grid .slot .slot-initials { font-size: 9px; }
  .container-grid .slot .slot-model    { display: none; }
}

.container-grid .slot {
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  position: relative;
  min-width: 0;
  min-height: 0;
  cursor: default;
  user-select: none;
}

/* ── Empty slot ───────────────────────────────────────────── */

.container-grid .slot.empty {
  background: #24221e;
  border: 1px solid #322f2a;
  color: #4a4640;
}

/* ── Reserved slot (group block) ──────────────────────────── */

.container-grid .slot.reserved {
  background: linear-gradient(to bottom, var(--slot-color-top, rgba(232,150,10,0.6)), var(--slot-color-bot, rgba(232,150,10,0.25)));
  color: #f0ede8;
  border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.container-grid .slot.reserved.internal {
  color: #f0ede8;
}

.container-grid .slot.delivered {
  background: linear-gradient(to bottom, rgba(46,204,113,0.4), rgba(46,204,113,0.15));
  color: #2ecc71;
}

/* ── Slot label (centered inside block) ──────────────────── */

.container-grid .slot .slot-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
}

.container-grid .slot .slot-initials {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.container-grid .slot .slot-model {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.7;
  line-height: 1;
  margin-top: 3px;
}

/* ── Admin variant ────────────────────────────────────────── */

.container-grid--admin {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  max-width: 300px;
  width: 100%;
  aspect-ratio: 7 / 2.4;
}

.container-grid--admin .slot {
  width: auto;
  height: auto;
}

.container-grid--admin .slot .slot-initials { font-size: 11px; }
.container-grid--admin .slot .slot-model { font-size: 8px; }

/* ── L-shape fuse (vertical connection between row segments) ── */

.container-grid .slot.fuse-bottom { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.container-grid .slot.fuse-top   { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }

.container-grid .slot.fuse-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--gap) * -1);
  width: var(--fuse-w, 100%);
  height: var(--gap);
  background: linear-gradient(to bottom, var(--slot-color-top, rgba(232,150,10,0.6)), var(--slot-color-bot, rgba(232,150,10,0.25)));
  background-size: 100% calc(var(--slot-h) * 2 + var(--gap));
  background-position: 0 calc(var(--slot-h) * -1);
  z-index: 2;
}
.container-grid .slot.internal.fuse-bottom::before {
  background: var(--slot-color-mid, rgba(232,150,10,0.4));
}

/* ── Inner separator lines (between slots in a group) ─────── */

.container-grid .slot.reserved .slot-sep-v,
.container-grid .slot.reserved .slot-sep-h {
  position: absolute;
  background: rgba(255,255,255,0.1);
  z-index: 3;
  pointer-events: none;
}

.container-grid .slot.reserved .slot-sep-v {
  width: 1px;
  top: 4px;
  bottom: 4px;
}

.container-grid .slot.reserved .slot-sep-h {
  height: 1px;
  left: 4px;
  right: 4px;
}

/* ── Hover highlight (disabled) ───────────────────────────── */

/* ── Progress Bar ─────────────────────────────────────────── */

.nq-progress {
  height: 8px;
  background: var(--nqg-progress-track, #1a1816);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.nq-progress-fill {
  height: 100%;
  background: var(--nqg-progress-color, #e8960a);
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px rgba(232,150,10,0.3);
}

/* ── Status Badges ────────────────────────────────────────── */

.nq-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nq-badge--open    { background: rgba(232,150,10,0.12); color: #e8960a; }
.nq-badge--fab     { background: rgba(52,152,219,0.12); color: #3498db; }
.nq-badge--voyage  { background: rgba(155,89,182,0.12); color: #9b59b6; }
.nq-badge--livre   { background: rgba(46,204,113,0.12); color: #2ecc71; }
.nq-badge--annule  { background: rgba(231,76,60,0.12);  color: #e74c3c; }

.nq-badge--pulse {
  animation: nqg-pulse 2s ease-in-out infinite;
}
@keyframes nqg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,150,10,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(232,150,10,0); }
}