/* ================================================
   COHORT LIST — the candidate rows and the bulk-action
   bar above them: selection, top-N, reason, disposition
   buttons, per-row band chip / task dots / flags /
   disposition badge, the filter toolbar, and the
   no-results empty state.

   Split out of eval-cohort.css. Band colours live in
   eval-cohort-bands.css (shared with the distribution
   bars in eval-cohort-summary.css); the preview-runs
   panel is a sibling selector, in its own file.
   ================================================ */

@layer components {
  .cohort-root {
    /* Filter toolbar above the action bar. Same control sizing as the positions
       list and the invitations roster, so the three read as one pattern. */
    .cohort-toolbar {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-end: var(--space-md);
      flex-wrap: wrap;

      input,
      select {
        font: inherit;
        font-size: var(--fs-small);
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--wire-radius);
      }

      input[type='search'] {
        inline-size: 240px;
      }

      .cohort-list-meta {
        margin-inline-start: auto;
        font-size: var(--fs-xsmall);
        white-space: nowrap;
      }
    }

    /* Filtered-to-nothing. A plain <li> because the list is a <ul>, not a
       table — there is no row to span. */
    .cohort-no-match {
      padding-block: var(--space-xl);
      text-align: center;
      font-size: var(--fs-small);
    }

    .cohort-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);
      margin-block-end: var(--space-md);

      /* Two rows: pick the cohort, then reason + decide. Keeps the reason
         field from being crushed between the top-n picker and the buttons. */
      .cohort-actions-select,
      .cohort-actions-decide {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-sm);
      }

      .cohort-select-all-label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2xs);
        font-size: var(--fs-small);
        cursor: pointer;
      }

      /* Native checkboxes render as a ~13px dot that all but vanishes on the
         dark surface; size the select-all up so it reads as a real, clickable
         checkbox. The row-select is sized in .cohort-row below (it lives
         outside .cohort-actions in the DOM). Colour (accent-color) is in
         @layer theme. */
      .cohort-select-all {
        inline-size: 1.15rem;
        block-size: 1.15rem;
        flex: none;
      }

      .cohort-selection-count {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
      }

      .cohort-topn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2xs);

        .cohort-topn-label {
          font-size: var(--fs-xsmall);
        }

        .cohort-topn-btn {
          padding: var(--space-4xs) var(--space-xs);
          border-radius: var(--radius-sm);
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-medium);
          cursor: pointer;
        }
      }

      .cohort-reason {
        flex: 1 1 16rem;
        min-inline-size: 12rem;
        padding: var(--space-2xs) var(--space-sm);
        border-radius: var(--radius-sm);
        font-size: var(--fs-small);
      }

      .cohort-dispo-buttons {
        display: inline-flex;
        gap: var(--space-2xs);
        margin-inline-start: auto;

        .cohort-dispo-btn {
          padding: var(--space-2xs) var(--space-md);
          border-radius: var(--radius-sm);
          font-size: var(--fs-small);
          font-weight: var(--fw-semibold);
          cursor: pointer;
          transition:
            background 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease;

          &:disabled {
            cursor: not-allowed;
          }
        }
      }

      .cohort-status {
        flex-basis: 100%;
        margin: 0;
        font-size: var(--fs-xsmall);
      }
    }

    /* ---- Ranked candidate list ---- */
    .cohort-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cohort-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);

      .cohort-row-select {
        cursor: pointer;
        inline-size: 1.15rem;
        block-size: 1.15rem;
      }

      .cohort-row-main {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        min-width: 0;
        text-decoration: none;

        .cohort-row-identity {
          display: flex;
          flex-direction: column;
          min-width: 0;

          .cohort-row-name {
            font-size: var(--fs-small);
            font-weight: var(--fw-semibold);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .cohort-row-email {
            font-size: var(--fs-xsmall);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .cohort-task-dots {
          display: inline-flex;
          gap: 3px;

          .cohort-task-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
          }
        }
      }

      .cohort-band {
        justify-self: start;
        padding: var(--space-4xs) var(--space-sm);
        border-radius: var(--radius-pill);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
      }

      .cohort-standing {
        font-size: var(--fs-xxsmall);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
      }

      .cohort-flags {
        display: inline-flex;
        gap: var(--space-3xs);

        .cohort-flag {
          padding: var(--space-4xs) var(--space-xs);
          border-radius: var(--radius-sm);
          font-size: var(--fs-xxsmall);
          font-weight: var(--fw-medium);
          white-space: nowrap;
        }
      }

      .cohort-dispo-badge {
        padding: var(--space-4xs) var(--space-sm);
        border-radius: var(--radius-pill);
        font-size: var(--fs-xxsmall);
        font-weight: var(--fw-semibold);
        white-space: nowrap;
      }

      .cohort-chevron {
        font-size: var(--fs-medium);
        line-height: 1;
      }
    }

    /* ---- Empty state ---- */
    .cohort-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-3xl) var(--space-lg);
      text-align: center;

      .cohort-empty-title {
        margin: 0;
        font-size: var(--fs-medium);
        font-weight: var(--fw-semibold);
      }

      .cohort-empty-body {
        margin: 0;
        max-width: 32rem;
        font-size: var(--fs-small);
        line-height: 1.5;
      }
    }

    /* ---- Narrow viewports: relax the fixed row grid ---- */
    @media (width < 48rem) {
      .cohort-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: var(--space-2xs);

        .cohort-standing,
        .cohort-flags {
          grid-column: 2 / -1;
        }
      }

      .cohort-actions .cohort-dispo-buttons {
        margin-inline-start: 0;
      }
    }
  }
}

