/* Paid travel: focused additions, keeping the existing product language intact. */
.turnus-travel-grid,
.day-travel-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tt-space-3);
}

.turnus-travel-grid label {
  display: grid;
  gap: var(--tt-space-1);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
  font-weight: 760;
}

.turnus-travel-grid input {
  width: 100%;
  min-width: 0;
}

.turnus-travel-events {
  display: grid;
  gap: var(--tt-space-2);
  margin: var(--tt-space-3) 0;
}

.turnus-travel-events button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--tt-space-2);
  align-items: center;
  min-height: 48px;
  padding: var(--tt-space-2) var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-elevated);
  color: var(--tt-text-primary);
  text-align: left;
}

.turnus-travel-events span,
.turnus-travel-events strong,
.turnus-travel-events small {
  display: block;
  min-width: 0;
}

.turnus-travel-events small {
  margin-top: 2px;
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
}

.turnus-travel-events b {
  color: var(--tt-success);
  font-size: var(--tt-type-body);
}

.legacy-mileage-help {
  padding: var(--tt-space-2) var(--tt-space-3);
  border-left: 3px solid var(--tt-warning);
  background: var(--tt-warning-soft);
}

.day-travel-detail {
  margin: var(--tt-space-3) 0;
  padding: var(--tt-space-3);
  border: var(--tt-border-width) solid color-mix(in srgb, #8058c7 28%, var(--tt-border));
  border-radius: var(--tt-radius-md);
  background: color-mix(in srgb, var(--tt-state-road) 8%, var(--tt-surface));
}

.day-travel-direction {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tt-space-3);
  margin-bottom: var(--tt-space-3);
}

.day-travel-direction span {
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
  font-weight: 780;
  text-transform: uppercase;
}

.day-travel-direction strong {
  color: color-mix(in srgb, var(--tt-state-road) 66%, white);
  font-size: var(--tt-type-body);
}

.day-travel-inputs .form-field {
  min-width: 0;
  margin: 0;
}

.input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-elevated);
}

.input-with-unit input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
}

.input-with-unit small {
  padding-right: var(--tt-space-2);
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
  font-weight: 760;
}

.day-travel-breakdown,
.turnus-earnings-breakdown {
  display: grid;
  gap: var(--tt-space-2);
  margin-top: var(--tt-space-3);
  padding-top: var(--tt-space-3);
  border-top: var(--tt-border-width) solid var(--tt-border);
}

.day-travel-breakdown > div,
.turnus-earnings-breakdown > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--tt-space-3);
}

.day-travel-breakdown span,
.turnus-earnings-breakdown span,
.turnus-earnings-breakdown small {
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
}

.turnus-earnings-breakdown small {
  flex-basis: 100%;
  text-align: right;
}

.day-travel-breakdown .total,
.turnus-earnings-breakdown .total {
  padding-top: var(--tt-space-2);
  border-top: var(--tt-border-width) solid var(--tt-border-soft);
}

.day-travel-breakdown .total strong,
.turnus-earnings-breakdown .total strong {
  color: var(--tt-success);
}

.finance-day-cell {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 3px;
}

.finance-day-cell .finance-day {
  width: 100%;
}

.finance-travel-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px;
  align-items: center;
  min-width: 0;
  min-height: 21px;
  padding: 2px 3px;
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-state-road) 42%, var(--tt-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--tt-state-road) 16%, var(--tt-surface));
  color: color-mix(in srgb, var(--tt-state-road) 58%, white);
  font-size: 6px;
  line-height: 1;
}

.finance-travel-item span,
.finance-travel-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-travel-item strong {
  text-align: right;
}

.finance-travel-item.selected {
  border-color: var(--tt-action);
  background: var(--tt-action);
  color: var(--tt-text-on-action);
}

.finance-travel-item.already-invoiced,
.finance-travel-item.already-invoiced:disabled {
  border-color: color-mix(in srgb, var(--tt-success) 38%, var(--tt-border));
  background: var(--tt-success-soft);
  color: var(--tt-success);
}

.finance-travel-item.not-worked-yet,
.finance-travel-item.not-worked-yet:disabled {
  border-color: var(--tt-border);
  background: color-mix(in srgb, var(--tt-surface) 72%, var(--tt-border-soft));
  color: var(--tt-text-muted);
}

.finance-travel-item:disabled {
  opacity: 1;
}

.finance-calendar-legend i.paid-travel {
  border-color: color-mix(in srgb, var(--tt-state-road) 42%, var(--tt-border));
  background: color-mix(in srgb, var(--tt-state-road) 16%, var(--tt-surface));
}

.finance-travel-help,
.finance-travel-breakdown {
  color: var(--tt-text-muted);
  font-size: var(--tt-type-micro);
}

.finance-travel-help {
  margin: var(--tt-space-2) 0 0;
}

.stats-year-earnings-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-1) var(--tt-space-4);
  margin-top: var(--tt-space-2);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
}

@media (max-width: 390px) {
  .turnus-travel-grid,
  .day-travel-inputs {
    grid-template-columns: 1fr;
  }

  .finance-travel-item {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .finance-travel-item strong {
    text-align: center;
  }
}