/* Swarms, laid out: the list (swarms/index), and a swarm's page (swarms/show)
   — its visualizer card (the force-directed graph and the History tab) and
   the rota editor, a week of day lanes with members' Items in them, and the
   sidebar beside it: a palette of agents and the members' run order.

   The pieces are the kit's; the graph and the week's drop zones are data
   visualizations shadcn has no component for, drawn in viz-swarms.css. This
   file only places things. */
@layer ui {
  /* The swarms table (swarms/index): its outer columns keep off the card's
     edge. */
  .swarms-table {
    :is(th, td):first-child { padding-inline-start: 1rem; }
    :is(th, td):last-child { padding-inline-end: 1rem; }
  }

  /* ---- The visualizer ---- */

  /* A view in the visualizer card's body (Graph, History). */
  .swarm-visualizer {
    min-inline-size: 0;
  }

  .swarm-graph__player {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 0.5rem;
  }

  .swarm-graph__scrubber {
    flex: 1;
  }

  .swarm-graph__clock {
    inline-size: 6rem;
  }

  .swarm-graph__legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
  }

  .swarm-graph__stage {
    position: relative;
  }

  .swarm-graph__empty {
    inset-block-start: 50%;
    inset-inline: 0;
    position: absolute;
    text-align: center;
    transform: translateY(-50%);
  }

  .swarm-graph__caption {
    min-block-size: 1.4em;
  }

  /* ---- The rota ---- */

  /* A day, as a row of a flush card: its name, and the lane its members are
     dropped in. */
  .swarm-lane {
    align-items: stretch;
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
  }

  .swarm-lane__label {
    flex-shrink: 0;
    inline-size: 6rem;
    padding-block-start: 0.5rem;

    > p {
      margin: 0;
    }
  }

  .swarm-lane__drop {
    align-content: flex-start;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-block-size: 3.5rem;
    padding: 0.375rem;
  }

  .swarm-lane__empty {
    align-self: center;
    margin: 0;
    padding-inline: 0.25rem;

    .swarm-lane__drop:has(> .swarm-card:not([hidden])) & {
      display: none;
    }
  }

  /* A member: an outline Item, dragged by any part of it, dimmed while it's
     off or being dragged. */
  .ui-item.swarm-card {
    align-items: flex-start;
    align-self: flex-start;
    cursor: grab;
    flex-wrap: nowrap;
    gap: 0.375rem;
    inline-size: 14rem;

    &:active {
      cursor: grabbing;
    }

    &:has(.swarm-card__enabled:not(:checked)) {
      opacity: 0.6;
    }
  }

  .swarm-card--dragging {
    opacity: 0.4;
  }

  .swarm-card__summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    list-style: none;

    &::-webkit-details-marker { display: none; }
  }

  .swarm-card__name,
  .swarm-card__schedule {
    display: block;
    max-inline-size: 100%;
  }

  .swarm-card__rule {
    margin-block: 0.5rem;
  }

  /* Hour, Date: a short label beside a short number. */
  .swarm-card__field {
    align-items: center;
    display: flex;
    gap: 0.375rem;

    > .ui-label {
      flex-shrink: 0;
      inline-size: 2.5rem;
    }

    > .ui-input {
      inline-size: 5rem;
    }
  }

  /* Only a monthly member asks for its date; the others read their day from
     their lane. */
  .swarm-card__date {
    display: none;

    .swarm-lane__drop--monthly & {
      display: flex;
    }
  }

  /* The palette (a flush box in the sidebar): its line, then an agent an
     Item, dragged onto a day or added with its +. */
  .swarm-palette__hint {
    margin: 0;
    padding: 0.75rem 1rem;
  }

  .swarm-palette {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    max-block-size: 24rem;
    overflow-y: auto;
    padding: 0.75rem 1rem;
  }

  .ui-item.swarm-palette__agent {
    cursor: grab;
    flex-wrap: nowrap;

    &:active {
      cursor: grabbing;
    }
  }

  /* Narrow to campaigns: a short scrolling list of boxes. */
  .swarm-campaigns {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-block-size: 14rem;
    overflow-y: auto;
  }

  /* The run order (swarms/_member_order): a member an Item, its name and
     schedule beside the grip and the move buttons. */
  .swarm-order__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
  }

  .ui-item.swarm-order__member {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .swarm-order__name {
    gap: 0;
  }

  /* Said only while the rota is empty. */
  .swarm-week:has(.swarm-card:not([hidden])) .swarm-week__nobody {
    display: none;
  }
}