/* The parts every decision dialog shares, keyed on the lte-decision-dialog class each such MudDialog carries:
   an intro, a panel of label/value rows with an optional divider, option cards with a chevron (the first may be
   highlighted with mod-primary), and a footnote. Light values are the design's; the dark ones come from the
   .mod-skin-dark overrides. Global rather than scoped, because the Live Time Entry and TimeBoard dialogs live in
   different folders and a scoped stylesheet reaches only its own component. */
.lte-decision-dialog .lte-dialog-intro {
  color: #666666;
}

.lte-decision-dialog .lte-dialog-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 4px;
  background-color: #F7F9FC;
}

.lte-decision-dialog .lte-dialog-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lte-decision-dialog .lte-dialog-row.lte-dialog-after-row {
  align-items: center;
}

.lte-decision-dialog .lte-dialog-label {
  flex: 0 0 168px;
  color: #666666;
}

.lte-decision-dialog .lte-dialog-value {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lte-decision-dialog .lte-dialog-inline {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
}

.lte-decision-dialog .lte-dialog-divider {
  height: 1px;
  background-color: #E0E0E0;
}

.lte-decision-dialog .lte-dialog-strong {
  font-weight: 500;
  color: #212121;
  font-variant-numeric: tabular-nums;
}

.lte-decision-dialog .lte-dialog-muted {
  color: #666666;
  font-variant-numeric: tabular-nums;
}

.lte-decision-dialog .lte-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each option is a whole bordered card: a label over a sentence, left-aligned and wrapping, with a chevron
   at the right edge. */
.lte-decision-dialog .lte-option {
  justify-content: space-between;
  gap: 14px;
  padding: 13px 12px 13px 16px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background-color: #FFFFFF;
  text-align: left;
  text-transform: none;
}

.lte-decision-dialog .lte-option:hover,
.lte-decision-dialog .lte-option.mod-primary {
  border-color: var(--mud-palette-primary);
  background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, #FFFFFF);
}

.lte-decision-dialog .lte-option-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
}

.lte-decision-dialog .lte-option-title {
  display: block;
  font-weight: 500;
  color: #212121;
}

.lte-decision-dialog .lte-option-text {
  display: block;
  color: #666666;
}

.lte-decision-dialog .lte-option-chevron {
  flex: 0 0 auto;
  color: #9E9E9E;
}

.lte-decision-dialog .lte-dialog-footnote {
  color: #9E9E9E;
}

.mod-skin-dark .lte-decision-dialog .lte-dialog-intro,
.mod-skin-dark .lte-decision-dialog .lte-dialog-label,
.mod-skin-dark .lte-decision-dialog .lte-dialog-muted,
.mod-skin-dark .lte-decision-dialog .lte-option-text {
  color: #9AA0AB;
}

.mod-skin-dark .lte-decision-dialog .lte-dialog-panel {
  background-color: #262626;
}

.mod-skin-dark .lte-decision-dialog .lte-dialog-divider {
  background-color: #3A3A3A;
}

.mod-skin-dark .lte-decision-dialog .lte-dialog-strong,
.mod-skin-dark .lte-decision-dialog .lte-option-title {
  color: #BDBDBD;
}

.mod-skin-dark .lte-decision-dialog .lte-option {
  border-color: #3A3A3A;
  background-color: #1E1E1E;
}

.mod-skin-dark .lte-decision-dialog .lte-option:hover,
.mod-skin-dark .lte-decision-dialog .lte-option.mod-primary {
  border-color: var(--mud-palette-primary);
  background-color: #262626;
}

.mod-skin-dark .lte-decision-dialog .lte-dialog-footnote {
  color: #6E6E6E;
}

@media (max-width: 600px) {
  .lte-decision-dialog .lte-dialog-row {
    flex-direction: column;
    gap: 2px;
  }

  .lte-decision-dialog .lte-dialog-label {
    flex-basis: auto;
  }
}