.list-container {
  padding: 20px;
  font-family: 'Segoe UI', sans-serif;
  background: #f5f7fb;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;

  .tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    font-size: 13px;

    &.active {
      background: #0f172a;
      color: #fff;
      border-color: #0f172a;
    }
  }
}

/* Filter Bar */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;

  input {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
  }

  select {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
  }

  .export-btn {
    margin-left: auto;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    cursor: pointer;

    &:hover {
      background: #e2e8f0;
    }
  }
}

/* Table */
.table-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;

  table {
    width: 100%;
    border-collapse: collapse;

    th {
      text-align: left;
      padding: 12px;
      font-size: 12px;
      color: #6b7280;
      background: #f9fafc;
    }

    td {
      padding: 12px;
      border-top: 1px solid #f1f5f9;
      font-size: 14px;
    }

    tr:hover {
      background: #f9fafc;
    }
  }
}

/* Pills */
.pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;

  &.blue {
    background: #e0f2fe;
    color: #0369a1;
  }

  &.green-light {
    background: #dcfce7;
    color: #15803d;
  }

  &.yellow {
    background: #fef3c7;
    color: #b45309;
  }

  &.red {
    background: #fee2e2;
    color: #dc2626;
  }

  &.green {
    background: #d1fae5;
    color: #065f46;
  }

  &.blue-light {
    background: #e0e7ff;
    color: #3730a3;
  }

  &.gray {
    background: #e5e7eb;
    color: #374151;
  }
}

/* Actions */
.actions {
  display: flex;
  gap: 10px;
  cursor: pointer;

  span:hover {
    transform: scale(1.1);
  }
}