/* timeline-theme.css — tema della vista Timeline (M10).
   Consumato da js/implementation/timeline-renderer.js: il contratto in
   testa a quel file elenca variabili e classi. Tutti i COLORI derivano
   dai token di tokens.css (--color-tl-bar, --color-tl-bar-done,
   --color-tl-grid, superfici e testi): questo file non introduce
   esadecimali. Per cambiare l'aspetto della timeline si ridefiniscono
   le variabili --tl-* qui sotto, senza toccare JavaScript. */

:root {
  /* Colori (solo derivazioni dai token) */
  --tl-bar-color: var(--color-tl-bar);
  --tl-bar-done: var(--color-tl-bar-done);
  --tl-grid-color: var(--color-tl-grid);
  --tl-bar-done-pattern-color: var(--color-bg-elevated);
  --tl-pattern-opacity: 0.55;
  --tl-bar-text-color: var(--color-on-accent);
  --tl-who-todo-color: var(--color-text-soft);
  --tl-bar-todo-fill: var(--color-bg-elevated);
  --tl-col-label-color: var(--color-text-soft);
  --tl-labels-bg: var(--color-bg-elevated);

  /* Geometria (il renderer legge queste con getComputedStyle) */
  --tl-row-h: 40px;
  --tl-header-h: 34px;
  --tl-col-w: 48px;
  --tl-bar-pad-y: 8px;
  --tl-bar-inset-x: 2px;
  --tl-bar-radius: 6px;
  --tl-label-col-w: 10.5rem;
}

/* Tema scuro: i colori seguono da soli i token ridefiniti in
   [data-theme="dark"] di tokens.css; qui si ritocca solo l'intensità
   del tratteggio "fatto", più invadente su fondo scuro. */
[data-theme="dark"] {
  --tl-pattern-opacity: 0.4;
}

/* Colonne più larghe quando la scala è a settimane (una colonna = 7 giorni).
   Il renderer imposta data-scale e rilegge --tl-col-w dopo l'inserimento. */
.tl-scroll[data-scale="weeks"] {
  --tl-col-w: 88px;
}

/* ---- Contenitore a scroll (mobile: scorre solo la griglia, le
        etichette attività restano sticky a sinistra) ---- */
.tl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-bg-elevated);
}

.tl-inner {
  display: flex;
  width: max-content;
  min-width: 100%;
}

.tl-labels {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 var(--tl-label-col-w);
  width: var(--tl-label-col-w);
  background: var(--tl-labels-bg);
  border-right: 1px solid var(--color-border-strong);
}

.tl-labels-head {
  box-sizing: border-box;
  height: var(--tl-header-h);
  border-bottom: 1px solid var(--tl-grid-color);
}

.tl-label {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--tl-row-h);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--tl-grid-color);
  color: var(--color-text);
  font-size: var(--font-size-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- SVG: griglia, etichette, barre ---- */
.tl-svg {
  display: block;
}

.tl-grid-line {
  stroke: var(--tl-grid-color);
  stroke-width: 1;
}

.tl-col-label {
  fill: var(--tl-col-label-color);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

.tl-bar {
  fill: var(--tl-bar-color);
}

.tl-row-g--da_fare .tl-bar {
  fill: var(--tl-bar-todo-fill);
  stroke: var(--tl-bar-color);
  stroke-width: 1.5;
}

.tl-row-g--fatto .tl-bar {
  fill: var(--tl-bar-done);
}

/* Tratteggio diagonale leggero delle attività fatte (PROMPT-BUILD §8):
   il rettangolo overlay è riempito dal <pattern> SVG, le cui linee
   prendono colore e intensità da queste due variabili. */
.tl-bar-done-overlay {
  pointer-events: none;
}

.tl-pattern-line {
  stroke: var(--tl-bar-done-pattern-color);
  stroke-width: 2;
  stroke-opacity: var(--tl-pattern-opacity);
}

.tl-bar-who {
  fill: var(--tl-bar-text-color);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

.tl-row-g--da_fare .tl-bar-who {
  fill: var(--tl-who-todo-color);
}