.act {
  h2:has(input[type="checkbox"]:checked) {
    color: var(--primary-color);
  }

  .act-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--block-space);
    grid-template-areas:
      "rider note"
      "shows shows";
  }

  .act-riders {
    grid-area: rider;
  }

  .act-note {
    grid-area: note;
  }

  .act-shows {
    grid-area: shows;
  }

  .act-show {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: var(--block-space);

    background-color: var(--panel-bg-secondary);
    padding: var(--block-space) calc(var(--block-space) * 2);
    border-radius: var(--global-radius);

    &:not(:last-of-type) {
      margin-block-end: var(--block-space);
    }

    grid-template-areas: "times material"
    "times material"
    "actions material"
    ;

    .times {
      grid-area: times;
    }

    .material {
      grid-area: material;
    }

    .actions {
      grid-area: actions;
      display: flex;
      gap: calc(var(--block-space) * 0.5);
      justify-content: flex-start;
    }


    .rider-state {
      label {
        margin: auto;
      }
    }

  }

  .status-buttons {
    font-size: var(--font-size-xs);
    --button-size: 1.5em;

    .button {
      margin-inline-end: var(--inline-space);
      font-style: lowercase;

      &.pending {
        background-color: var(--color-red-muted);
      }

      &.requested {
        background-color: var(--color-orange-muted);
        /* color: var(--color-text-dark); */
      }

      &.received {
        background-color: var(--color-yellow-muted);
        /* color: var(--color-text-dark); */
      }

      &.confirmed {
        background-color: var(--color-green-muted);
      }
    }
  }
}

.table--recent-acts {

  .recent-act {
    font-family: var(--font-mono);
    font-weight: 200;
    text-transform: uppercase;
  }

  .state {
    color: var(--color-text-muted);
  }
}

.attached-files {
  &:not(:last-child) {
    margin-block-end: var(--block-space);
  }
}

.rider {
  font-size: var(--font-size-xs);

  &:not(:last-of-type) {
    margin-block-end: var(--inline-space);
  }
}

.rider-filename {
  background-color: var(--panel-bg-secondary);
  min-height: var(--button-size);
  padding-block: 0.2em;
  padding-inline: var(--block-space);
  display: flex;
  align-items: center;
  border-radius: calc(var(--button-size) / 2);
  font-size: 1.2em;

  a {
    text-decoration: none;
    font-family: var(--font-mono);
  }
}