/* ================================================
   POSITION INVITATIONS — the sent-invitations roster
   on the position detail page's Candidates tab.

   Split out of position-detail.css (which was past 1300
   lines) so the roster's table + toolbar have room to
   grow independently of the rest of the record page.
   Scoped under .detail-page, same as its parent.

   .link-button deliberately stays in position-detail.css:
   the corpus panel's Refresh uses it too, so it is a
   page-level utility rather than a roster style.

   .list-toolbar / .table-container / .empty-row / .count-pill
   are repeated per page-scope across this codebase (see
   members.css, talent-management.css); these are the
   .detail-page copies, not new patterns.
   ================================================ */

@layer components {
  .detail-page {
    /* Send panel — collapsed by default so the roster is what the tab lands
       on. The divider between the two only exists while it is open, so a
       collapsed panel doesn't leave a rule floating above the table. */
    .invite-panel[hidden] {
      display: none;
    }

    /* Blocked send states — shown in place of the panel when the position has
       no assessment template, or one still in draft. The explicit [hidden]
       rule is required because the display below would otherwise win over it,
       same as .invite-panel above. */
    .invite-blocked {
      display: grid;
      justify-items: start;
      gap: var(--space-xs);
      padding: var(--space-lg);
    }

    .invite-blocked[hidden] {
      display: none;
    }

    .invite-blocked-title {
      margin: 0;
      font-size: var(--fs-body);
      font-weight: var(--fw-medium);
    }

    .invite-blocked-body {
      margin: 0;
      font-size: var(--fs-small);
      max-inline-size: 52ch;
    }

    .invite-blocked-action {
      margin-block-start: var(--space-sm);
      text-decoration: none;
    }

    .sent-invitations {
      margin-block-start: var(--space-lg);
    }

    .invite-panel:not([hidden]) + .sent-invitations {
      margin-block-start: var(--space-xl);
      padding-block-start: var(--space-lg);
      border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
    }

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

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

    .count-pill {
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
    }

    .table-container {
      overflow-x: auto;
      border-radius: 12px;
    }

    /* Fixed layout, not auto. With auto the columns are sized by their content,
       so one long email widened the candidate column until the actions column
       fell off the edge — and the exact tipping point moved with the data.
       Fixed makes the columns deterministic (the header row's widths below win),
       lets the email ellipsis resolve against a real width, and stops rows
       reflowing the whole table as content varies. */
    .invitations-table {
      table-layout: fixed;
      inline-size: 100%;
      /* Narrower than this and the columns can no longer hold their nowrap
         timestamps, so the container scrolls instead of cells overflowing. */
      min-inline-size: 46rem;
      border-collapse: collapse;
      font-size: var(--fs-small);

      th,
      td {
        text-align: start;
        padding: var(--space-sm) var(--space-md);
        vertical-align: middle;
      }

      th {
        font-weight: var(--fw-medium);
        white-space: nowrap;
      }

      /* Column widths — these sum to 100% and only need to live on the header
         cells, since fixed layout takes its widths from the first row. */
      th.invite-candidate-cell {
        inline-size: 27%;
      }

      th.invite-status-cell {
        inline-size: 12.5%;
      }

      th.invite-sent-cell {
        inline-size: 14.5%;
      }

      th.invite-window-cell {
        inline-size: 16.5%;
      }

      th.invite-actions-cell {
        inline-size: 13%;
      }

      /* The name is what you scan, so it gets the slack the timestamp columns
         gave back. Without a floor, three nowrap date columns crush it to
         ~100px and every name wraps onto three lines. */
      .invite-candidate-cell {
        /* Names wrap rather than truncate — cutting off a person's name is
           worse than an extra line, and they are short enough that it's rare. */
        .invite-name {
          display: block;
          font-weight: var(--fw-medium);

          /* Scored candidates link to their evaluation. Same accent-on-hover
             affordance the positions list gives its clickable titles. */
          &.invite-name--link {
            text-decoration: none;
          }
        }

        /* Emails are the opposite: one line, ellipsised, with the full value in
           the title. Wrapping one breaks it mid-word and doubles every row's
           height across the table. */
        .invite-email {
          display: block;
          font-size: var(--fs-xsmall);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .invite-sent-cell,
      .invite-window-cell {
        white-space: nowrap;
      }

      /* Stacked, not side by side: side by side these two need ~170px. Two
         lines also matches the candidate cell's name + email, so row height
         stays even.

         td only — flexing the th would take it out of table-cell layout, and
         its column width percentage above would be silently ignored. */
      td.invite-actions-cell {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--space-3xs);
        white-space: nowrap;
      }

      /* Edit-window pickers: the branded date field fills its cell here rather
         than the add form's fixed 230px trigger width. */
      .invite-window-cell .iw-field {
        min-inline-size: 0;
        inline-size: 100%;
      }

      /* The cell is nowrap above so a display timestamp never breaks mid-stamp.
         The edit trigger is longer than the stamp it replaces — it adds an icon,
         padding and a weekday — and at this column's 16.5% (~121px at the
         table's 46rem floor) nowrap leaves it nowhere to go but into the
         neighbouring column. A tester saw exactly that: both dates and the
         Save/Cancel actions piled on top of each other.

         Only this span is released, so the display state keeps its nowrap.
         min-inline-size because a flex item defaults to min-width:auto and
         refuses to shrink below its own content, which would defeat the wrap.

         Wrapping rather than truncating: the row is a little taller for the
         moment it is being edited, and an ellipsis here would cut off the TIME
         — the half most likely to be what the recruiter is changing. */
      .invite-window-cell .iw-field-val {
        min-inline-size: 0;
        white-space: normal;
      }

      .empty-row td {
        text-align: center;
        padding-block: var(--space-lg);
      }
    }

    .invite-status-pill {
      display: inline-block;
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      white-space: nowrap;
    }
  }
}

@layer theme {
  .detail-page {
    .invite-blocked-title {
      color: var(--text-primary);
    }

    .invite-blocked-body {
      color: var(--text-secondary);
    }

    .invitations-toolbar {
      input,
      select {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--text-primary);
      }

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

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

    .table-container {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      backdrop-filter: blur(8px);
    }

    .invitations-table {
      th {
        color: var(--text-secondary);
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      }

      td {
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
      }

      tbody tr:last-child td {
        border-block-end: none;
      }

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

      .invite-name--link {
        color: var(--text-primary);

        &:hover,
        &:focus-visible {
          color: var(--accent-primary);
        }
      }

      .empty-row td {
        color: var(--text-secondary);
      }

      /* De-emphasise dead rows via colour, not opacity. */
      tbody tr:has(.invite-status-pill--revoked) td,
      tbody tr:has(.invite-status-pill--expired) td {
        color: var(--text-secondary);
      }
    }

    .count-pill {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.08),
        oklch(from var(--accent-primary) l c h / 0.12)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--accent-primary) l c h / 0.2),
          oklch(from var(--accent-primary) l c h / 0.25)
        );
      color: var(--accent-primary);
    }

    .invite-status-pill {
      background: oklch(from var(--glass-tint) l c h / 0.1);
      color: var(--text-secondary);

      &.invite-status-pill--invited,
      &.invite-status-pill--started {
        background: oklch(from var(--accent-primary) l c h / 0.12);
        color: var(--accent-primary);
      }

      &.invite-status-pill--submitted,
      &.invite-status-pill--scored {
        background: oklch(from var(--color-success) l c h / 0.14);
        color: var(--color-success);
      }

      &.invite-status-pill--expired,
      &.invite-status-pill--retake-required,
      &.invite-status-pill--revoked {
        background: oklch(from var(--color-error) l c h / 0.1);
        color: var(--color-error);
      }
    }
  }
}