/* Empty state */
[data-component="empty-state"] {
  padding: var(--space-20) var(--space-6);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-sm);

  p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }
}

/* Table container */
[data-slot="usage-table"] {
  overflow-x: auto;
}

/* Table element */
[data-slot="usage-table-element"] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);

  thead {
    border-bottom: 1px solid var(--color-border);
  }

  th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: normal;
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-muted);
    color: var(--color-text-muted);
    font-family: var(--font-mono);

    &[data-slot="usage-date"] {
      color: var(--color-text);
    }

    &[data-slot="usage-model"] {
      font-family: var(--font-sans);
      color: var(--color-text-secondary);
      max-width: 200px;
      word-break: break-word;
    }

    &[data-slot="usage-cost"] {
      color: var(--color-text);
      font-weight: 500;
    }
  }

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

/* Pagination */
[data-slot="pagination"] {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-muted);
  margin-top: var(--space-2);

  button {
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.15s ease;

    svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
    }

    &:hover:not(:disabled) {
      background: var(--color-bg-tertiary);
      border-color: var(--color-border-hover);
    }

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

/* Mobile responsive */
@media (max-width: 40rem) {
  [data-slot="usage-table-element"] {
    th,
    td {
      padding: var(--space-2) var(--space-3);
      font-size: var(--font-size-xs);
    }

    /* Hide Model column on mobile */
    th:nth-child(2),
    td:nth-child(2) {
      display: none;
    }
  }
}
