/* Text visibility and responsive input hotfixes */
[id*="retention"] input:not([type="checkbox"]):not([type="radio"]),
[id*="retention"] textarea,
[id*="retention"] select,
[id*="renewal"] input:not([type="checkbox"]):not([type="radio"]),
[id*="renewal"] textarea,
[id*="renewal"] select,
[id*="checklist"] input:not([type="checkbox"]):not([type="radio"]),
[id*="checklist"] textarea,
[id*="checklist"] select,
input[id^="sub-val-"],
input[id*="sub-val-"],
.form-input {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  background-color: #ffffff !important;
}

input[id^="sub-val-"]:focus,
input[id*="sub-val-"]:focus,
.form-input:focus {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  background-color: #ffffff !important;
}

input[id^="sub-val-"]::placeholder,
input[id*="sub-val-"]::placeholder,
.form-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

#timeline-container input[id^="sub-val-"] {
  min-width: 120px;
  width: 100%;
  flex: 1 1 140px;
}

#timeline-container input[id^="sub-check-"] {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  #timeline-container div[id^="task-"] ~ * {
    max-width: 100%;
  }
  #timeline-container .space-y-3 > div.flex.items-center.gap-3 {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}