/* RSVPro · Timeline v2 — redesign visual sobre a estrutura existente do app.js
   Sobrepõe app.css com o design do mockup interno.
*/

/* ── Variáveis ───────────────────────────────────────────────────────── */
:root {
  --tlv2-green:   #0b5b30;
  --tlv2-green2:  #18a24a;
  --tlv2-line:    #dce9de;
  --tlv2-soft:    #f7fbf7;
  --tlv2-text:    #173523;
  --tlv2-muted:   #65766a;
  --tlv2-today:   rgba(24,162,74,.09);
  --tlv2-future:  rgba(91,168,211,.06);
  --tlv2-low:     #18a24a;
  --tlv2-med:     #f3b300;
  --tlv2-high:    #e62f36;
  --tlv2-label-w: 200px;
  --tlv2-cell-w:  54px;
}

/* ── Secção principal ────────────────────────────────────────────────── */
section.rsv-timeline-pro {
  margin-top: 20px !important;
  padding: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid var(--tlv2-line) !important;
  box-shadow: 0 14px 40px rgba(5,57,31,.07) !important;
  overflow: hidden !important;
}

/* Cabeçalho da secção */
.rsv-timeline-pro-head {
  padding: 20px 26px 16px !important;
  background: var(--tlv2-green) !important;
  margin-bottom: 0 !important;
}
.rsv-timeline-pro-head h2 {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  margin: 0 0 3px !important;
  letter-spacing: -.01em !important;
}
.rsv-timeline-pro-head p {
  color: rgba(255,255,255,.7) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.rsv-timeline-toolbar {
  padding: 16px 24px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--tlv2-line) !important;
  background: #fff !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.rsv-timeline-tabs {
  display: inline-flex !important;
  gap: 2px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
}

.rsv-timeline-tabs button {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tlv2-muted) !important;
  padding: 9px 18px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: color .15s, border-color .15s, background .15s !important;
  white-space: nowrap !important;
}
.rsv-timeline-tabs button:hover {
  color: var(--tlv2-text) !important;
  background: var(--tlv2-soft) !important;
}
.rsv-timeline-tabs button.active {
  color: var(--tlv2-green) !important;
  font-weight: 800 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: var(--tlv2-green) !important;
}

/* Hint */
.rsv-timeline-hint {
  font-size: .68rem !important;
  color: var(--tlv2-muted) !important;
  font-weight: 400 !important;
  padding-bottom: 8px !important;
}

