.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:
      "email note"
      "rider note"
      "shows shows";
  }

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

  .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 actions"
    ;

      .times {
        grid-area: times;
        .timestamp.show-time{
          font-size: var(--font-size-l);
        }
      }
      .location-value {
        font-size: var(--font-size-l);
        display: flex;
        align-items: center;
        gap: 0.5em;
        a{
          text-decoration: none;
        }
        margin-bottom: var(--inline-space);
      }
      .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{
    .button{
      margin: 0.3em;
      padding: 0.35em;
      font-size: var(--font-size-xxs);
      font-style: lowercase;

      &.pending {
        background-color: var(--color-red);
      }
      &.requested {
        background-color: var(--color-yellow);
        color: var(--color-text-dark);
      }
      &.received {
        background-color: var(--color-orange);
        color: var(--color-text-dark);
      }
      &.confirmed {
        background-color: var(--color-green);
      }
    }
  }
}

.recent-acts ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;

  a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--block-space);
    align-items: center;
    text-decoration: none;
  }

  .recent-act {
    font-family: monospace;
    text-transform: uppercase;
  }

  .state label {
    font-size: var(--font-size-xs);
    text-transform: lowercase;
    color: var(--color-text-dark);
    background: var(--color-text-light);
    opacity: 0.5;
    padding: 3px;
    border-radius: 99px;
  }
}