/* ============================================
   TALENT MANAGEMENT PAGE
   ============================================ */

@layer components {
  .talent-management-page {
    padding-block: var(--space-xl);
    position: relative;
    overflow: hidden;

    /* Header density is app-wide now (base-local.css); index pages go a
       step smaller than record pages */
    &:not(.detail-page) .page-header h1 {
      font-size: var(--fs-large);
    }

    .page-header {
      .position-count {
        padding: var(--space-xs) var(--space-md);
        border-radius: 100px;
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
      }
    }

    .list-toolbar {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-end: var(--space-md);
      position: relative;
      z-index: 1;

      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: 280px;
      }

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

    .table-container {
      overflow-x: auto;
      border-radius: 12px;
      position: relative;
      z-index: 1;
    }

    .positions-table {
      inline-size: 100%;
      border-collapse: collapse;
      font-size: var(--fs-small);

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

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

      tbody tr {
        cursor: pointer;
        transition: background 0.15s ease-out;
      }
    }

    /* List density: competencies, tasks, and tags already live on the
       position detail page — hide them in the list so each position is a
       single scannable row. Scoped to .positions-table so the detail
       page's reuse of these cell classes is unaffected. */
    .positions-table {
      .competencies-cell,
      .tasks-cell,
      .tags-cell {
        display: none;
      }

      td {
        padding-block: var(--space-sm);
        vertical-align: middle;
      }

      .updated-cell {
        font-size: var(--fs-xsmall);
        white-space: nowrap;
      }

      /* One-line cells: region and work arrangement inline… */
      .location-cell span {
        display: inline;
      }

      /* …and template name + status badge + version on a single line */
      .template-cell {
        white-space: nowrap;

        strong {
          display: inline;
          margin-inline-end: var(--space-xs);
        }

        .template-meta {
          display: inline-flex;
          gap: var(--space-xs);
          align-items: center;
        }
      }

      .chevron-cell {
        font-size: var(--fs-large);
        line-height: 1;
        padding-inline: var(--space-sm);
        text-align: end;
      }

      .actions-cell {
        inline-size: 1%;
        white-space: nowrap;
        text-align: end;
      }

      .position-delete-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 32px;
        block-size: 32px;
        padding: 0;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition:
          background 0.15s ease-out,
          color 0.15s ease-out;
      }
    }

    .position-cell {
      min-inline-size: 200px;
      max-inline-size: 280px;

      strong {
        display: block;
        margin-block-end: var(--space-xs);
        transition: color 0.15s ease-out;
      }

      p {
        font-size: var(--fs-xsmall);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    /* Page-scoped (not cell-scoped): the badge renders in the template
       column on the list and could move again — keep its style portable. */
    .setup-incomplete-badge {
      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;
    }

    .level-cell {
      .level-badge {
        display: inline-flex;
        gap: var(--space-xs);
        align-items: center;
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
      }
    }

    .location-cell {
      /* Region on one line, work type on the second — never three */
      white-space: nowrap;

      span {
        display: block;
      }

      .work-type {
        font-size: var(--fs-xsmall);
      }
    }

    .template-cell {
      min-inline-size: 180px;

      strong {
        display: block;
        margin-block-end: var(--space-xs);
      }

      .template-meta {
        display: flex;
        gap: var(--space-sm);
        align-items: center;
      }

      .status-badge {
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
      }
    }

    .competencies-cell {
      min-inline-size: 160px;

      .competency {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--space-xs);
        padding: var(--space-xs);
        border-radius: 8px;
        margin-block-end: var(--space-xs);
        font-size: var(--fs-xsmall);

        &:last-child {
          margin-block-end: 0;
        }
      }

      .progress-bar {
        grid-column: 1 / -1;
        block-size: 4px;
        border-radius: 2px;
        overflow: hidden;

        .progress {
          block-size: 100%;
        }
      }
    }

    .tasks-cell {
      .task-badge {
        display: inline-flex;
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
      }
    }

    .tags-cell {
      min-inline-size: 150px;

      .tag {
        display: inline-block;
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
        margin-inline-end: var(--space-xs);
        margin-block-end: var(--space-xs);
      }
    }
  }
}

/* ================================================
   THEME
   ================================================ */
@layer theme {
  .talent-management-page {
    .position-count {
      background: light-dark(
        oklch(from var(--accent-primary) l c h / 0.08),
        oklch(from var(--accent-primary) l c h / 0.1)
      );
      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);
    }

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

    .positions-table {
      th {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
        color: var(--text-secondary);
        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:hover {
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));

        .position-cell strong {
          color: var(--accent-primary);
        }
      }
    }

    .position-cell p {
      color: var(--text-secondary);
    }

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

    .location-cell .work-type {
      color: var(--text-secondary);
    }

    .updated-cell,
    .chevron-cell {
      color: var(--text-secondary);
    }

    .position-delete-btn {
      background: transparent;
      color: var(--text-secondary);

      &:hover {
        background: light-dark(
          oklch(from var(--color-error) l c h / 0.1),
          oklch(from var(--color-error) l c h / 0.15)
        );
        color: var(--color-error);
      }

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

    .setup-incomplete-badge {
      background: oklch(from var(--color-warning) l c h / 0.2);
      color: var(--color-warning);
    }

    .template-cell .status-badge {
      background: light-dark(
        oklch(from var(--color-success) l c h / 0.08),
        oklch(from var(--color-success) l c h / 0.12)
      );
      border: 1px solid
        light-dark(
          oklch(from var(--color-success) l c h / 0.2),
          oklch(from var(--color-success) l c h / 0.25)
        );
      color: var(--color-success);
    }

    .competencies-cell {
      .competency {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      }

      .progress-bar {
        background: oklch(from var(--glass-tint) l c h / 0.06);
      }
    }

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