/*
  ----------------------------------------
  Tables (.ui-table)
  ----------------------------------------
  Matches the Figma data table spec:
    - Rounded card wrapper with border
    - Optional dark title header (.ui-table-title)
    - Gray-50 header row, 44px height
    - Body rows, 72px min-height, border-bottom only
    - Primary + supporting text helpers
*/

@layer styles {

  /* ── Outer wrapper ─────────────────────────────── */
  .ui-table-wrap {
    border-radius: var(--rounded-lg);    /* 8px */
    border: var(--border) solid var(--gray-200);
    overflow-x: auto;                    /* horizontal scroll on wide tables */
    -webkit-overflow-scrolling: touch;
    background: var(--white);
  }

  /* Optional dark title bar above the table */
  .ui-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 1.5rem;     /* 24px sides */
    background: var(--brand-1);          /* navy */
    color: var(--white);
    gap: var(--space-sm);

    h2, h3, .ui-table-label {
      font-size: 1.25rem;                /* 20px */
      font-weight: 500;
      line-height: 1.75rem;
      color: var(--white);
      margin: 0;
    }
  }

  /* ── Table element ─────────────────────────────── */
  .ui-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);

    /* ── Header row ──────────────────────────────── */
    thead tr {
      background: var(--gray-50);
      border-bottom: var(--border) solid var(--gray-200);
    }

    th {
      padding: 0.75rem 1.5rem;
      height: 2.75rem;                 /* Figma spec: 44px */
      font-size: 0.9375rem;              /* 15px floor */
      font-weight: 500;
      color: var(--gray-600);            /* #4B5563 */
      text-align: left;
      white-space: nowrap;
    }

    /* ── Body rows ───────────────────────────────── */
    tbody tr {
      border-bottom: var(--border) solid var(--gray-200);
      transition: background 120ms ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background: var(--gray-50);
      }
    }

    td {
      padding: 1rem 1.5rem;              /* 16px 24px */
      min-height: 4.5rem;                /* 72px */
      white-space: nowrap;
    }

    /* ── Cell text helpers ───────────────────────── */

    /* Primary cell value — gray-900, 14px medium */
    .cell-primary {
      font-size: 0.9375rem;              /* 15px floor */
      font-weight: 500;
      color: var(--black);               /* #111827 */
      line-height: 1.25rem;
    }

    /* Supporting / secondary value — gray-400, 12px */
    .cell-supporting {
      font-size: 0.9375rem;              /* 15px floor */
      font-weight: 500;
      color: var(--gray-400);            /* #9CA3AF */
      line-height: 1rem;
      margin-top: 0.125rem;
    }

    /* Stack primary + supporting vertically */
    .cell-stack {
      display: flex;
      flex-direction: column;
    }
  }

  /* ── Scrollable overflow wrapper ───────────────── */
  .ui-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}