.suggestions-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  min-height: calc(100vh - 140px);
  background: var(--luncher-bg);

  .suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    flex-wrap: wrap;

    h1 {
      font-size: 2rem;
      font-weight: 700;
      color: var(--luncher-text);
      margin: 0;
    }
  }

  .suggestions-info {
    width: 100%;
    max-width: 900px;
    margin: 12px 0 24px;
    color: var(--luncher-text-secondary);
    font-size: 0.95rem;
  }

  .suggestions-empty {
    color: var(--luncher-text-secondary);
    margin-top: 32px;
  }

  .resolved-section {
    width: 100%;
    max-width: 900px;
    margin-top: 48px;

    h2 {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--luncher-text);
      margin-bottom: 8px;
    }
  }

  .suggestions-table.resolved {
    th {
      background: var(--luncher-text-secondary);
    }

    td.col-score {
      color: var(--luncher-text-secondary);
    }
  }

  .suggestions-table {
    width: 100%;
    max-width: 900px;
    background: var(--luncher-bg-card);
    border-radius: var(--luncher-radius-lg);
    box-shadow: var(--luncher-shadow);
    border: 1px solid var(--luncher-border-light);
    overflow: hidden;
    border-collapse: collapse;

    th {
      background: var(--luncher-primary);
      color: #ffffff;
      padding: 12px 20px;
      text-align: left;
      font-weight: 600;
      font-size: 0.9rem;
    }

    td {
      padding: 12px 20px;
      border-bottom: 1px solid var(--luncher-border-light);
      color: var(--luncher-text);
      font-size: 0.9rem;
      vertical-align: middle;
    }

    .col-score {
      text-align: center;
      width: 80px;
      font-weight: 600;
    }

    td.col-score {
      color: var(--luncher-primary);
    }

    .col-actions {
      text-align: center;
      width: 150px;
      white-space: nowrap;
    }

    tbody tr {
      cursor: pointer;
      transition: var(--luncher-transition);

      &:hover {
        background: var(--luncher-bg-hover);
      }

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

    .vote-btn {
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 6px 8px;
      border-radius: var(--luncher-radius-sm, 6px);
      color: var(--luncher-text-secondary);
      transition: var(--luncher-transition);

      &:hover {
        background: var(--luncher-bg-hover);
        color: var(--luncher-text);
      }

      &.vote-up.active {
        color: #2e7d32;
      }

      &.vote-down.active {
        color: #c62828;
      }

      &.delete-btn:hover {
        color: #c62828;
      }
    }
  }
}