@layer theme {
  .cohort-root {
    .cohort-toolbar {
      input,
      select {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--text-primary);
      }

      input::placeholder {
        color: var(--text-secondary);
      }

      .cohort-list-meta {
        color: var(--text-secondary);
      }
    }

    .cohort-no-match {
      color: var(--text-secondary);
    }

    /* Flat modifier selectors: native CSS nesting has no Sass-style `&--mod`
       concatenation (and the BFF serves CSS raw — no transpile step), so a
       `.cohort-task-dot { &--strong {} }` would expand to an invalid selector
       and never paint. Same pattern for the band palette above and the
       disposition selectors below. */
    .cohort-task-dot--strong {
      background: var(--color-success);
    }

    .cohort-task-dot--adequate {
      background: var(--color-info);
    }

    .cohort-task-dot--limited {
      background: var(--color-warning);
    }

    .cohort-task-dot--none {
      background: oklch(from var(--text-secondary) l c h / 0.4);
    }

    .cohort-actions {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid var(--border-subtle);

      .cohort-select-all-label,
      .cohort-topn-label {
        color: var(--text-primary);
      }

      /* On-brand checked fill + a legible control on dark. */
      .cohort-select-all {
        accent-color: var(--accent-primary);
      }

      .cohort-selection-count {
        color: var(--text-secondary);
      }

      .cohort-topn-btn {
        background: transparent;
        border: 1px solid var(--border-muted);
        color: var(--text-secondary);

        &:hover {
          border-color: var(--accent-primary);
          color: var(--accent-primary);
        }
      }

      .cohort-reason {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--text-primary);

        &::placeholder {
          color: var(--text-secondary);
        }
      }

      .cohort-status {
        color: var(--text-secondary);
      }
    }
    .cohort-dispo-btn {
      background: transparent;
      border: 1px solid var(--border-muted);
      color: var(--text-secondary);

      &:disabled {
        opacity: 0.5;
      }
    }

    /* Semantic colour at rest so the actions read as three distinct
       decisions, not three grey outlines; hover fills the tint. */
    .cohort-dispo-btn--shortlist {
      border-color: oklch(from var(--color-success) l c h / 0.35);
      color: var(--color-success);
    }

    .cohort-dispo-btn--hold {
      border-color: oklch(from var(--color-warning) l c h / 0.35);
      color: var(--color-warning);
    }

    .cohort-dispo-btn--decline {
      border-color: oklch(from var(--color-error) l c h / 0.35);
      color: var(--color-error);
    }

    .cohort-dispo-btn--shortlist:hover:not(:disabled) {
      background: oklch(from var(--color-success) l c h / 0.14);
      border-color: oklch(from var(--color-success) l c h / 0.4);
      color: var(--color-success);
    }

    .cohort-dispo-btn--hold:hover:not(:disabled) {
      background: oklch(from var(--color-warning) l c h / 0.14);
      border-color: oklch(from var(--color-warning) l c h / 0.4);
      color: var(--color-warning);
    }

    .cohort-dispo-btn--decline:hover:not(:disabled) {
      background: oklch(from var(--color-error) l c h / 0.14);
      border-color: oklch(from var(--color-error) l c h / 0.4);
      color: var(--color-error);
    }

    .cohort-row {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.02));
      border: 1px solid var(--border-faint);

      &:hover {
        border-color: var(--border-muted);
      }

      .cohort-row-select {
        accent-color: var(--accent-primary);
      }

      .cohort-row-name {
        color: var(--text-primary);
      }

      .cohort-row-email {
        color: var(--text-secondary);
      }

      .cohort-standing {
        color: var(--text-secondary);
      }

      .cohort-chevron {
        color: var(--text-secondary);
      }
    }

    .cohort-flag--debrief {
      background: oklch(from var(--color-warning) l c h / 0.12);
      border: 1px solid oklch(from var(--color-warning) l c h / 0.28);
      color: var(--color-warning);
    }

    /* Recorded disposition badges (flat modifiers — see the note above). */
    .cohort-dispo-badge--shortlist {
      background: oklch(from var(--color-success) l c h / 0.16);
      color: var(--color-success);
    }

    .cohort-dispo-badge--hold {
      background: oklch(from var(--color-warning) l c h / 0.16);
      color: var(--color-warning);
    }

    .cohort-dispo-badge--decline {
      background: oklch(from var(--color-error) l c h / 0.16);
      color: var(--color-error);
    }

    .cohort-empty {
      .cohort-empty-title {
        color: var(--text-primary);
      }

      .cohort-empty-body {
        color: var(--text-secondary);
      }
    }
  }
}