/* ── Legenda ─────────────────────────────────────────────────────────── */
.rsv-timeline-legend {
  display: flex !important;
  align-items: center !important;
  gap: 10px 18px !important;
  flex-wrap: wrap !important;
  border: none !important;
  border-bottom: 1px solid var(--tlv2-line) !important;
  border-radius: 0 !important;
  padding: 10px 24px !important;
  margin-bottom: 0 !important;
  background: var(--tlv2-soft) !important;
  font-size: .67rem !important;
  color: var(--tlv2-muted) !important;
  font-weight: 600 !important;
}
.rsv-timeline-legend b {
  color: var(--tlv2-text) !important;
  font-size: .69rem !important;
}
.rsv-timeline-legend i {
  width: 24px !important;
  height: 7px !important;
  border-radius: 4px !important;
  margin-right: 4px !important;
}
.rsv-timeline-legend .lg-baixo    { background: var(--tlv2-low) !important; }
.rsv-timeline-legend .lg-moderado { background: var(--tlv2-med) !important; }
.rsv-timeline-legend .lg-elevado  { background: var(--tlv2-high) !important; }
.rsv-timeline-legend .lg-condicao { background: #5fa8d3 !important; }
.rsv-timeline-legend .lg-evento   { background: #f9c74f !important; }
.rsv-timeline-legend .lg-critico  { background: #f3722c !important; }
.rsv-timeline-legend .lg-susc     { background: var(--tlv2-high) !important; }
.rsv-timeline-legend .lg-naosusc  { background: var(--tlv2-low) !important; }

/* ── Grid de scroll ──────────────────────────────────────────────────── */
.rsv-timeline-scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
}

.rsv-timeline-grid {
  min-width: max-content !important;
}

/* ── Linhas ──────────────────────────────────────────────────────────── */
.rsv-row {
  display: grid !important;
  grid-template-columns: var(--tlv2-label-w) repeat(var(--tl-days), var(--tlv2-cell-w)) !important;
  border-bottom: 1px solid #eef5f0 !important;
}
.rsv-row:last-child { border-bottom: none !important; }

/* Zebra suave */
.rsv-row:nth-child(even):not(.rsv-climate-day-header) {
  background: rgba(247,251,247,.55) !important;
}

/* Cabeçalho de datas */
.rsv-row.rsv-climate-day-header {
  background: var(--tlv2-soft) !important;
  border-bottom: 1.5px solid var(--tlv2-line) !important;
}

/* Label (coluna fixa) */
.rsv-row-label {
  position: sticky !important;
  left: 0 !important;
  z-index: 3 !important;
  background: inherit !important;
  border-right: 1.5px solid var(--tlv2-line) !important;
  padding: 7px 12px !important;
  color: var(--tlv2-text) !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.rsv-row-label.section {
  font-size: .65rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  background: var(--tlv2-soft) !important;
  color: var(--tlv2-green) !important;
  border-right-color: var(--tlv2-line) !important;
}

/* Subrow labels */
.rsv-subrow .rsv-row-label {
  font-weight: 500 !important;
  color: var(--tlv2-muted) !important;
  font-size: .71rem !important;
  padding-left: 20px !important;
}
.rsv-subrow .rsv-row-label::before {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important;
  height: 12px !important;
  background: var(--tlv2-line) !important;
  border-radius: 2px !important;
  margin-right: 7px !important;
  flex-shrink: 0 !important;
}

/* ── Células ─────────────────────────────────────────────────────────── */
.rsv-cell {
  min-height: 34px !important;
  border-right: 1px solid #f0f7f0 !important;
  padding: 4px 2px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: background .1s !important;
}
.rsv-cell:last-child { border-right: none !important; }

/* Hover coluna */
.rsv-cell.rsv-col-hover {
  background: rgba(24,162,74,.04) !important;
}

/* Hoje */
.rsv-cell.today {
  background: var(--tlv2-today) !important;
  box-shadow: inset 2px 0 0 var(--tlv2-green2), inset -2px 0 0 var(--tlv2-green2) !important;
}

/* Previsão */
.rsv-cell.future {
  background: var(--tlv2-future) !important;
}

/* Cabeçalho de dia */
.rsv-day-head {
  min-height: 44px !important;
  flex-direction: column !important;
  gap: 1px !important;
  color: var(--tlv2-text) !important;
  font-weight: 700 !important;
  font-size: .7rem !important;
}
.rsv-day-head b {
  font-size: .72rem !important;
  line-height: 1 !important;
}
.rsv-day-head span {
  font-size: .6rem !important;
  color: var(--tlv2-muted) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}
.rsv-day-head.today b {
  color: var(--tlv2-green) !important;
}

/* ── Pills de risco ──────────────────────────────────────────────────── */
.rsv-pill {
  display: inline-block !important;
  width: 30px !important;
  height: 9px !important;
  border-radius: 5px !important;
  background: #e8f0ea !important;
  border: none !important;
}
.rsv-pill.baixo    { background: var(--tlv2-low) !important;  }
.rsv-pill.moderado { background: var(--tlv2-med) !important;  }
.rsv-pill.elevado  { background: var(--tlv2-high) !important; }
.rsv-pill.condicao { background: #5fa8d3 !important; }
.rsv-pill.evento   { background: #f9c74f !important; }
.rsv-pill.critico  { background: #f3722c !important; }

/* ── Linhas principais doenças — separador visual ────────────────────── */
.tl-main-row {
  border-top: 2px solid var(--tlv2-soft) !important;
}
.tl-main-row .rsv-row-label {
  font-weight: 800 !important;
  font-size: .78rem !important;
  color: var(--tlv2-text) !important;
}

/* ── Bloco Traça da uva (secção detalhe) ─────────────────────────────── */
.tl-detail-lobesia {
  border-top: 2px solid var(--tlv2-soft) !important;
  border-bottom: 1px solid var(--tlv2-line) !important;
}

/* ── Gráfico climático ────────────────────────────────────────────────── */
.rsv-chart-legend,
.rsv-chart-legend h3 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ── Ecrãs pequenos ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --tlv2-label-w: 140px;
    --tlv2-cell-w:  48px;
  }
  .rsv-timeline-tabs button {
    padding: 8px 10px !important;
    font-size: .72rem !important;
  }
  .rsv-timeline-pro-head {
    padding: 16px 16px 14px !important;
  }
}