.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 {

    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);
    }


    .act-show-content {
      display: grid;
      grid-template-columns: 1.3fr 2fr;
      gap: 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;
        }
      }
    }
  }

  .ride-status-indicator {
    display: inline-block;
    aspect-ratio: 1;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    /* margin-inline-end: var(--inline-space); */

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

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

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

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

  .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);
        color: var(--color-text-dark);
      }

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

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

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

#filter-panel {

  .filter-active-indicator,
  .filter-active-only {
    display: none;
  }

  &.filter-active {
    --left-color-size: 0.5em;
    background-color: var(--panel-bg);
    background-image: linear-gradient(to right, var(--primary-color) var(--left-color-size), transparent 0);


    .filter-active-indicator,
    .filter-active-only {
      display: revert;
    }
  }
}

.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);
  }
}