/* style.css — LED bars full-cell + responsive grid + jurnal */

.tgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 1fr));
  gap: 10px;
}
@media (max-width: 576px){
  .tgrid{ grid-template-columns: repeat(4, 1fr); }
}

.cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid #222;
  background: #000;
  border-radius: 10px;
  outline: none;
  box-shadow: inset 0 0 14px rgba(0,0,0,.8);
}
.cell:disabled { cursor: default; }

/* LED segments */
.seg {
  position:absolute;
  background:#0df07a;
  opacity:.10;
  transition: opacity .12s ease, filter .12s ease;
  filter: drop-shadow(0 0 2px rgba(13,240,122,.5));
  border-radius: 4px;
}

/* Geometrie 7 seg (a..g) — ocupa celula */
.seg-a { top:8%; left:18%; right:18%; height:8px; }
.seg-b { top:16%; right:8%; width:8px; height:28%; }
.seg-c { bottom:16%; right:8%; width:8px; height:28%; }
.seg-d { bottom:8%; left:18%; right:18%; height:8px; }
.seg-e { bottom:16%; left:8%; width:8px; height:28%; }
.seg-f { top:16%; left:8%; width:8px; height:28%; }
.seg-g { top:calc(50% - 4px); left:18%; right:18%; height:8px; }

.seg.on {
  opacity:1;
  filter: drop-shadow(0 0 6px rgba(13,240,122,.85));
}

/* spatial: punct luminos (aprindem toate segmentele) */
.cell.active .seg { opacity:.9; }

/* selectie utilizator */
.cell.marked { box-shadow: inset 0 0 0 3px rgba(13,240,122,.7); }

/* jurnal */
.log {
  min-height: 180px;
  max-height: 280px;
  overflow:auto;
  background:#f8f9fa;
  border:1px solid #eee;
  padding:.5rem;
}